将表适配到extjs中的父容器

在我的项目中，我试图将创建的表与父面板相匹配

内部面板

var items = [];

---

布局：{
键入：“表”，
栏目：6
},
initComponent:function（）{
//动态创建子项
对于（var i=0；i，您可以添加到布局配置中，使父面板的宽度为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（）的结果
：
如果您尝试以下方法：

...
items: [],

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

。。。
项目：[]，
initComponent:function（）{
对于（var i=0；i我使用
containers
作为子项而不是
panels
（默认设置）解决了这个问题。我使用
tablettrs
来拉伸父面板内的表布局（如@A1rPun所建议的）。还使用
tdAttrs
向容器显示边框

var items = [];


布局：{
键入：“表”，
栏目：6
表格属性：{
风格：{
宽度：“100%”，
高度：'100%'
}
},
TDATTR：{
风格：{
边框：'1px槽#abc7ec'
}
}
},
initComponent:function（）{
对于（var i=0；i是否将数组中的项推到此行之后
items:items
？@A1rPun no在此之前。在
initComponent
中。添加子元素没有问题。问题是子元素没有自动获取宽度和高度，以便表格适合容器。是的，我知道了，但如果推送项，in面板渲染后的项目数组不会重新计算布局。只是为了确保；）@A1rPun请检查我的编辑。我希望这会更清楚。如果我手动提供维度，我可以看到
36
块。因此，我认为布局没有问题。为什么不在initComponent（）中使用c allParent（参数）呢现在只有高度是
0
。我试着给出
高度：100%
，但这会弄乱布局。对于
高度：100%
，没有跨浏览器的解决方案。你需要硬编码表的高度或项数组中的单个项的高度。不，我强烈认为这个庞大的框架必须有某种方法来做到这一点hr通过文档，但找不到它。无论如何，感谢您的帮助+1。希望您能在脑海中找到解决方案：）。如果没有任何内容，为什么要使用面板？您需要一些内容让浏览器计算表内的td。感谢+1；）甚至不需要明确地将子容器称为
panel
（默认情况下它们是
panel
，因为它们的父容器是
panel
）。我在这里只是想知道问题出在哪里。这是我第一次看到这个问题时的想法，但格林先生已经解释了情况并非如此。
Uncaught TypeError:Object[Object Array]没有方法“insert”
我遇到了这个错误。@u Green先生是的。需要调用callParent（）在添加项目之前。请参阅@Mr_Green Wow，no。这是一种样式：{width:'100%}的A1rPun:）这很有趣，因为您的解决方案与我的相同..只是以不同的方式添加面板。
items: [],

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

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