Extjs4 How To Display Field Multiple Times

I have an extjs form panel. Based on the value selected in the combo box, I need to display a fieldset multiple times. That is,display the field set once if value chosen is 1, twic

Solution 1:

You are using id:'scriptdetails' in fieldset. In web pages each component or element should have an unique id. If there are elements with same id then there will be problems in rendering the elements like single element is rendered with errors or element may not be rendered.

In your case as you have to repeat the field set, don't not use fixed id. Use a random generated id from server or use 'itemId' which ExtJS provides.

Refer: here and here

Update: Working fiddle is here

Ext.onReady(function() {

    var store = newExt.data.ArrayStore({
        id: 0,
        fields: [
            'myId',
            'displayText'
        ],
        data: [
            [1, '1'],
            [2, '2'],
            [3, '3'],
        ]
    });

    var scriptField = {
        xtype: 'fieldset',
        columnWidth: '0.5',
        title: 'Script Details',
        items: [{
            xtype: 'textfield',
            fieldLabel: 'Script Name',
            hiddenName: 'scriptName'
        }]
    };

    var container = newExt.Panel({
        layout: 'hbox',
        height: '700px',
        items: [{
            xtype: 'panel',
            id: 'parentContainer',
            height: '700px',
            layout: 'form',
            items: [{
                xtype: 'combo',
                editable: false,
                triggerAction: 'all',
                mode: 'local',
                store: store,
                valueField: 'myId',
                displayField: 'displayText',
                fieldLabel: 'Show Number of Items',
                listeners: {
                    select: function(combo, value) {
                        var dynamicPanel = Ext.getCmp("dynamicPanel");
                        dynamicPanel.removeAll(true);
                        for (var i = 0; i < combo.getValue(); i++) {
                            scriptField.title = "Script Details " + i;
                            dynamicPanel.add(scriptField);
                            dynamicPanel.doLayout();
                            dynamicPanel.ownerCt.doLayout();
                            dynamicPanel.ownerCt.ownerCt.doLayout();
                        }
                    }
                }
            }, {
                xtype: 'panel',
                id: 'dynamicPanel',
                items: []
            }]
        }]
    });

    container.render(Ext.getBody());

});

Solution 2:

Your buildItems code is executed once, at the beginning. Afterwards, you never really add any more items. Which you would want to do using this function: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.container.AbstractContainer-method-add

If you want to add an item, you have to create a new one. You can't add the same item into a container twice. So you would have to create them on the fly: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext-method-create

And for this, you should use some defined "blueprint", where you define that it is a fieldset, contains a textfield, and so on: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext-method-define

A blueprint of an item should never contain an id. I would refer to all the items by using form.items[i], and omit the id entirely.

You still have one problem, though: Your items all contain a textfield by the same name. This won't work well with submit(). But that's another story entirely.