이 레이아웃은 컨테이너를 각각 동쪽, 남쪽, 서쪽, 북쪽, 중심으로 표시되는 남동쪽, 북서쪽, 북서쪽의 5개 영역으로 나눕니다. 컨테이너에 하위 요소를 추가할 때 이러한 하위 요소의 위치만 지정하면 됩니다. 요소 및 테두리 레이아웃은 레이아웃에서 지정한 위치에 하위 요소를 자동으로 배치합니다. 아래 코드를 보세요:
Ext.onReady (function() {
new Ext.Viewport({
layout:"border",
items:[{region:"north",
height:50,
title:"Top 패널"},
{지역:"남쪽",
높이:50,
제목:"하단 패널"},
{지역:"중앙",
제목:"중앙 패널 "},
{지역:"서부",
너비:100,
제목:"왼쪽 패널"},
{지역:"동부",
너비:100,
title:" 오른쪽 패널"}
]
});
});
위 코드를 실행하면 페이지 상단, 상단, 하단, 좌측, 중앙, 그림과 같이
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
