Question

我有一个formpanel如下 -

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

嗯，你尝试过的应该有效。我从来没有听说过一个表格形式＆＃39;虽然布局可能会破坏你的形式...

以下是一个有效的示例（请参阅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());

对于更干净的代码，您还可以通过覆盖所有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'});
    }
});

使用循环添加标签字段（ExtJs 2.3.0）

1 个答案: