0

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

我试图为主容器采用边框布局。Chart1是region: 'west'，其余的在region: 'center'.

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

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

此外，我希望所有容器都是流动的，所以我可以调整所有内容的大小而不会出现空白。

flex: 1如果我希望 vbox 中的某些容器获得100% 宽度，我阅读了有关使用的信息，但这不起作用。它只是使 vbox 中的 2 个容器使用相同的高度。

有任何想法吗？

4

3 回答 3

2

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

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 值必须考虑到您水平显示的图表数量。

于 2012-11-23T14:24:01.883 回答
1

你试过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/

于 2012-11-23T11:34:56.357 回答
-1

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

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

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

在您的示例中，它分配

(1/4) * 200

（思维网格的宽度为200）

于 2012-11-23T11:21:46.787 回答