使用循環添加標簽字段（ExtJs 2.3.0）

Question

我有一個如下的面板-

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

這樣效果很好，並向面板添加了行。 空標簽文本在加載時生成。 如您所見，可能有100個具有相同布局的行（col1除外），我不想將此項目布局重復100次。

是否有類似通過使用循環等添加控件的方法。 這樣我就不必重復這個。 有什么辦法可以添加這4列。

我嘗試使用theForm.add({ xtype: 'label', text: '' }); 但它不起作用。

Answer 1

好吧，您嘗試過的應該可以。 我從來沒有聽說過'tableForm'布局，也許這就是破壞表格的原因...

這是一個有效的示例（請參閱此小提琴 ）：

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

對於更干凈的代碼，您還可以通過覆蓋所有Ext組件都繼承的initComponent方法來封裝該代碼：

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