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

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

맨 위의 전체 행에 걸쳐있는 머리글, 아래의 나머지 공간의 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;" 
     } 
    ] 
});

출처

2011-09-05 Carlos

http://blue-walrus.com/2014/09/layouts-in-extjs/ –

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

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

희망을.

출처

2011-09-05 06:47:01 netemp

@NetEmp 응답에 감사드립니다. 테두리 레이아웃을 알아 봤지만 헤더 및 접을 수있는 섹션없이 레이아웃을 만들 수 있습니까? 나는 사용자에게 보이지 않는 단순한 그리드를 원한다. 이해가 되니? – Carlos

센터 지역을 제외하고 모든 지역을 벗어날 수 있습니다. 그리고 이러한 영역을 원하지만 붕괴를 허용하지 않으려면 축소 가능을 지정할 수 있습니다 (정의 할 때 false). 실례 합니다만, "사용자에게는 보이지 않는 격자"를 얻을 수 없습니다. – netemp

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

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

시도해보고 알려주세요.

출처

2011-09-07 11:23:32 Armance

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

답변

관련 문제