来自表单的ExtJs getValues（）

我有个问题。 也许这将是一个简单的解决办法。 单击“保存”按钮时，如何获取文本字段的值

Ext.define('MyApp.view.main.MyForm', {
    extend: 'Ext.Window',
    layout: 'column',
    .
    .
    .

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

    items: [{
        items: [
            { fieldLabel: 'FirstName', allowBlank: false },
            { fieldLabel: 'LastName', allowBlank: false },

        ]
    }, {
        items: [ 
            { fieldLabel: 'Street' },
            { fieldLabel: 'Town' },
        ]
    }],
    buttons: [
        { text: 'Save', handler: function(){ alert('Saved!'); } },
    ]
});

---

必须使用表单字段容器，例如-Ext.form.Panel

然后可以使用getForm（）和getValues（），还可以检查字段-isValid（）以检查allowBlank

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

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

        items: [{
            items: [
                { 
                        fieldLabel: 'FirstName', 
                        allowBlank: false 
                },
                { 
                         fieldLabel: 'LastName', 
                         allowBlank: false 
                },

            ]
            }, {
                items: [ 
                    { fieldLabel: 'Street' },
                    { fieldLabel: 'Town' },
                ]
            }]
        });

Ext.define('MyApp.view.main.MyForm', {
        ... 

        items: [
            formPanel
        ],

        buttons: [
            { 
                text: 'Save', 
                handler: function(btn) { 
                    var form = btn.up().up().down('[name="myfieldform"]').getForm(),
                        values;

                    if (!form || !form.isValid())
                    {
                        alert('Check your form please!'); 
                        return;
                    }

                    values = form.getValues();
                    for(var name in values) {
                            alert(values[name]);
                    }
                } 
            }
        ]
});

---

---

---

处理程序函数的签名中将包含按钮和事件选项。使用按钮和“Up”函数获取表单元素并检索附加到表单的记录模型（假设您使用的是模型）

如果您不使用模型，只希望这些值向表单中的每个字段添加一个itemId，然后再次使用带有“#”的up函数来检索特定组件。然后简单地使用getValue方法

items: [
    { fieldLabel: 'FirstName', itemId: 'firstnamefield', allowBlank: false },
    { fieldLabel: 'LastName', itemId: 'lastnamefield', allowBlank: false },

]

handler: function(btn, eOpts){ 
     var firstNameField = btn.up('#firstnamefield');
     var firstNameValue = firstNameField.getValue();
     alert('Saved!');
}

---

说真的，如果你能马上找到事情，为什么要用向上、向上、向下的方法

var form = Ext.ComponentQuery.query('[name="myfieldform"]').getForm()[0];

或

换言之，取上面的答案，如下所示：

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

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

        items: [{
            items: [
                { 
                        fieldLabel: 'FirstName', 
                        allowBlank: false 
                },
                { 
                         fieldLabel: 'LastName', 
                         allowBlank: false 
                },

            ]
            }, {
                items: [ 
                    { fieldLabel: 'Street' },
                    { fieldLabel: 'Town' },
                ]
            }]
        });

Ext.define('MyApp.view.main.MyForm', {
        ... 

        items: [
            formPanel
        ],

        buttons: [
            { 
                text: 'Save', 
                handler: function(btn) { 
                    var form = Ext.ComponentQuery.query('[name="myfieldform"]').getForm()[0];

                    if (!form || !form.isValid())
                    {
                        alert('Check your form please!'); 
                        return;
                    }

                    values = form.getValues();
                    for(var name in values) {
                            alert(values[name]);
                    }
                } 
            }
        ]
});

---

检查我如何使用它？这样不行！var form=btn.down（‘容器’）；var values=form.getForm（）.getFieldValues（）；

values = Ext.ComponentQuery.query('[name="myfieldform"]').getForm()[0].getValues();

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

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

        items: [{
            items: [
                { 
                        fieldLabel: 'FirstName', 
                        allowBlank: false 
                },
                { 
                         fieldLabel: 'LastName', 
                         allowBlank: false 
                },

            ]
            }, {
                items: [ 
                    { fieldLabel: 'Street' },
                    { fieldLabel: 'Town' },
                ]
            }]
        });

Ext.define('MyApp.view.main.MyForm', {
        ... 

        items: [
            formPanel
        ],

        buttons: [
            { 
                text: 'Save', 
                handler: function(btn) { 
                    var form = Ext.ComponentQuery.query('[name="myfieldform"]').getForm()[0];

                    if (!form || !form.isValid())
                    {
                        alert('Check your form please!'); 
                        return;
                    }

                    values = form.getValues();
                    for(var name in values) {
                            alert(values[name]);
                    }
                } 
            }
        ]
});