Extjs 연구 노트 7 Layout_extjs

Extjs 레이아웃 브라우저 .

Extjs3.1.0 버전은 17가지 유형을 지원합니다. 중요한 몇 가지 유형을 선택하여 간략하게 설명하겠습니다. 위의 링크로 이동하면 더 이상 사진을 게시하지 않겠습니다. Panel의 Layout을 설정하는 방법은 Panel의 Layout 구성 항목을 설정하는 방법과 동일합니다.
1. AbsoluteLayout
은 Panel 내부 구성 요소의 위치를 ​​결정하여 레이아웃을 구성할 수 있습니다. x,y로 지정됩니다.

사용 예:

코드 복사 코드는 다음과 같습니다.

new Ext. Panel({
layout: 'absolute',
title: 'AbsuluteLayout',
renderTo: document.body,
frame: true,
defaultType: 'textfield',
너비: 400,
높이:250,
항목: [{
x: 0, y: 5,
xtype: 'label',
text: '보내기:'
},
{
x: 60, y: 0,
name: 'to'
}, {
x: 0, y: 35,
xtype: 'label' ,
text: '제목:'
}, {
x: 60, y: 30,
name: 'subject'
},
{
x: 0 , y: 60,
xtype: 'textarea',
name: 'msg'
}]
})

2. AccordionLayout
Accordion은 이름에서 알 수 있듯이 일부 구성 요소는 열려 있고 일부는 닫혀 있는 아코디언과 같습니다. 이 효과는 사이드바로 사용하면 더 유용합니다.

사용 예:

코드 복사 코드는 다음과 같습니다.

new Ext. Panel({
title: 'Accordion Layout',
layout: 'accordion',
renderTo: document.body,
defaults: { // 포함된 각 패널에 적용
bodyStyle: ' padding:15px'
},
layoutConfig: {
// 레이아웃별 구성은 여기로 이동하세요

titleCollapse: true,
animate: true,
activeOnTop : false
},
items: [{
title: '패널 1',
html: '

패널 콘텐츠!

}, {
title : '패널 2',
html: '

패널 콘텐츠!

'
}, {
title: '패널 3',
html: '

'
}]
})


3. AnchorLayout
이런 종류의 레이아웃은 특히 GridView와 같은 컨트롤이 포함된 페이지를 레이아웃할 때 Winform 양식의 기본 레이아웃 방법과 유사하지만 특정 구성 요소와 페이지 테두리(오른쪽 테두리와 아래쪽 테두리) 사이의 거리(절대 픽셀 또는 상대 비율)만 수정합니다. 앵커 속성 설정을 통해 앵커 속성 설정 API 문서에서 이를 매우 명확하게 설명하고 있으므로 직접 발췌합니다:

anchor: String

이 구성 옵션은 a의 하위 항목에 적용됩니다. 이 레이아웃에 의해 관리되는 컨테이너(예: 레이아웃:'앵커'로 구성됨)

이 값은 항목이 컨테이너에 고정되어야 하는 방식을 레이아웃에 알려주는 것입니다. AnchorLayout에 추가된 항목은 앵커링 관련 구성을 허용합니다. 수평 앵커 값과 수직 앵커 값(예: '100% 50%')이라는 두 가지 값을 포함하는 문자열인 앵커 속성이 지원됩니다.

Percentage : 1에서 100 사이의 값으로, 백분율로 표시됩니다.
첫 번째 앵커는 컨테이너 내에서 항목이 차지하는 너비의 백분율이고, 두 번째 앵커는 높이의 백분율입니다. // 두 개의 값이 지정됨
anchor: '100% 50%' // 컨테이너의 전체 너비와 항목 렌더링
// 컨테이너의 1/2 높이
// 한 개의 값이 지정됨
anchor: ' 100%' // 너비 값, 높이는 autoOffsets로 기본 설정됩니다. 양수 또는 음수 정수 값
이것은 첫 번째 앵커가 컨테이너 오른쪽 가장자리로부터의 오프셋인 원시 조정입니다. 두 번째는 하단 가장자리로부터의 오프셋입니다. 예:

