在里面
ExtJS 3.2
文档
,这里是的链接
viewport
和
BorderLayout
.
在这个
FIDDLE
,我创建了一个演示使用
“视口”
具有
border
布局我希望这样
小提琴
将帮助您实现您的要求。
代码段
Ext.onReady(function() {
var viewPort = new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
width: 200
}, {
region: 'south',
title: 'Title for Panel',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100
}, {
region: 'east',
title: 'Title for the Grid Panel',
collapsible: true,
split: true,
width: 300,
xtype: 'grid',
store: new Ext.data.ArrayStore({
fields: [{
name: 'company'
}, {
name: 'price',
type: 'float'
}, {
name: 'change',
type: 'float'
}],
data: [
['3m Co', 71.72, 0.02],
['Alcoa Inc', 29.01, 0.42],
['Altria Group Inc', 83.81]
]
}),
columns: [{
id: 'company',
header: 'Company',
sortable: true,
dataIndex: 'company'
}, {
header: 'Price',
sortable: true,
dataIndex: 'price'
}, {
header: 'Change',
sortable: true,
dataIndex: 'change'
}]
}, {
region: 'center',
xtype: 'tabpanel',
activeTab: 0,
items: [{
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}, {
title: 'Tab 2',
html: 'The 2nd tab\'s content. Others may be added dynamically'
}]
}]
});
});