0

我是 ExtJS 的新手，仍在学习那里的工作原理。在我的情况下，我有一个 html 页面，我通过 ajax 在我的索引页面中加载它，在这个 html 中有一个表单元素。到目前为止，我已经设法为我的表单按钮设置了一个事件侦听器，因此当我单击按钮时，事件运行良好。我不确定如何通过在我的控制器中处理表单的字段值来传递它们。

这是示例代码：

表格：

    <form id="loginform">
        <fieldset>
            <input type="text" id="usn" placeholder="User" /><br />
            <input type="password" id="pwd" placeholder="Password"/>
        </fieldset>
        <p><input type="button" id="lg" value="Enter" /></p>
    </form>

我的观点：

Ext.define('App.view.Login', {
extend: 'Ext.container.Container',
alias: 'widget.login',

renderTo: 'wrap',

initComponent: function() {


    this.items = [{ 
        loader: {
            autoLoad: true,
            url: "web/login.html",
            renderer: function(loader, response, active) {
                var res = response.responseText;
                loader.getTarget().update(res);
            }
        }    
    }];


    this.addEvents('loginUser');



    this.callParent(arguments);
},


afterRender: function() {
    this.mon(this.el, 'click', this.onUserClick, this, {
        delegate: '#lg'
    });

    this.callParent(arguments);
},


onUserClick: function(ev, t) {
    ev.stopEvent();

    var params = Ext.fly(t).getAttribute('value');

    this.fireEvent('loginUser', params, this, ev);
}

});

控制器：

Ext.define('App.controller.Login', {
extend: 'Ext.app.Controller',

views: [ 'Login' ], 

refs: [{
    selector: 'login',
    ref: 'login'
}],

init: function() {

    this.control({

        'login':{

            loginUser: this.onLoginAuth

        }
    });
},

onLoginAuth: function(params, component, event){





    Ext.widget('users');


    this.getLogin().destroy();

}

});

有人知道我们如何实现它吗？

4

2 回答 2

1

我认为你误解了extjs。主要是我使用 extjs 来实现浏览器兼容性。我们不是直接写html，extjs为我们做。

在 html 端，我们只包含 extjs 库和 app.js

<html>
  <head>
<title>Account Manager</title>

<link rel="stylesheet" type="text/css" href="ext-4/resources/css/ext-all.css">

<script type="text/javascript" src="ext-4/ext-debug.js"></script>

<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

在 app.js 中

每个 Ext JS 4 应用程序都以 Application 类的一个实例开始。Application 包含应用程序的全局设置（例如应用程序的名称），并维护对应用程序使用的所有模型、视图和控制器的引用。应用程序还包含一个启动功能，该功能在加载所有内容时自动运行。

检查http://docs.sencha.com/ext-js/4-1/#/guide/application_architecture

于 2012-06-25T05:47:32.610 回答
0

正如其他海报所说，使用 Ext.form 类更有意义，但是如果你必须这样做：

this.fireEvent('loginUser', this, Ext.getDom('usn').value, Ext.getDom('pwd').value);
于 2012-06-25T06:25:05.213 回答