ext3의 vbox 및 hbox

Question

컨테이너의 hbox 및 vbox 레이아웃을 extjs 중첩하여 사용하려는 구조입니다. 나는 주변 구성 요소와 함께 성공했지만 센터에서 컨테이너를 적절하게 늘릴 수는 없습니다. 내가 뭘 잘못 했니? 이 같은

내가 만드는 시도 용기, 내가 할 문제는 내가 전체로 내부 용기를 늘릴 수 없다

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의 크기.

빈 컨테이너와 폭 속성을 설정하지 않고이 작업을 수행 할 수 있습니까?

아니면 내 목표를 달성하기 위해 다른 전략을 사용해야합니까?

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

또한 첫 번째 컨테이너는 레이아웃이 : 당신이 당신의 레이아웃이 다음 사용하도록 필요성을 스트레칭하려면

Answer 1

는 vbox에 위의 할 필요가있다.

편집 : 나는 당신을 위해 바이올린을했습니다 : http://jsfiddle.net/Jgpgy/

내가 대신 컨테이너의 패널을 사용하면 시각적 인 결과를 가지고, 그래서 당신은 그냥 다시 컨테이너로 변경하고 제목 속성을 제거 할 수 있습니다.