0

次のレイアウトが必要です (右上のチャート数は動的です): 私の希望のレイアウト

メインコンテナのボーダーレイアウトをとってみました。Chart1でregion: 'west'あり、残りは にありregion: 'center'ます。

中央には vbox コンテナーがあり、2 つのコンテナーがあり、1 つはグラフ用 (上) で、もう 1 つはグリッド用 (下) です。

問題は、これらの 2 つのコンテナーが固定幅を必要とするか、幅がゼロになることです...

また、すべてのコンテナをfluidにしたいので、空のスペースを空けることなくすべてのサイズを変更できます。

flex: 1vbox 内の一部のコンテナーを100% widthにする場合の使用について読みましたが、これは機能しませんでした。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);
}
});

ただし、2 番目のコンテナーの 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 までのグラフを 1 つのコンテナーにラップできます。たとえば、chartPanelこれにはhboxレイアウトがあります。次に、ラップchartPanelしgridて別のコンテナに入れます -レイアウトpanel付き。次に、 with layoutでvbox再度ラップchart1します。次に、レイアウトごとに設定し、画面を均等に分割するための適切なフレックスを設定する必要があります。panelhboxalign: stretchbox

作業サンプル: http://jsfiddle.net/75T7h/

于 2012-11-23T11:34:56.357 に答える
-1

extjs のオプションを使用して for ループに chart2, 3, 4 , 5 をロードしていると思いますpanel.add(より良い方法)。その場合は、これらのパネルの数 (ここでは 4) を保持し、パネルごとに幅を割り当てながら、次のように指定します。

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

したがって、カウントが何であっても、トップ vbox 内のこれらすべての水平パネル間で使用可能な幅が分割され、割り当てられます。

あなたの例では、割り当てます

(1/4) * 200

(思考グリッドの幅は 200)

于 2012-11-23T11:21:46.787 に答える