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

これはうまく機能し、パネルに行を追加します。読み込み時に空のラベル テキストが生成されます。ご覧のとおり、同じレイアウト (col1 を除く) の行が数百ある可能性があり、このアイテムのレイアウトを 100 回繰り返したくありません。

ループなどを使用してコントロールを追加するようなものはありますか。これを繰り返さなくてもいいように。これらの 4 つの列を追加する方法はありますか。

使ってみtheForm.add({ xtype: 'label', text: '' }); ましたがうまくいきません。

4

1 に答える 1

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

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 に答える