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의 콘텐츠입니다."}
]
}
);
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
