将表格适合extjs中的父容器答案

【问题标题】：Fit the table to the parent container in extjs将表格适合extjs中的父容器
【发布时间】：2013-03-01 07:11:51
【问题描述】：

在我的项目中，我正在尝试使创建的表格适合父面板。

内部面板

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

【问题讨论】：

这行items: items之后的数组里的项目你推了吗？
@A1rPun 在此之前没有。在initComponent。添加子元素没有问题。问题是子元素没有自动获取宽度和高度，以便表格适合容器。
是的，我明白了，但是如果您在面板渲染后推送项目数组中的项目它不会重新计算布局。只是为了确保 ;)
@A1rPun 请检查我的编辑。我希望这会更清楚。如果我手动给出尺寸，我可以看到 36 块。所以，我认为布局没有问题。
为什么不在 initComponent() 中调用 сallParent(arguments)？

标签： extjs extjs4 extjs4.1 extjs-mvc

【解决方案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() 的结果：

【讨论】：

现在只有高度是0。我试过给height: 100%，但它弄乱了布局。
height: 100% 没有跨浏览器解决方案。您需要对表格或 items 数组中的各个项目的高度进行硬编码。
不，我强烈认为这个庞大的框架必须有一些方法来做到这一点。浏览文档但找不到它。无论如何，感谢您的帮助+1。希望您在某个角落有解决方案:)。
如果面板中没有任何内容，为什么还要使用面板？您需要某种内容来让浏览器计算表格内的 td。感谢您的 +1 ;)
甚至不需要将子容器明确提及为panel（默认情况下它们是panel，因为它们的父容器是panel）。我只是在这里提一下，以了解问题可能出在哪里。

【解决方案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 中可能有一些内置方法可以在父面板中拉伸表格。

【讨论】：

【解决方案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/

【讨论】：

这是我第一次看到这个问题时的想法，但 Mr_Green 已经解释过事实并非如此。
Uncaught TypeError: Object [object Array] has no method 'insert' 我收到此错误。
@Mr_Green 是的。需要在添加项目之前调用 callParent()。见jsfiddle.net/8G5zV
@Mr_Green 哇，不。这是一种风格：A1rPun 的 {width: '100 %'} :)
这很有趣，因为您的解决方案与我的相同。只是以不同的方式添加面板。