How to get values of multiple textfields with same name in extjs2

Question

I am adding a textfield dynamically when i click add button, after that i need to get the values what i added dynamically while i click save button. its in extjs2.0 itself.

This is the code what i am working on

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

Why don't just give them a different name at the creation? Just keep a counter and add it at the end of the name — Ludovic Feltz, Oct 25 '16 at 12:44
Another solution would be to add them to an array so you can retrieve them later — Ludovic Feltz, Oct 25 '16 at 12:58
I posted an answer that show how to achieve the second solution — Ludovic Feltz, Oct 25 '16 at 13:03

score 3 · Answer 1 · answered Oct 28 '16 at 07:40

Here what I am trying to do is onclick of save I need to query each element of form and if element xtype is textfield then getting value each by each and displaying that.

Code for save button is :

{
    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());
    }
}

I created a fiddler for you which you can check here.

Fiddle

Note : I can not see fiddle work for ExtJs 2 so I did in ExtJS 4. For making work in extJS 2 you need to assign uniqe id to each textfield and then retrive the value I suppose. The above answer will work from ExtJS 4 and above. if you make a fiddle for ExtJS 2 and I will try further more.

@BhaskaraArani I did'nt understand how you want to hiding checkbox. — UDID, Oct 28 '16 at 08:33

Ludovic Feltz · Answer 2 · 2016-10-25T14:14:45.853

1

Just add them to an array every time you create one so you can retrieve them later in your save button handler :

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

edited Oct 25 '16 at 14:14

answered Oct 25 '16 at 13:01

Ludovic Feltz

11,416
4
47
63

let me check this solution too – Bhaskara Arani Oct 25 '16 at 13:11
Its not storing the values console.log(textFields[i].getValue()); here i am getting Object doesn't support property or method 'getValue' – Bhaskara Arani Oct 25 '16 at 13:21
@BhaskaraArani You are right, you should create the object first and not just his Json's definition. See my edited answer if it helps – Ludovic Feltz Oct 25 '16 at 14:15
Thanks @Ludovic you gave a new thought to workout, i tried in another way – Bhaskara Arani Oct 25 '16 at 16:49
@BhaskaraArani I hope you will find the solution :) – Ludovic Feltz Oct 25 '16 at 17:29

How to get values of multiple textfields with same name in extjs2

2 Answers2