JavaScript无法在ExtJS 5中获得对表单的引用

JavaScript unable to get reference to form in ExtJS 5

本文关键字：表单 引用 ExtJS JavaScript      更新时间：2023-09-26

我有一个登录表单，我使用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();的工作，但我想在将来适当地引用表单，这样我就可以得到所有的值。

无论我尝试什么形式返回为空，有什么想法吗?:/

Update:控制台日志。

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

不确定您如何获得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，这将使您的表单更容易在您的控制器

首先去掉代码中的任何'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
      }
 }]

then in your controller:

 loginAction: function(form) {
     formData = form.getForm();
     ....

 }

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

选项2:

如果窗口ref仍然在控制器中，您可以在函数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'实例中是唯一的。

相关文章：