使用循环添加标签字段 (ExtJs 2.3.0)

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

嗯，你试过的应该有用。不过，我从未听说过 '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());

为了更简洁的代码，您还可以通过覆盖所有 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)

Adding label fields using loop (ExtJs 2.3.0)

javascript

loops

extjs

panel

formpanel