如何在extjs2中获取多个同名文本字段的值

Question

当我点击add按钮时，我正在动态添加一个文本字段，之后我需要获得我在点击save按钮时动态添加的值。它在extjs2.0本身。

这是我正在编写的代码

​

var settingsEmailPanel = new Ext.FormPanel({
                                labelWidth: 75, // label settings here cascade unless overridden
                                url:'save-form.php',
                                frame:true,
                                id:'emailForm',
                                title: 'Email Servers',
                                bodyStyle:'padding:5px 5px 0',
                                width: 350,
                                defaults: {width: 230},
                                defaultType: 'checkbox',

                                items: [{
                                        boxLabel: 'Server 1',
                                        hideLabel: true,
                                        name: 'server1'
                                    },{
                                        boxLabel: 'Server 2',
                                        hideLabel: true,
                                        name: 'server2'
                                    },{
                                        boxLabel: 'Server 3',
                                        hideLabel: true,
                                        name: 'server3'
                                    }, {
                                        boxLabel: 'Server 4',
                                        hideLabel: true,
                                        name: 'server4'
                                    }
                                ],

                                buttons: [{
                                    text: 'Add',
                                    handler: function () {
                                    settingsEmailPanel.add({
                                            xtype: 'textfield',
                                            fieldLabel: 'New ServerName',
                                            name: 'newServer',
                                            allowBlank:false
                                        });
                                    settingsEmailPanel.doLayout();
                                    }
                                },{
                                    text: 'Save',
                                    handler: function () {
                                        alert("Save clicked");
                                        console.log(Ext.getCmp("emailForm").getForm().findField("newServer").getValue());
                                    }
                                }]
                            });

Answer 1

在这里，我尝试做的是单击保存，我需要查询表单的每个元素，如果元素xtype为textfield，则按每个元素获取值并显示该值。

保存按钮的代码为：

{
    text: 'Save',
    handler: function() {
        var settingsEmailPanel = this.up().up();
        var settingsEmailPanelItem = settingsEmailPanel.items.items;
        for (var i = 0; i < settingsEmailPanelItem.length; i++) {
            if (settingsEmailPanelItem[i].xtype == "textfield") {
                var Value = settingsEmailPanelItem[i].getValue();
                alert(Value)
            }
        }
        // alert("Save clicked");
        //console.log(Ext.getCmp("emailForm").getForm().findField("newServer").getValue());
    }
}

我为你创建了一个小提琴手，你可以在这里查看。

Fiddle

注意:我看不到ExtJs 2的小提琴工作，所以我在extjs4中看到了。为了在extjs2中工作，你需要给每个文本字段分配唯一的id，然后检索我认为的值。上面的答案适用于ExtJS 4和更高版本。如果你为ExtJS 2做了小提琴，我会尝试更多。

Answer 2

只需在每次创建数组时将其添加到数组中，以便稍后在保存按钮处理程序中检索它们：

var textFields = [];    
/*
 *  [...]
 */
buttons: [{
    text: 'Add',
    handler: function () {
        var textField = Ext.create('Ext.form.field.Text', {
            xtype: 'textfield',
            // ...
        });
        textFields.push(textFields);
        settingsEmailPanel.add(textField);
        settingsEmailPanel.doLayout();
    }
},{
    text: 'Save',
    handler: function () {
        for(var i=0; i<textFields.length; i++){
            console.log(textFields[i].getValue());
        }
    }
}]