为什么在Viewport center加一个gird， north部分的toolbar中的buttongroup样式就变了。
Demo代码：
[code="js"]
Ext.onReady(function() {
MyViewportUi = Ext.extend(Ext.Viewport, {
layout: 'border',
initComponent: function() {
this.items = [
{
xtype: 'panel',
title: 'My Panel',
region: 'center',
width: 100,
layout: 'fit',
items: [
{
xtype: 'grid',
title: 'My Grid',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
header: 'Column',
sortable: true,
width: 100
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
header: 'Column',
sortable: true,
width: 100,
align: 'right'
},
{
xtype: 'datecolumn',
dataIndex: 'date',
header: 'Column',
sortable: true,
width: 100
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
header: 'Column',
sortable: true,
width: 100
}
]
}
]
},
{
xtype: 'treepanel',
title: 'My Tree',
region: 'west',
minWidth: 200,
width: 200,
margins: '5 5 5 0',
collapsible: true,
root: {
text: 'Multiple-choice'
},
loader: {
}
},
{
xtype: 'container',
region: 'north',
width: 100,
minHeight: 80,
height: 80,
items: [
{
xtype: 'toolbar',
items: [
{
xtype: 'buttongroup',
title: 'New',
columns: 2,
titleCollapse: true,
items: [
{
xtype: 'button',
text: 'Question',
arrowAlign: 'bottom',
menu: {
xtype: 'menu',
items: [
{
xtype: 'menuitem',
text: 'Menu Item'
}
]
}
}
]
},
{
xtype: 'buttongroup',
title: 'Settings',
columns: 2,
items: [
{
xtype: 'button',
text: 'Quiz Properties',
width: 30
},
{
xtype: 'button',
text: 'Player Template'
}
]
},
{
xtype: 'buttongroup',
title: 'Publish',
columns: 2,
items: [
{
xtype: 'button',
text: 'Preview'
},
{
xtype: 'button',
text: 'Publish'
}
]
}
]
}
]
},
{
xtype: 'container',
region: 'south',
width: 100,
height: 30,
minHeight: 30
}
];
MyViewportUi.superclass.initComponent.call(this);
}
});
var ui = new MyViewportUi();
});
[/code]
请赐教！ :D
