使表适合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块。

我也可以sencha chat

获取

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

<强> Working Fiddle

尽管我解决了这个问题，但我仍然认为在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/