Adding label fields using loop (ExtJs 2.3.0)

Question

I have a formpanel as follows-

var theForm = new Ext.form.FormPanel({
            layout: 'tableForm',
            border: false,
            itemId: 'theForm',
            layoutConfig: { columns: 5 },
            defaults: { border: false, layout: 'form' },
            items: [
                { xtype: 'label', text: 'Row 1' },
                { xtype: 'label', text: '' },
                { xtype: 'label', text: '' },
                { xtype: 'label', text: '' },
                { xtype: 'label', text: '' },

                { xtype: 'label', text: 'Row 2' },
                { xtype: 'label', text: '' },
                { xtype: 'label', text: '' },
                { xtype: 'label', text: '' },
                { xtype: 'label', text: '' },

                //.... And so on
            ]
})

This works well and adds rows to the panel. The empty label texts are generated on load. As you can see there can be 100s of rows with same layout(except col1) and I dont want to repeat this item layout 100 times.

Is there anything like adding controls by using loop or something. So that I dont have to repeat this. Is there any way so that I can add these 4 columns.

I tried using theForm.add({ xtype: 'label', text: '' }); but it is not working.

Answer 1

Well, what you have tried should work. I've never heard of a 'tableForm' layout though, maybe that's what breaks your form...

Here's an example that works (see this fiddle):

var form = new Ext.form.FormPanel({
    layout: 'table',
    border: false,
    layoutConfig: { columns: 5 },
    defaults: { border: false, layout: 'form' }
});

for (var i=0; i<100; i++) {
    form.add({xtype: 'label', text: '#' + i});
}

form.render(Ext.getBody());

For cleaner code, you could also encapsulate that code by overridding the initComponent method, that all Ext components inherit:

new Ext.form.FormPanel({
    renderTo: Ext.getBody(),
    layout: 'table',
    border: false,
    layoutConfig: { columns: 5 },
    defaults: { border: false, layout: 'form' },
    initComponent: function() {
        var items = [];
        for (var i=0; i<100; i++) {
            items.push({xtype: 'label', text: '#' + i});
        }
        this.items = items;

        // call overridden method
        Ext.form.FormPanel.prototype.initComponent.apply(this, arguments);

        // once initialized, you can add some more...
        this.add({xtype: 'label', text: 'last'});
    }
});