extjs - テーブルをextjsの親コンテナに合わせます

Question

私のプロジェクトでは、作成したテーブルを親パネルに合わせようとしています。

パネル内

var items = [];

---

layout: {
    type: 'table',
    columns: 6
},
initComponent: function(){
    //creating child items dynamically
    for(var i=0;i<36;i++){
        items.push({
            xtype: 'panel',
            layout:'fit'
        })          
    }
    this.callParent();
}
items: items    

子アイテムはパネルに正常に追加されていますが、0寸法（幅と高さ）があります。子パネルに親パネルに収まるように寸法を計算させるにはどうすればよいですか？

PS：36手動で寸法を指定すると、ブロックが表示されます。

煎茶チャットでもご利用いただけます

Answer 1

レイアウト構成に追加tableAttrsして、親パネルの幅を100％にすることができます。

layout: {
    type: 'table',
    columns: 6,
    tableAttrs: {
        style: {
            width: '100%'
        }
    }
},

また、アイテムには、タイトルまたはhtmlを指定する必要があります。

items.push({
    xtype: 'container',
    html: i.toString(),
    layout:'fit'
})

結果xtype: 'container', html: i.toString()：： 結果xtype: 'panel', title: i.toString()：

Answer 2

（デフォルトであった）containersの代わりに子アイテムとして使用して問題を解決しました。panels私は以前tableAttrs、親パネル内のテーブルレイアウトを拡大していました（@ A1rPunによって提案されたように）。tdAttrsまた、コンテナに境界線を表示するために使用します。

var items = [];

---

layout: {
    type: 'table',
    columns: 6

    tableAttrs: {
        style: {
            width: '100%',
            height:'100%'
        }
    },
    tdAttrs: {
       style:{
           border:'1px groove #abc7ec'
       }
    }
},
initComponent: function(){
    for(var i=0;i<36;i++){
        items.push({
             xtype: 'container',
             style:{
                 height:'100%'
             }
        })          
    }
    this.callParent();
},
items: items

ワーキングフィドル

私はそれを解決しましたが、親パネルのテーブルを拡大するための組み込みメソッドがextjsにある可能性があると思います。

Answer 3

これを試してみるとどうなりますか？

...
items: [],

initComponent: function() {
    for(var i=0; i<36; i++) {
        this.add({
            xtype: 'panel',
            layout:'fit',
            items: []
        });          
    }
    this.callParent(arguments);
}

アップデート：

items: [],

initComponent: function() {
    this.callParent(arguments);
    for(var i=0; i<36; i++) {
        this.add({
            xtype: 'panel',
            layout:'fit',
            html: 'Content'
        });
    }
}

jsfiddle： http: //jsfiddle.net/8G5zV/