Ext JS 4 레이아웃 및 패널 구조

Question

Ext JS의 완전한 초보자라는 것을 인정하여 질문을 시작하도록 허락 해주십시오. HTML, CSS 및 JavaScript/JQuery에 익숙하므로 대부분 개별 구문으로 구문을 이해하지만 이러한 부분을 결합하는 데 문제가 있습니다.

맨 위의 전체 행에 걸쳐있는 머리글, 아래의 나머지 공간의 50 %를 차지하는 왼쪽의 열과 같은 크기의 오른쪽 열을 포함하는 기본 페이지 레이아웃을 작성하여 시작하고 싶습니다. 왼쪽.

궁극적으로 패널에 다양한 유형의 컨텐츠를 표시하고 싶지만 현재로서는 Ext JS 레이아웃과 뷰포트의 기본 구문과 구조를 이해해야합니다. 그것이 그대로, 나는 궁극적으로 혼란 스럽다. 다음은 몇 가지 코드에서 내 첫 번째 시도의 샘플이지만, 분명히 방법 오프 기지 :이를 위해

var panel = new Ext.Panel({ 
    fullscreen: true, 
    layout: { 
     type: "Panel", 
     align: "fit", 
    }, 
    items: [ 
     { 
      xtype: "panel", 
      id: "topHeader", 
      title: "Header", 
      style: "height:200px;" 
     }, 
     { 
      xtype: "panel", 
      id: "left", 
      title: "Left", 
      style: "width:500px;z-index:2;background-color:#ccc;position:absolute;left:0px;" 
     }, 
     { 
      xtype: "panel", 
      id: "right", 
      title: "Right", 
      style: "width:500px;z-index:2;background-color:#000;position:absolute;right:0px;" 
     } 
    ] 
}); 

Answer 1

, 당신이 '경계'레이아웃을 사용합니다. 테두리 레이아웃을 사용하면 다양한 영역의 구성 요소를 North, Center, Left, Right, South로 추가 할 수 있습니다.

는 현재 작업 예제를 얻을 수 있습니다 - http://docs.sencha.com/ext-js/4-0/#!/example (레이아웃 섹션 - 테두리 레이아웃)이 도움이

희망을.

Answer 2

나는이 같은 것을 의미한다고 생각합니까?

Ext.create('Ext.Viewport', { 
    layout: { 
     type: 'border', 
     padding: 5 
    }, 
    defaults: { 
     split: true 
    }, 
    items: [ 
     { 
      region: 'north', 
      collapsible: false, 
      border: false, 
      split: true, 
      height: 100, 
      html: 'north' 
     }, 
     { 
      region: 'west', 
      collapsible: false, 
      border: false, 
      split: true, 
      width: '50%', 
      html: 'west<br>I am floatable' 
     }, 
     { 
      region: 'center', 
      border: false, 
      html: ' I am center' 
     } 
    ] 
}); 

시도해보고 알려주세요.