下面给一个手风琴的例子的片段:
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');
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');