0

我有一个表格如下 -

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: '' }); 但它不起作用。

4

1 回答 1

1

好吧，您尝试过的应该可以。不过，我从未听说过“tableForm”布局，也许这就是破坏您的表单的原因...

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

对于更简洁的代码，您还可以通过覆盖initComponent所有 Ext 组件继承的方法来封装该代码：

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'});
    }
});
于 2015-09-14T18:10:08.480 回答