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');