如何在ExtJS4中的vbox中设置动态宽度？

我需要以下布局（右上角的图表计数是动态的）：

我试着对主容器进行边界布局<代码>图表1是

地区：“西部”

，其余在

地区：“中部”

在中间，我得到了一个vbox容器，有两个容器，一个用于图表（顶部），一个用于网格（底部）

现在的问题是，这两个容器需要一个固定的宽度，否则它们的宽度为零

此外，我希望所有容器都是流体，这样我就可以调整所有容器的大小，而不必获得空的空间

我读过关于使用

flex:1

，如果我想让vbox中的一些容器获得100%宽度的话，但是这不起作用。它只是使vbox中的两个容器使用相同的高度

---

有什么想法吗？

我认为您正在使用

面板在for循环中加载图表2、3、4、5。添加extjs的
选项（更好的方法）。
如果是这样的话，那么请记录这些面板的数量（这里是4个），并为每个面板指定宽度

width:(1/countOfchrtLIst2345) * grid.getWidth(),

因此，无论出现什么计数，它都将在顶部vbox中的所有水平面板之间划分可用宽度并进行分配

在您的示例中，它指定

（1/4）*200

（思考网格的宽度为200）
您是否尝试过
表格
布局？用它创建这样的布局很容易。例如：

Ext.onReady(function(){

  Ext.create('Ext.Viewport', {
    renderTo: Ext.getBody(),
    style: 'border: 1px solid red',

    layout: {
        type: 'table',
        columns: 5,
      tdAttrs: {
        style: 'padding: 20px; border: 1px solid blue;'
      }
    },

    defaults: {
      bodyStyle: 'border: 1px solid red'
    },

    items: [
      { xtype: 'panel', html: 'Chart1', rowspan: 2 },
      { xtype: 'panel', html: 'Chart2' },
      { xtype: 'panel', html: 'Chart3' },
      { xtype: 'panel', html: 'Chart4' },
      { xtype: 'panel', html: 'Chart5' },
      { xtype: 'panel', html: 'Grid', colspan: 4 }
    ]

  });

});

工作样本：


要实现动态布局，最好的解决方案是使用
hbox
和
vbox
布局。
例如，您可以将从2到n的图表包装到一个容器中，比如说
chartPanel
——这将具有
hbox
布局。然后用
vbox
布局将
chartPanel
和
grid
包装到另一个容器中。然后再次使用
hbox
布局将
chart1
与
panel
包装在一起。然后，您必须为每个
框设置
align:stretch
，并设置适当的柔性以均匀划分屏幕

工作示例：
像这样的东西怎么样（在架构师中快速绘制）：

尽管如此，第二个容器的Flex值必须考虑到水平显示的图表数量。
请不要使用u或任何此类快捷方式。这与Stackoverflow网络模式背道而驰。如果我将它们添加到hbox容器中，并对每个人使用
flex:1
，它们将获得正确的大小。我这里的问题是他们进入的容器。它是一个hbox容器，位于vbox容器内，因此当我在其上使用
flex:1
时，它的宽度为0：（这可能行得通，但有点难看，因为我必须等到知道我有多少个图表后才能计算表的列数。我的想法是，我可以动态地将图表从2添加到X。好的，在这种情况下，最好使用hbox/vbox。参见我的第二个示例。感谢：布局：{align:'stretch'，键入：'hbox'}
Ext.define('MyApp.view.MyWindow', {
extend: 'Ext.window.Window',

height: 600,
width: 1000,
layout: {
    align: 'stretch',
    type: 'hbox'
},
title: 'My Window',

initComponent: function () {
    var me = this;

    Ext.applyIf(me, {
        items: [{
            xtype: 'container',
            flex: 1,
            layout: {
                type: 'fit'
            },
            items: [{
                xtype: 'chart'
            }]
        }, {
            xtype: 'container',
            flex: 4,
            layout: {
                align: 'stretch',
                type: 'vbox'
            },
            items: [{
                xtype: 'container',
                flex: 1,
                layout: {
                    align: 'stretch',
                    type: 'hbox'
                },
                items: [{
                    xtype: 'chart',
                    flex: 1,
                }, {
                    xtype: 'chart',
                    flex: 1,
                }, {
                    xtype: 'chart',
                    flex: 1,
                }, {
                    xtype: 'chart',
                    flex: 1,
                }]
            }, {
                xtype: 'gridpanel',
                flex: 1,
                title: 'My Grid Panel',
            }]
        }]
    });
    me.callParent(arguments);
}
});