// 지정된 두 값
anchor: '-50 -100' // 컨테이너의 전체 너비로 항목을 렌더링합니다.
// 마이너스 50픽셀 및
// 전체 높이에서 100픽셀을 뺀 값.
// 하나의 값이 지정됨
anchor: '-50' // 앵커 값은 오른쪽 오프셋 값으로 간주됩니다.
// 하단 오프셋은 기본적으로 0Sides로 설정됩니다. 유효한 값은 'right'(또는 'r') 및 'bottom'(또는 'b')입니다.
컨테이너는 고정 크기이거나 앵커 크기 구성을 가져야 합니다.

혼합:
앵커 값은 필요에 따라 혼합될 수도 있습니다. 예를 들어 컨테이너 오른쪽 가장자리에서 너비 오프셋을 렌더링할 수도 있습니다. 50픽셀과 컨테이너 높이의 75%를 사용합니다:

anchor: '-50 75%' 그러나 앵커의 첫 번째 속성인 Offset을 양수로 설정하면 아무런 효과가 없는 것 같습니다. 문서에 오프셋: 양수 또는 음수 값이 나와 있습니다.
사용 예:

코드 복사 코드는 다음과 같습니다. 다음: new Ext.Panel({

layout: 'anchor',

title:'anchor',
renderTo: document.body,
items: [ {
title: '항목 1',
html: ' 내용 1',
width: 800,
anchor: '오른쪽 20%'
}, {
title: ' 항목 2',
html: '콘텐츠 2',
width: 300,
anchor: '50% 30%'
}, {
title: '항목 3',
html: '콘텐츠 3',
너비: 600,
anchor:'-100 50%'
}]
})



4 . BorderLayout

BorderLayout은 페이지에 영역을 지정하여 영역을 배치하며 중앙 영역이 하나 이상 있어야 하며 서쪽, 남쪽, 동쪽, 북쪽 영역을 보조 페이지로 설정할 수 있습니다. 일반적으로 큰 페이지의 레이아웃에 적합합니다. 중앙은 주요 기능 영역이며 양면과 하단은 도구 모음으로 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다. var myBorderPanel = new Ext.Panel({

renderTo: document.body,

너비: 700,
높이: 500,
제목: '테두리 레이아웃',
레이아웃: '테두리',
항목: [{
title: '남부 지역 크기 조정 가능',
region: 'south', // 지역 위치
height: 100,
split: true, // 크기 조정 활성화
minSize: 75, // 기본값은 50입니다.
maxSize: 150,
margins: '0 5 5 5'
}, {
// xtype: 'panel'은 기본적으로 암시됩니다.
title: 'West Region is collapsible' ,
region: 'west',
margins: '5 0 0 5',
width: 200,
collapsible: true, // 축소 가능
cmargins: '5 5 0 5 ', // 축소 시 상단 여백 조정
id: 'west-region-container',
layout: 'fit',
unstyled: true
}, {
title : 'Center Region',
region: 'center', // 중앙 영역은 필수, 너비/높이는 지정되지 않음
xtype: 'container',
layout: 'fit',
margins: '5 5 0 0'
}]
})


5. ColumnLayout
ColumnLayout은 패널 너비를 지정할 수 있으며, 너비는 픽셀을 지정하고, 열 너비는 0-1 사이의 숫자여야 합니다. 둘 다 사용할 수도 있습니다. 둘 다 사용하는 경우 백분율은 전체 페이지 너비에서 고정 너비 열의 나머지 너비를 뺀 값입니다.

사용 예:

코드 복사 코드는 다음과 같습니다.

var p = new Ext.Panel({
title: 'Column Layout - Mixed',
layout: 'column',
renderTo: document.body,
items: [{
title : '열 1',
columnWidth: .3,
html:'

Hello World

'
}, {
title: '열 2',
html:'

Hello

',
columnWidth: .6
}, {
title: 'Column 3',
columnWidth: .1,
html: 'Hello

Another Line

'
}]
})

이 사용법은 API 문서와 동일합니다. 및 공식 예가 있지만 이러한 열의 너비는 브라우저 크기가 변경됨에 따라 변경될 수 없습니다. 새 브라우저 너비에 맞게 매번 새로 고쳐야 합니다. 그러나 공식 웹사이트의 예에서는 실제로 브라우저를 드래그함에 따라 내부 패널의 크기가 변경될 수 있습니다. 매우 이상합니다. 아시는 분 계시면 가르쳐 주세요.

레이아웃 사용법은 비슷해서 더 이상 쓰지 않겠습니다. 핵심은 실제 적용에서 유연하게 선택하는 것입니다.