Question

我想要以下布局（右上方的图表计数是动态）： my desired layout

我尝试为主容器采用边框布局。 Chart1为region: 'west'，其余为region: 'center'。

在中心，我有一个vbox容器，有2个容器，一个用于图表（顶部），一个是网格（底部）

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

此外，我希望所有容器都流畅，因此我可以调整所有内容，而不会获得空格。

如果我想让vbox中的某些容器获得 100％宽度，我会读到有关使用flex: 1的内容，但这不起作用。它只是使vbox中的2个容器使用相同的高度。

有什么想法吗？

Answer 1

这样的事情（在建筑师中快速绘制）：

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);
}
});

尽管如此，第二个容器的Flex值必须考虑您水平显示的图表数量。

Answer 2

您是否尝试过table布局？使用它创建这样的布局非常容易。例如：

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 }
    ]

  });

});

工作样本：http://jsbin.com/ojijax/1/

要拥有动态布局IMO，最佳解决方案是使用hbox和vbox布局。例如，您可以将图表从2到n包装到一个容器中，假设为chartPanel - 这将具有hbox布局。然后将chartPanel和grid包装到另一个容器中，panel布局为vbox。然后使用chart1布局panel再次打包hbox。然后，您必须为每个align: stretch布局设置box，并使用适当的flex来平均分割屏幕。

工作样本：http://jsfiddle.net/75T7h/

Answer 3

我认为你正在使用extjs的panel.add选项在for循环中加载chart2,3,4,5（更好的方法）。如果是这样，那么保持这些面板的计数（这里是4）和每个面板，同时指定宽度，如

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

无论计数如何，它都会在顶部vbox中的所有这些水平面板之间划分可用宽度并分配。

在你的例子中，它指定了

（1/4）* 200

（思维网格的宽度为200）

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

3 个答案: