ExtJS 2.0 실용적이고 간결한 튜토리얼 레이아웃overview_extjs

ExtJS의 레이아웃 기본 클래스는 Ext.layout.ContainerLayout이며, 다른 레이아웃은 이 클래스를 상속합니다. ExtJS의 컨테이너 컴포넌트에는 레이아웃과 레이아웃 구성 속성이 포함되어 있으며, 이 두 속성은 컨테이너에서 사용하는 레이아웃과 레이아웃의 세부 구성 정보를 지정하는 데 사용됩니다. 기본적으로 레이아웃으로 사용됩니다. 이 레이아웃은 단순한 요소를 컨테이너에 넣습니다. 일부 레이아웃에는layoutConfig 구성이 필요하고 일부에는 레이아웃구성이 필요하지 않습니다. 코드를 보세요:

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

Ext.onReady( function(){
new Ext.Panel({
renderTo:"hello",
너비:400,
높이:200,
레이아웃:"column",
항목: [{columnWidth:.5,
제목:"패널 1"},
{columnWidth:.5,
제목:"패널 2"}]
});

위 코드에서 패널을 생성합니다. 패널은 컨테이너 구성 요소로 패널이 열 레이아웃을 사용하도록 지정합니다. 이 패널의 하위 요소는 두 개의 패널입니다. 두 패널 모두 열 레이아웃과 관련된 구성 매개변수 속성인 columnWidth를 포함합니다. 해당 값은 모두 0.5입니다. 즉, 각 패널은 너비의 절반을 차지합니다. 위 프로그램을 실행하면 아래와 같은 결과가 생성됩니다.

Ext의 일부 컨테이너 구성 요소는 카드 레이아웃을 사용하는 TabPanel, 폼 레이아웃을 사용하는 FormPanel, 열 레이아웃을 사용하는 GridPanel의 테이블과 같이 사용되는 레이아웃을 지정했습니다. 등, 이러한 구성 요소를 사용할 때 이러한 컨테이너 구성 요소에 대해 다른 레이아웃을 지정할 수 없습니다.
ExtJS2.0에는 테두리, 열, 맞춤, 양식, 카드, 테이블 및 기타 레이아웃이 포함되어 총 10개의 레이아웃이 포함되어 있습니다.