如何在ExtJS4的vbox中設置動態寬度？

我想下面的佈局（圖表計數右上角是動態）： my desired layout 如何在ExtJS4的vbox中設置動態寬度？

我試圖採取一個邊界佈局的主要容器。 Chart1爲region: 'west'，其餘爲region: 'center'。

在中心，我得到了VBOX容器，2個容器，一個用於圖（頂部）和一個是所述電網（底部）

的問題是現在，這些2個容器要固定寬度，否則他們會得到一個零寬度...

另外，我想所有的容器是fluid，所以我可以調整大小沒有得到空的空間。

我讀了關於使用flex: 1如果我想在一個盒子中的一些容器得到一個100％寬度，但這並不奏效。它只是使vbox中的2個容器使用相同的高度。

任何想法？

來源

2012-11-23 K..

您是否嘗試過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佈局。然後，您必須爲每個box佈局設置align: stretch，並適當地將屏幕平均分割。

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

來源

2012-11-23 11:34:56 Krzysztof

這可以工作，但它有點難看，因爲在計算表格的列數之前，我必須等到我知道有多少圖表。我的想法是，我可以動態地添加和刪除圖表從2到X fly –

好的，在這種情況下最好使用hbox/vbox。看我的第二個例子。 – Krzysztof

-1

我想你正在使用panel.add extjs（更好的方法）選項在for循環中加載chart2，3，4，5。如果是這樣那麼把這些面板（此處4）的數量和每個小組同時指派你給喜歡

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

寬度所以，無論計數來時，你最VBOX內把所有這些水平板之間可用寬度和分配。

在你的榜樣其分配

（1/4）* 200

（思維電網有200寬度）

來源

2012-11-23 11:21:46 vajrakumar

請不要將** u **用於** you **或任何類型的此類快捷方式。這是針對Stackoverflow網絡禮儀。 – sra

如果我將它們添加到hbox容器中，併爲每個人使用'flex：1'，他們將得到正確的大小。我的問題在於他們進入的容器。它是一個hbox容器，它位於vbox容器內，所以當我使用'flex：1'時，它的寬度爲0：（ –

如何像這樣（在建築師快速繪製）：

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

雖然這種方式，第二容器的彎曲數值必須考慮到圖表的量你正在水平顯示。

來源

2012-11-23 14:24:01 JaVae

感謝：佈局：{ align：'stretch'， type：'hbox' } –

如何在ExtJS4的vbox中設置動態寬度？

回答

相關問題