1

我有一个登录表单，我正在使用 ExtJS 5。我正在尝试使用我在 4+ 中使用的函数来获取对表单的引用，但没有运气。

下面是表格：

Ext.require([
    'Ext.form.*',
    'Ext.Img',
    'Ext.tip.QuickTipManager'
]);

Ext.define('APP.view.core.forms.Loginform', {
    extend: 'Ext.window.Window',
    xtype: 'form-login',
    id: 'loginForm',


    title: 'Login',
    frame:true,
    width: 320,
    bodyPadding: 10,

    defaultType: 'textfield',

    items: [{
        allowBlank: false,
        fieldLabel: 'Email',
        name: 'email',
        emptyText: 'test@example.com'
    }, {
        allowBlank: false,
        fieldLabel: 'Password',
        name: 'password',
        emptyText: 'password',
        inputType: 'password'
    }],

    buttons: [{
            text:'Login',
            action: 'loginSubmit'
        }],

    initComponent: function() {
        this.defaults = {
            anchor: '100%',
            labelWidth: 120
        };

        this.callParent(arguments);
    }
});

这是我的控制器（我不知道 ExtJS 5 采用的 MVVM 方式）：

init: function() {
    this.control({
        // Login form button
        'button[action=loginSubmit]' : {
            click: this.loginAction
        }
    });
},

loginAction: function(button, event) {
      console.info('login button interaction.');
        // Reference to the the window
        var loginWindow = button.up('window');
        var loginForm = loginWindow.down('form-login');
        console.log(loginForm.getValues());

        var loginMask = new Ext.LoadMask({
            target: Ext.getCmp('loginForm'),
            msg: "Please wait."
        }).show();

        // Send AJAX request
        Ext.Ajax.request({
            url: '/user/login',
            method: 'post',
            success: function(response){
                var responseValues = Ext.decode(response.responseText);
                loginWindow.close();
                //Didn't return a 404 or 500 error, hide mask
                loginMask.hide();
                //Show user success message
                Ext.Msg.show({
                    title: 'Login successful',
                    msg: responseValues.msg,
                    buttons: Ext.Msg.OK
                });
                //refresh store from combobox value
                //var store = Ext.getCmp('adminslist').getStore();
                //store.load();
            },
            failure: function(){
                loginWindow.close();
                loginMask.hide();
                Ext.Msg.show({
                    title: 'Login failed',
                    msg: 'Login failed please contact the development team',
                    buttons: Ext.Msg.OK,
                    icon: Ext.Msg.ERROR
                });
            }
        });
    },

本节我试图获取对表单的引用，然后是对值的引用......

// Reference to the the window
var loginWindow = button.up('window');
var loginForm = loginWindow.down('form-login');
console.log(loginForm.getValues());

目前我有一个使用的工作，var email = Ext.getCmp('emailField').getValue();但我想在将来正确引用该表格，以便我可以一次获得所有值。

无论我尝试什么，表单都返回为空，有什么想法吗？：/

更新：控制台日志。

var form = Ext.getCmp('loginForm');
console.log(form.getValues());

输出：TypeError：form.getValues 不是函数

var form = Ext.getCmp('loginForm');
console.log(form.getForm());

输出：TypeError：form.getForm 不是函数

console.log(form);

输出： http: //grab.by/yg6C

4

2 回答 2

1

不确定如何获得emailField未指定的 id 和 Ext 默认为自动分配的 id？你试过使用Ext.getCmp('loginForm');吗？

http://docs.sencha.com/extjs/5.0.0/apidocs/#!/api/Ext-method-getCmp

此外，我强烈建议使用参考http://docs.sencha.com/extjs/5.0.0/apidocs/#!/api/Ext.app.Controller-cfg-refs这将使您的表单更容易在您的控制器中。

于 2014-07-02T14:05:47.967 回答
1

首先摆脱代码中的任何“id”配置。第二：不要使用'-'作为文字连接符（'form-login'），使用 formLogin 或 FormLogin 或 formlogin 代替。见下文为什么。

有两种方法可以解决您的问题：

选项 1. 在您的登录窗口中触发自定义事件

将小部件配置设置添加到窗口，然后您可以删除 xtype 设置，因为您可以将小部件设置用作 xtype。

widget: 'LoginFormWindow'

将以下内容添加到控制器：

refs: [{
   ref: 'LoginFormWindow', // which is the widget
   selector: 'LoginFormWindow'
}...

this.control({
    // Login window
        'LoginFormWindow' : {
             submitform: this.loginAction
        }
    });

像这样处理窗口中的按钮：

 buttons: [{
      text:'Login',
      scope: this, // scope on window
      handler: function() {
         var form = this.down('form');
         this.fireEvent('submitform', form); // form is send with the event
      }
 }]

然后在你的控制器中：

 loginAction: function(form) {

     formData = form.getForm();

     ....


 }

但最好使用 form.submit() 而不是 Ajax，因为 form.submit 是 Ajax 表单调用的 ext 中的舒适方式。

选项 2：

窗口引用仍在控制器中，您可以在函数 loginAction 中执行以下操作：

 var window = this.getLoginFormWindow(); // this getter comes with the ref
 var form = window.down('form');
 ... etc ....

永远不要在你的程序中使用“id”。请改用“itemId”（itemId：“thisismyitemid”）。为什么？因为“id”在 DOM 中必须是唯一的（就像 HTML 中的“id”）。

使用“itemId”，您可以简单地使用：this.down('#thisismyitemid')。因此，“itemId”只需要在“this”实例中是唯一的。

于 2015-05-29T20:24:44.830 回答