의 ExtJS 4 구성 요소 레이아웃

Question

내가 최고의 ExtJS에이 같은 레이아웃을 달성하는 방법이 될 것입니다 무슨 궁금

: 나는 각각의 상자에 배치 할 내가 좋아하는 것 4 개 가지 구성 요소가

하지만, 내가 어떻게 할 수 있는지 정확히 알아내는 데 어려움을 겪고있다.

다음

Ext.define('/../../../chefCreateAndPinRolesLayoutContainer', { 
    extend: 'Ext.container.Container', 

    height: '100%', 
    width: '100%', 
    layout: { 
     type: 'hbox', 
     align: 'stretch' 
    }, 
    items: [{ 
      flex: 1, 
      items: [ 
       Ext.create('/../../../chefRequiredCookbooksGridPanel'), 
       Ext.create('/../../../chefRoleSetupFormPanel') 
      ] 
    }, { 
      flex: 1, 
      items: [ 
       Ext.create('/../../../chefOptionalCookbooksGridPanel'), 
       Ext.create('/../../../chefAttributeGridContainer') 
      ] 
    }] 
}); 

내 현재의 레이아웃에 나오는 것입니다 : 여기

내가 작업 한 일부 코드의 조각입니다

나는에 대한 싶습니다

탭 패널 전체를 채우고 단면 당 폭과 높이가 동일해야합니다.

아이디어가 있으십니까?

감사

Answer 1

당신은 내부 컨테이너 항목 (A는, B, C, D)가 사용자 정의 항목으로 대체 할 수있는 아래의 코드 조각을 시도 할 수 있습니다.

Ext.application({ 
    name : 'Fiddle', 

    launch : function() { 
     Ext.create('Ext.container.Viewport', { 
      layout: 'fit', 
      items: [{ 
       xtype: 'container', 
       layout: { 
        type: 'hbox', 
        align: 'stretch' 
       }, 
       items: [{ 
        xtype: 'container', 
        flex: 1, 
        layout: { 
         type: 'vbox', 
         align: 'stretch' 
        }, 
        border: 1, 
        items: [ 
         { 
          xtype: 'container', 
          html: 'Cell A content', 
          flex: 1 
         },{ 
          xtype: 'container', 
          html: 'Cell B content', 
          flex: 1 
         } 
        ] 
       }, { 
         xtype: 'container', 
         flex: 1, 
         layout: { 
          type: 'vbox', 
          align: 'stretch' 
         }, 
         items: [ 
         { 
          xtype: 'container', 
          html: 'Cell C content', 
          flex: 1 
         },{ 
          xtype: 'container', 
          html: 'Cell D content', 
          flex: 1 
         } 
         ] 
       }] 
      }] 
     }); 
    } 
});