javascript - Extjs:如何获取表单的值

Question

我是 Extjs 的新手，我正在尝试创建一个只有一个字段的简单登录表单，但我无法获取该字段的值。

具体来说，我从 Main.js 调用我的登录面板:

Ext.define('appTrial.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',

requires: [
    'Ext.TitleBar',
    'Ext.Video',
    'appTrial.view.Login',
],

controllers: [
              'AssociaAttivitaController'
          ],

config: {
    tabBarPosition: 'bottom',

    items: [
        {
            title: 'Welcome',
            iconCls: 'home',

            styleHtmlContent: true,
            scrollable: true,

            items: [{
                docked: 'top',
                xtype: 'titlebar',
                title: 'Welcome to My New App!!!',
            },{
                xtype: 'container',
                name: 'mainContainer',
                layout: {
                    type: 'hbox',
                    align: 'center',
                    pack: 'center'
                },

                items: [{
                    xtype: 'Login',
                    title:'Login',     //call Login here
                    margin: '80 0 0 0'
                },
              ]
            }
            ]
        },     
        {
            title: 'Get Started',
            iconCls: 'action',

            items: [
                {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Getting Started'
                },
                /*{
                    xtype: 'video',
                    url: 'xxx'
                }*/
            ]
        }]
}
});

当我像这样创建 Login.js 时，我可以看到面板，但它没有获取值:

Ext.define('appTrial.view.Login', {
extend: 'Ext.form.FormPanel',
xtype: 'login',
alias: 'widget.Login',
config: {
        title: 'Login',
        width: 200,
        height: 200,

        items: [{
            xtype: 'container',
            name: 'loginContainer',
            layout: {
                type: 'vbox',
                align: 'center',
                pack: 'center',
            },

            items: [{
                    layout: {
                        pack: 'center'
                    },
                    html :'Associa attivita'
                },            
                {
                    xtype: 'fieldset',                
                    items: [{
                        xtype: 'textfield',
                        name: 'codAttivita',
                    }]
                },
                {
                     xtype: 'toolbar',
                     layout: {
                         pack: 'center'
                     }, // layout
                     ui: 'plain',
                     items:[{
                         xtype: 'button',
                         text: 'Associa',
                         ui: 'confirm',
                         action: 'login',   
                     },{
                         xtype: 'button',
                         text: 'Reset',
                         ui: 'decline',
                         handler: function (btn, evt) {
                             var cod = codAttivita.getValue(); //here, the cod is null

                             Ext.Msg.confirm('', 'Are you sure you want to reset this form?',   function (btn) {
                                 if (btn === 'yes') {
                                     form.setValues({
                                         codAttivita: ''
                                     });

                                 } 
                             }); 
                         }
                  }]
          }],
     }]
},
});

阅读其他主题，我明白我必须将表单分配给变量；我做到了，但是使用以下 Login.js 我根本看不到面板:

var formPanel = Ext.create('Ext.form.Panel', {
name: 'loginForm',

/*  defaults:{
    layout: 'form',
    xtype: 'container',
    //defaultType: 'textfield',
    labelWidth: 150,
    width: 300
},*/

items:[{
    xtype: 'container',
    name: 'loginContainer',
    layout: {
        type: 'vbox',
        align: 'center',
        pack: 'center',
    },  
    items: [{
        layout: {
            pack: 'center'
        },
        html :'Associa attivita'
    },            
    {
        xtype: 'fieldset',                
        items: [{
            xtype: 'textfield',
            name: 'codAttivita',
            id: 'codAttivita',
            allowBlank: false
        }]
    }]
}]  
});


Ext.define('appTrial.view.Login', {
extend: 'Ext.form.FormPanel',
xtype: 'login',
alias: 'widget.Login',
config: {
        title: 'Login',
        width: 200,
        height: 200,

        items: [{
            xtype: 'container',
            name: 'loginContainer',
            layout: {
                type: 'vbox',
                align: 'center',
                pack: 'center',
            },

            items: [
                    formPanel
            ],

            buttons: [{
                text:'Associa',
                ui: 'confirm',
                action: 'login',
            },{
                text: 'Reset',
                ui: 'decline',

                handler: function (btn, evt) {
                    var form = formPanel.getForm();
                    var cod = form.findField('codAttivita');

                    Ext.Msg.confirm('', 'Are you sure you want to reset this form?', function    (btn) {
                        if (btn === 'yes') {
                         form.setValues({
                             codAttivita: ''
                         });

                        } 
                    }); 
                }
              }]            
     }]
},
});

有人知道吗？

提前致谢

Answer 1

正如您所知，按照惯例，别名都是小写的(请参阅: http://www.sencha.com/blog/top-10-ext-js-development-practices-to-avoid ，要点 #8)。

您可以在配置中为登录表单分配一个 ID。

{
  xtype: 'login',
  id: 'login-form',
  title:'Login',     //call Login here
  margin: '80 0 0 0'
}

然后您可以通过 id 查询表单以获取值:

Ext.getCmp('login-form').getValues();

如果不给表单id，也可以通过xtype查询组件:

Ext.ComponentQuery.query('login')[0].getValues();