extjs之-手风琴效果

下面给一个手风琴的例子的片段：

var accordionPanel = new Ext.Panel({

region: 'center',

//width:'100%',

layout:'accordion',

//bodyStyle:'width:100%',

layoutConfig: {

titleCollapse: true,

animate: true,

activeOnTop: false

},

items: [

{

xtype: 'grid',
id: 'table',
collapsible: true,
store:grid_store,

title:'<span style=\"font-size:12px\">表</span>',

cm:colM ,

bbar:mybar

},

view_grid = new Ext.grid.GridPanel( {

xtype: 'grid',
id: 'view',
collapsible: true,

store:view_grid_store,

title:'<span style=\"font-size:12px\">视图</span>',

cm:view_colM,

tbar: [{

text: '添加视图',

id:'view_btn',

handler:newView

}],

bbar:view_mybar

}),

link_grid = new Ext.grid.GridPanel({
xtype: 'grid',
id: 'dblink',
store:link_grid_store,
cm:link_colM,
collapsible: true,
title:'<span style=\"font-size:12px\">DBLINK</span>',

tbar: [{

text: '添加链接',

id:'link_btn',

handler:newLink

}],

bbar:linkmybar

})

]



});

//定义一个viewport

var viewport=new Ext.Viewport({

layout:'border',

border:false,

items:[{

region:'center',

layout:'fit',

items:[accordionPanel]

}]

});

viewport.render('db');