Ext 2.0のAccordion - 平松祥史の日記

「Accordion」と呼ばれているインターフェースは、実は使い所が難しいような気がしてきた。

<head>
<script type="text/javascript" src="ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
    var panel = new Ext.Viewport({
        layout:'accordion',
        layoutConfig:{
            animate:true
        },
        items:[
            { title: 'div 1', contentEl: 'div1'},
            { title: 'div 2', contentEl: 'div2'}
        ]});
});
</script>
<link rel="stylesheet" type="text/css" href="ext-2.0/resources/css/ext-all.css" />
</head>
<body>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
</body>
</html>

layoutConfigは「スルスルッ」という効果を使うために必要。省いても機能する。