ExtJS 2.0 실 용적 이 고 간단명료 한 튜 토리 얼 의 구조 개술

ExtJS 의 레이아웃 기본 클래스 는 Ext.layot.Container Layout 이 고 다른 레이아웃 은 모두 이 종 류 를 계승 합 니 다.ExtJS 의 용기 구성 요 소 는 layot 및 layoutConfig 설정 속성 을 포함 합 니 다.이 두 속성 은 용기 에 사용 할 레이아웃 과 레이아웃 에 대한 상세 한 설정 정 보 를 지정 하 는 데 사 용 됩 니 다.용기 구성 요소 의 layot 가 지정 되 지 않 으 면 기본적으로 ContainerLayout 를 레이아웃 으로 사용 합 니 다.이 레이아웃 은 용기 에 요 소 를 간단하게 넣 을 뿐 일부 레이아웃 은 layoutConfig 설정 이 필요 합 니 다.어떤 것 은 layoutConfig 설정 이 필요 없습니다.코드 보기:

Ext.onReady(function(){ 
new Ext.Panel({ 
renderTo:"hello", 
width:400, 
height:200, 
layout:"column", 
items:[{columnWidth:.5, 
title:"  1"}, 
{columnWidth:.5, 
title:"  2"}] 
}); 
});

위의 코드 는 패 널 Panel 을 만 들 었 습 니 다.Panle 은 용기 구성 요소 입 니 다.layot 를 사용 하여 이 패 널 을 Column 레이아웃 으로 지정 합 니 다.이 판 넬 의 하위 요 소 는 두 판 넬 입 니 다.이 두 판 넬 은 열 레이아웃 과 관련 된 설정 매개 변수 속성 columnWidth 를 포함 하고 있 습 니 다.그들의 값 은 모두 0.5 입 니 다.즉,모든 판 넬 이 절반 을 차지 하 는 너비 입 니 다.위의 프로그램 을 실행 하여 다음 그림 과 같은 결 과 를 생 성 합 니 다Ext 의 일부 용기 구성 요 소 는 카드 레이아웃,FormPanel 은 form 레이아웃,GridPanel 의 표 는 column 레이아웃 등 을 사용 합 니 다.우 리 는 이 구성 요 소 를 사용 할 때 이 용기 구성 요 소 를 다른 레이아웃 으로 지정 할 수 없습니다.ExtJS 2.0 은 모두 10 가지 구 조 를 포함 하고 자주 사용 하 는 구 조 는 border,column,fit,form,card,tabel 등 구조 가 있 습 니 다.다음은 이 몇 가지 구 조 를 간단하게 소개 하 겠 습 니 다.