extjs中的vbox和hbox

Question

我想在extjs中使用此結構爲容器嵌套hbox和vbox佈局。我成功地使用了配件，但我無法正確拉伸中心的容器。我做錯了什麼？

以下是圖像：像這樣

我試圖創建容器，爲中心電網

var innerContainer = Ext.create('Ext.container.Container', { 

    layout:vbox, 

    items:[{ 
     xtype:'container', 
     flex:1, 
     layout: 'hbox', 
     items:[{ 
      xtype:'container', 
      flex:1 
     },{ 
      xtype:'container', 
      flex:1 
     }] 
    },{ 
     xtype:'container', 
     flex:1, 
     layout: 'hbox', 
     items:[{ 
      xtype:'container', 
      flex:1 
     },{ 
      xtype:'container', 
      flex:1 
     }] 
    },{ 
     xtype:'container', 
     flex:1, 
     layout: 'hbox', 
     items:[{ 
      xtype:'container', 
      flex:1 
     },{ 
      xtype:'container', 
      flex:1 
     }] 
    },{ 
     xtype:'container', 
     flex:1, 
     layout: 'hbox', 
     items:[{ 
      xtype:'container', 
      flex:1 
     },{ 
      xtype:'container', 
      flex:1 
     }] 
    }] 
}); 

我得到的問題是我不能伸展內部容器全innerContainer的大小。

我可以用空容器和沒有設置寬度屬性來實現這個嗎？

或者我應該用不同的策略來實現我的目標？

Answer 1

如果你希望你的佈局，以伸展你需要使用以下命令：

layout: { 
    type: 'vbox', 
    align: 'stretch' 
} 

而且你的第一個容器有一個佈局：VBOX需要在上面。

編輯：我做了一個搗鼓你： http://jsfiddle.net/Jgpgy/

我使用的面板，而不是容器，所以你有一個視覺效果，你可以更改回容器中，去掉標題屬性。