从 ExtJS 的控制器中的单击事件中获取表单？答案

【问题标题】：Getting form from click event in Controller in ExtJS?从 ExtJS 的控制器中的单击事件中获取表单？
【发布时间】：2012-07-18 18:17:03
【问题描述】：

我正在扩展http://docs.sencha.com/architect/2-0/#!/guide/views_forms_extjs 中给出的示例，以使用更加以 MVC 为中心的方法。因此，为此我想将点击处理程序从视图移动到新创建的控制器。

我的点击甚至可以正常工作，但我不知道如何从控制器的上下文中操作表单（视图使用 this.getForm()）。

这是我目前所拥有的，

Ext.define('LoginExample.controller.LoginController', {
    extend: 'Ext.app.Controller',


    onLoginButtonClick: function(button, e, options) {
        console.log('button clicked');


        if (this.getForm().isValid()) {
            this.getForm().submit({
                url: 'login.php',
                success: function(form, action) {
                    Ext.Msg.alert('Login Successful!');
                },
                failure: function(form, action) {
                    Ext.Msg.alert('Login Failed!');
                }
            });
        }
    },


    init: function() {
        this.control({
            "#loginButton": {
                click: this.onLoginButtonClick
            }
        });
    }

});

显然 onLoginButtonClick 上下文中的 this 不再是视图，而是控制器。

给定给我的参数，（Ext.button.Button 按钮、事件 e、对象选项），我如何在适当的表单上获得提交？

我应该在使用 ExtJS 4 时注意到这一点。

【问题讨论】：

标签： extjs extjs4 extjs-mvc

【解决方案1】：

button.up('form');

会成功的。

要获取要操作的 BasicForm 对象，请使用

button.up('form').getForm()

【讨论】：

这对我来说应该可行，但是当我这样做时，我得到“未捕获的 TypeError：Object [object Object] 没有方法 'isValid'”。
那是因为表单没有 isValid() 方法。不过，表单确实有一个内部 BasicForm，它有一个 isValid() 方法。您必须使用奇怪的 form.form.isValid() 表达式来获取它:) docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Basic-method-isValid
谢谢，这行得通。您也可以使用 .getForm() 代替表单。或者使用 Ext.ComponentQuery.query("#formid")[0].getForm() 进行查询