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尺寸（宽度和高度）。如何让子面板计算尺寸以适应父面板？

36PS：如果我手动给出尺寸，我可以看到块。

我也可以在煎茶聊天

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/