ExtJS 아코디언 알아보기

1. Accordion 레이아웃은 Ext.layout.Accordion 클래스에 의해 정의되며, 이는 축소 가능한 레이아웃을 나타냅니다. 각 하위 요소의 헤더 이름이나 오른쪽 버튼을 클릭하면 패널이 확장되고 다른 확장 패널은 축소됩니다.
layoutConfig: true는 펼치거나 접을 때 애니메이션 효과를 시작한다는 뜻이며, 기본값은 false입니다.
2. 적용 예시

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

Ext. onReady(function (){
var _panel = new Ext.Panel({
title:"개인 정보",
renderTo:Ext.getBody(),
frame:true,
width :500,
높이:300,
레이아웃:"accordion",
layoutConfig: {
animate: true
},
items:[{title:"하위 요소 1" ,html: "하위 요소 1의 콘텐츠입니다."},
{title:"하위 요소 2",html:"하위 요소 2의 콘텐츠입니다."},
{title:"하위 요소 3", html: "하위 요소 3의 콘텐츠입니다."}
]
}
);