Extjs의 레이아웃 - 학습(예)
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
width:400,
height:200,
layout:"column",
items:[{columnWidth:.5,
title:" 1"},
{columnWidth:.5,
title:" 2"}]
});
});위의 코드에서 우리는 패널 패널을 만들었습니다. 패널은 용기 구성 요소입니다. 이 패널은 Column 레이아웃을 사용하도록 layout을 사용합니다.이 패널의 하위 요소는 두 개의 패널입니다. 이 두 패널은 열 레이아웃과 관련된 설정 매개 변수 속성인columnWidth를 포함하고 있습니다. 그들의 값은 0.5입니다. 즉, 모든 패널이 절반의 폭을 차지합니다.위의 프로그램을 실행하여 다음 그림과 같은 결과를 생성합니다.
ext의 일부 용기 구성 요소는 이미 사용된 레이아웃을 지정했다. 예를 들어 TabPanel은 카드 레이아웃을 사용하고,FormPanel은form 레이아웃을 사용하고,GridPanel의 표는column 레이아웃을 사용한다. 우리는 이 구성 요소를 사용할 때 이 용기 구성 요소에 다른 레이아웃을 지정할 수 없다.ExtJS2.0은 모두 10가지 레이아웃을 포함하고 자주 사용하는 레이아웃은border,column,fit,form,card,tabel 등 레이아웃이 있습니다. 다음은 이 몇 가지 레이아웃에 대해 간단하게 소개합니다.
Border 영역 레이아웃
Border 레이아웃은 클래스 Ext.layout입니다.BorderLayout 정의, 레이아웃 이름은 border입니다.이 레이아웃은 용기를 동남서북의 다섯 구역으로 나누어 각각 east,south,west,north,cente로 표시한다. 용기에 하위 요소를 추가할 때 우리는 이 하위 요소가 있는 위치만 지정하면 Border 레이아웃은 자동으로 하위 요소를 레이아웃이 지정한 위치에 놓는다.다음 코드를 참조하십시오.
Ext.onReady(function(){
new Ext.Viewport({
layout:"border",
items:[{region:"north",
height:50,
title:" "},
{region:"south",
height:50,
title:" "},
{region:"center",
title:" "},
{region:"west",
width:100,
title:" "},
{region:"east",
width:100,
title:" "}
]
});
});위의 코드를 실행하면 다음 그림과 같이 상하좌우 다섯 영역이 포함된 패널이 페이지에 출력됩니다.
열 레이아웃은 Ext.layout입니다.ColumnLayout 클래스 정의, 이름은 column입니다.열 레이아웃은 전체 용기 구성 요소를 하나의 열로 보고 그 안에 하위 요소를 넣을 때, 하위 요소에서columnWidth나width를 사용하여 하위 요소가 차지하는 열의 폭을 지정할 수 있습니다.columnWidth는 백분율의 형식으로 열의 폭을 지정하고,width는 절대 화소 방식으로 열의 폭을 지정하여 실제 응용에서 두 가지 방식을 혼합하여 사용할 수 있다.다음 코드를 참조하십시오.
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:" ",
layout:"column",
width:500,
height:100,
items:[{title:" 1",width:100},
{title:" 2",width:200},
{title:" 3",width:100},
{title:" 4"}
]
}
);
});위의 코드는 용기 구성 요소에 네 개의 요소를 넣고 용기 구성 요소에 4열을 형성하며 열의 너비는 각각 100200100과 나머지 너비이며 실행 결과는 아래 그림과 같다.
또한 columnWidth를 사용하여 하위 요소가 차지하는 열의 폭을 정의할 수 있습니다. 다음 코드를 보십시오.
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:" ",
layout:"column",
width:500,
height:100,
items:[{title:" 1",columnWidth:.2},
{title:" 2",columnWidth:.3},
{title:" 3",columnWidth:.3},
{title:" 4",columnWidth:.2}
]
}
);
});columnWidth의 합계는 1이어야 하며, 실행 코드는 다음 그림과 같은 내용을 생성합니다.
실제 응용 프로그램에서도 혼합하여 사용할 수 있습니다. 아래의 코드를 보십시오.
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:" ",
layout:"column",
width:500,
height:100,
items:[{title:" 1",width:200},
{title:" 2",columnWidth:.3},
{title:" 3",columnWidth:.3},
{title:" 4",columnWidth:.4}
]
}
);
});위의 코드를 실행하면 다음 그림과 같은 결과가 생성됩니다.
배치 맞추기
열 레이아웃은 Ext.layout입니다.ColumnLayout 클래스 정의, 이름은 column입니다.열 레이아웃은 전체 용기 구성 요소를 하나의 열로 보고 그 안에 하위 요소를 넣을 때, 하위 요소에서columnWidth나width를 사용하여 하위 요소가 차지하는 열의 폭을 지정할 수 있습니다.columnWidth는 백분율의 형식으로 열의 폭을 지정하고,width는 절대 화소 방식으로 열의 폭을 지정하여 실제 응용에서 두 가지 방식을 혼합하여 사용할 수 있다.다음 코드를 참조하십시오.
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:" ",
layout:"column",
width:500,
height:100,
items:[{title:" 1",width:100},
{title:" 2",width:200},
{title:" 3",width:100},
{title:" 4"}
]
}
);
});위의 코드는 용기 구성 요소에 네 개의 요소를 넣고 용기 구성 요소에 4열을 형성하며 열의 너비는 각각 100200100과 나머지 너비이며 실행 결과는 아래 그림과 같다.
Fit 레이아웃을 사용한 코드를 보면 다음과 같습니다.
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:" ",
layout:"fit",
width:500,
height:100,
items:[{title:" ",html:" "}
]
}
);
});위의 코드는 부모 용기가 Fit 레이아웃을 사용하도록 지정하기 때문에 자식이 자동으로 전체 부모 용기를 채웁니다.내보낸 도면은 다음과 같습니다.
컨테이너 구성 요소에 하위 요소가 여러 개 있는 경우 다음 코드와 같은 요소만 표시됩니다.
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:" ",
layout:"fit",
width:500,
height:100,
items:[{title:" 1",html:" 1 "},
{title:" 2",html:" 2 "}
]
}
);
});결과는 다음과 같습니다.
레이아웃 Fit을 사용하지 않는 경우 코드는 다음과 같습니다.
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:" ",
width:500,
height:120,
items:[{title:" 1",html:" 1 "},
{title:" 2",html:" 2 "}
]
}
);
});출력 결과는 다음 그림과 같습니다.
Form 레이아웃
Form 레이아웃은 클래스 Ext.layout을 사용합니다.FormLayout은 폼이라는 이름으로 폼에 입력된 필드를 관리하는 레이아웃입니다. 이 레이아웃은 프로그램에서 폼 필드나 폼 요소를 만드는 데 주로 사용됩니다.다음 코드를 참조하십시오.
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:" ",
width:300,
layout:"form",
hideLabels:false,
labelAlign:"right",
height:120,
defaultType: 'textfield',
items:[
{fieldLabel:" ",name:"name"},
{fieldLabel:" ",name:"address"},
{fieldLabel:" ",name:"tel"}
]
}
);
});위의 코드는 패널을 만들었습니다. 패널은 Form 레이아웃을 사용합니다. 패널에는 세 개의 하위 요소가 포함되어 있습니다. 이 하위 요소는 모두 텍스트 상자 필드입니다. 부모 용기에서hideLabels,labelAlign 등 설정 속성을 통해 라벨을 숨길지, 라벨 정렬 방식 등을 정의합니다.위 코드의 출력 결과는 다음 그림과 같습니다.
다음 그림과 같이 컨테이너 구성 요소에서hideLabels를true로 설정하면 컨테이너의 필드 레이블이 표시되지 않습니다.
실제 응용 프로그램에서 Ext.form.FormPanel 클래스의 기본 레이아웃은 Form 레이아웃을 사용하고 FormPanel은
레이블과 관련된 구성 요소이므로 일반적으로 FormPanel을 직접 사용하면 됩니다.위의 예는 다음과 같은 형식으로 고칠 수 있다.
Ext.onReady(function(){
new Ext.form.FormPanel({
renderTo:"hello",
title:" ",
width:300,
labelAlign:"right",
height:120,
defaultType: 'textfield',
items:[
{fieldLabel:" ",name:"name"},
{fieldLabel:" ",name:"address"},
{fieldLabel:" ",name:"tel"}
]
}
);
});프로그램 결과는 앞에서 Ext.Panel을 사용하고 form 레이아웃을 지정한 것과 같습니다. 아래 그림과 같습니다.
Accordion 레이아웃
Accordion 레이아웃은 클래스 Ext.layout을 사용합니다.Accordion은 접을 수 있는 레이아웃을 나타내는 accordion이라고 정의합니다. 즉, 이 레이아웃을 사용하는 용기 구성 요소의 하위 요소는 접을 수 있는 형식입니다.다음 코드를 참조하십시오.
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:" ",
width:500,
height:200,
layout:"accordion",
layoutConfig: {
animate: true
},
items:[{title:" 1",html:" 1 "},
{title:" 2",html:" 2 "},
{title:" 3",html:" 3 "}
]
}
);
});위의 코드는 용기 구성 요소를 정의하고 Accordion 레이아웃을 사용하도록 지정합니다. 이 용기 구성 요소에는 세 개의 하위 요소가 포함되어 있으며, layoutConfig에서 레이아웃 설정 매개 변수인animate를true로 지정하여 확장 접기를 실행할 때 애니메이션 효과를 적용할지 여부를 나타냅니다.실행 결과는 다음 그림과 같은 인터페이스를 생성합니다.
각 하위 요소의 머리 이름 또는 오른쪽 버튼을 클릭하면 패널이 확장되고 다음 그림과 같이 확장된 다른 패널이 축소됩니다.
카드 레이아웃
카드 레이아웃은 Ext.layout입니다.CardLayout 클래스는 card라고 정의합니다. 이 레이아웃은 용기 구성 요소에서 어느 순간에 하위 요소만 표시합니다.설치 마법사, Tab 팔레트 등 응용 프로그램의 패널 디스플레이에 대한 요구를 충족시킬 수 있습니다.다음 코드를 참조하십시오.
Ext.onReady(function(){
var panel=new Ext.Panel({
renderTo:"hello",
title:" ",
width:500,
height:200,
layout:"card",
activeItem: 0,
layoutConfig: {
animate: true
},
items:[{title:" 1",html:" 1 "},
{title:" 2",html:" 2 "},
{title:" 3",html:" 3 "}
],
buttons:[{text:" ",handler:changeTab}]
}
);
var i=1;
function changeTab()
{
panel.getLayout().setActiveItem(i++);
if(i>2)i=0;
}
});위의 코드는 용기 구성 요소 패널을 만들었습니다. 패널에는 세 개의 하위 패널 요소가 포함되고, 부모 용기에는'전환'단추가 포함되어 있습니다. 이 단추를 누르면changeTab 함수를 실행합니다. 이 함수는 부모 용기의 활성 패널을 세 개의 하위 요소 사이에서 교체합니다.프로그램의 실행 결과는 다음과 같습니다.
전환 버튼을 클릭하면 다음 그림과 같이 결과가 표시됩니다.
table 레이아웃 및 기타 레이아웃
Table 레이아웃은 클래스 Ext.layout을 사용합니다.TableLayout은 table라고 정의합니다. 이 레이아웃은 용기의 하위 요소를 일반 html 라벨과 유사하게
Ext.onReady(function(){
var panel=new Ext.Panel({
renderTo:"hello",
title:" ",
width:500,
height:200,
layout:"table",
layoutConfig: {
columns: 3
},
items:[{title:" 1",html:" 1 ",rowspan:2,height:100},
{title:" 2",html:" 2 ",colspan:2},
{title:" 3",html:" 3 "},
{title:" 4",html:" 4 "}
]
}
);
});이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
ExtJS 3.2 학습 노트(3) 사용자 정의 이벤트Extjs에서 모든 상속은 Ext.util에서 합니다.Observable 클래스의 컨트롤은 이벤트를 지원할 수 있습니다. 클래스에 대해 이벤트를 사용자 정의하려면 다음 절차를 따르십시오. 1, 먼저 클래스를 정의합니...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
