extjs - 如何从 Ext 表单中获取值

Question

实际上我有一个 ExtJs 脚本来创建带有下面窗口的表单。

var frmAccount = Ext.create('Ext.form.Panel',{
    bodyPadding: 5,
    frame  : true,
    items    :[
    {
        xtype       : 'textfield',
        fieldLabel  : 'Account Number',
        name        : 'accountNum'
    },{
        xtype       : 'textfield',
        fieldLabel  : 'Company',
        name        : 'company'
    },{
        xtype       : 'textfield',
        fieldLabel  : 'Office',
        name        : 'office'
    },{
        xtype       : 'textareafield',
        fieldLabel  : 'Address',
        name        : 'address',
        width       : 350
    },{
        xtype       : 'textfield',
        fieldLabel  : 'City',
        name        : 'city'
    },{
        xtype       : 'textfield',
        fieldLabel  : 'Country',
        name        : 'nation'
    }]
});

var winAddAccount = Ext.create('widget.window',{
    id     : 'addAccount',
    title  : 'Filter Record',
    width  : 400,
    height : 300,
    modal  : true,
    closeAction    : 'hide',
    items  : frmAccount,
    layout : 'fit',
    bodyPadding: 5,
    buttons:[
    {
        text    : 'Find',
        handler: function(){
            //console.log(form value);
        }
    },
    {
        text    : 'Cancel',
        handler: function(){
            winAddAccount.hide();
        }
    }
    ]
});

单击“查找”按钮后，我只想从表单中获取值。但是我不知道在单击“查找”按钮后从表单中获取值。希望我可以在处理程序上看到console.log脚本的值。请帮我解决或提出一个想法。谢谢。

Answer 1

试试这个

text    : 'Find',
handler: function(btn){
    var win = btn.up('window'),
        form = win.down('form');
    console.log(form.getForm().getValues());
}

此外，我建议您阅读 sencha 提供的教程并查看API，其中还包含大量示例

要仅获取特定字段的值（此示例假设该字段存在！）

text    : 'Find',
handler: function(btn){
    var win = btn.up('window'),
        form = win.down('form');
    console.log(form.getForm().findField('NamePropertyValue').getSubmitValue() /*or call getSubmitData() or just getValue()*/);
}

Answer 2

handler: function(button) {
  var form = button.up('form').getForm();
  console.log(form.getValues());
  // ...
}