Question

我是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);
}

}）;

cotroller：

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();

}

}）;

有人知道我们如何实施它？

Answer 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类的实例开头。应用程序包含应用程序的全局设置（例如应用程序的名称），以及维护对应用程序使用的所有模型，视图和控制器的引用。应用程序还包含一个启动函数，该函数在加载所有内容时自动运行。

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

Answer 2

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

this.fireEvent('loginUser', this, Ext.getDom('usn').value, Ext.getDom('pwd').value);

从ExtJs控制器上的html表单传递值

2 个答案: