Extjs4 在ExtJs控制器上从html表单传递值_Extjs4_Extjs

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

extjs4 extjs

Extjs4 在ExtJs控制器上从html表单传递值,extjs4,extjs,Extjs4,Extjs,我是ExtJS新手，仍在学习如何在那里工作。。在我的例子中，我有一个html页面，在我的索引页面中通过ajax加载，在这个html中有一个表单元素。到目前为止，我已经成功地将事件侦听器设置为窗体的按钮，这样当我单击按钮时，事件就可以正常工作。我不确定的是如何通过在控制器中处理表单的字段值来传递表单的字段值下面是示例代码：表格： <form id="loginform"> <fieldset> <input typ

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

}

}))

合作伙伴：

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

}

}))

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

我想你被误解了。我主要使用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中

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

检查

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

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

为什么你会这样做，而不使用，比如说一个Ext表单？谢谢