ExtJS 2.0 실 용적 이 고 간단명료 한 튜 토리 얼 의 Border 지역 레이아웃

이 레이아웃 은 용 기 를 동서남북 중 5 개 구역 으로 나 누 었 는데 각각 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:"    "} 
] 
}); 
}); 

위의 코드 를 실행 하면 페이지 에서 상하 좌우 중 5 개 구역 을 포함 하 는 패 널 을 출력 합 니 다.아래 그림 과 같 습 니 다