Question

我有一个问题。可能这将是一个简单的解决方案。当我单击保存按钮???

时，如何获取文本字段的值

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!'); } },
    ]
});

Answer 1

您必须使用表单字段容器，例如 - 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]);
                    }
                } 
            }
        ]
});

Sencha Fiddle Example

Answer 2

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

handler: function(btn, eOpts){ 
     var form = btn.up('form');
     form.getForm().updateRecord();
     var record = form.getForm().getRecord();  
     alert('Saved!');
}

如果您没有使用模型，只是希望值将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!');
}

Answer 3

说真的，为什么选择up.up.down方法，如果你可以马上得到它？

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

或

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]);
                    }
                } 
            }
        ]
});

来自Form的ExtJs getValues（）

3 个答案: