ExtJS 테두리 레이아웃 알아보기_extjs

1. Border 레이아웃은 Ext.layout.BorderLayout 클래스에 의해 정의되며 레이아웃 이름은 border입니다. 이 레이아웃은 컨테이너를 각각 동쪽, 남쪽, 서쪽, 북쪽, 중심으로 표시되는 남동쪽, 북서쪽, 북서쪽의 5개 영역으로 나눕니다. 컨테이너에 하위 요소를 추가할 때 이러한 하위 요소의 위치만 지정하면 됩니다. 요소 및 테두리 레이아웃은 레이아웃에서 지정한 위치에 하위 요소를 자동으로 배치합니다.
2. 적용 예시

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

Ext. onReady(function (){
new Ext.Viewport({
layout:"border",
items:[{region:"north",
height:50,
title:" 상단 패널" },
{지역:"남쪽",
높이:50,
제목:"하단 패널"},
{지역:"중심",
제목:"중심 패널"} ,
{지역:"서부",
너비:100,
제목:"왼쪽 패널"},
{지역:"동부",
너비:100,
제목:"오른쪽 패널"}
]
})