Layout ExtJS高级流体边界布局
我需要为我们的报告系统创建一个高级、流畅的边框布局 西窗格将分为两个单独的窗格,顶部用于筛选表单,底部用于导航 中心窗格将分为3个单独的窗格,顶部为主数据网格,底部为子报告网格。我可能在某些时候需要3个底部窗格,但我希望避免这种情况 下面是我正在寻找的一个例子: 到目前为止,我所得到的肯定不太令人满意 代码如下:Layout ExtJS高级流体边界布局,layout,extjs,height,viewport,Layout,Extjs,Height,Viewport,我需要为我们的报告系统创建一个高级、流畅的边框布局 西窗格将分为两个单独的窗格,顶部用于筛选表单,底部用于导航 中心窗格将分为3个单独的窗格,顶部为主数据网格,底部为子报告网格。我可能在某些时候需要3个底部窗格,但我希望避免这种情况 下面是我正在寻找的一个例子: 到目前为止,我所得到的肯定不太令人满意 代码如下: var ReportForm = new Ext.FormPanel({ url: '', frame: false,
var ReportForm = new Ext.FormPanel({
url: '',
frame: false,
border: false,
title: 'Filter Results',
width: 260,
labelWidth: 50,
padding: '10 0 0 5',
standardSubmit: true,
items: [
{
fieldLabel: 'Client',
hiddenName: 'ClientID',
mode: 'local',
store: frmClientStore,
displayField: 'CompanyName',
valueField: 'ClientID',
width: 150,
editable: true,
triggerAction: 'all',
xtype: 'combo'
}
],
buttons: [
{text:'Export',handler:function(){}},
{text:'Search',handler:function(){}},
{text:'Reset',handler:function(){}}
]
});
var ReportGrid = new Ext.grid.GridPanel({
id: 'ReportGrid',
width: '100%',
height: '50%',
viewConfig: {
forceFit: true
},
autoHeight: true,
loadMask: true,
stripeRows: true,
store: ReportStore,
margins: '5 5 5 5',
cm: ReportColumnModel
,bbar: new Ext.PagingToolbar
(
{
pageSize: 10,
store: ReportStore,
displayInfo: true,
displayMsg: 'Displaying results {0} - {1} of {2}'
}
)
});
var viewport = new Ext.Viewport({
layout: 'border',
items: [
{
region: 'west',
layout: 'vbox',
layoutConfig: {
align: 'stretch'
},
width: 260,
minSize: 175,
maxSize: 400,
margins: '5 5 5 5',
items: [
ReportForm,
{
region: 'south',
title: 'Superuser',
border: false,
xtype: 'tabpanel',
activeTab: 0,
items: [
{
title: 'General',
xtype: 'panel',
height: 200,
html: '',
},
{
title: 'Exams',
height: 200,
html: ''
}
]
}
]
},
new Ext.Panel({
region: 'center',
deferredRender: false,
layout: 'fit',
margins: '5 5 5 0',
items: [
ReportGrid,
new Ext.Panel({
region: 'south',
border: false,
height: '50%',
html: 'foo',
layout: 'fit',
items: [
new Ext.Panel({
region: 'west',
width: '50%',
border: false,
html: 'West'
}),
new Ext.Panel({
region: 'east',
width: '50%',
border: false,
html: 'East'
})
]
})
]
})
]
});
谢谢
编辑:
非常感谢amol给出以下答案。我还有一个问题。如果在西部地区折叠表单,如何使其调整导航面板的大小以填充剩余空间?
代码-
var ReportForm = new Ext.FormPanel({
url: '',
frame: false,
border: false,
title: 'Filter Results',
width: 260,
labelWidth: 50,
padding: '10 0 0 5',
standardSubmit: true,
items: [
{
fieldLabel: 'Client',
hiddenName: 'ClientID',
mode: 'local',
//store: frmClientStore,
displayField: 'CompanyName',
valueField: 'ClientID',
width: 150,
editable: true,
triggerAction: 'all',
xtype: 'combo'
}
],
buttons: [
{text:'Export',handler:function(){}},
{text:'Search',handler:function(){}},
{text:'Reset',handler:function(){}}
]
});
var ReportGrid = new Ext.grid.GridPanel({
id: 'ReportGrid',
flex:1,
viewConfig: {
forceFit: true
},
loadMask: true,
stripeRows: true,
//store: ReportStore,
margins: '5 5 5 5',
cm: new Ext.grid.ColumnModel({
columns:[
{header:'A column', dataIndex:'afield'},
{header:'B column', dataIndex:'bfield'}
]
}),
store:new Ext.data.ArrayStore({
autoLoad:true,
fields:['afield', 'bfield'],
data:[['value 1','value 3'],['value 2', 'value4']]
}),
bbar: new Ext.PagingToolbar
(
{
pageSize: 10,
//store: ReportStore,
displayInfo: true,
displayMsg: 'Displaying results {0} - {1} of {2}'
}
)
});
var viewport = new Ext.Viewport({
layout: 'border',
items: [
{
region: 'west',
layout: 'vbox',
layoutConfig: {
align: 'stretch'
},
width: 260,
minSize: 175,
maxSize: 400,
margins: '5 5 5 5',
items: [
ReportForm,
{
region: 'south',
title: 'Superuser',
border: false,
xtype: 'tabpanel',
activeTab: 0,
items: [
{
title: 'General',
xtype: 'panel',
height: 200,
html: ''
},
{
title: 'Exams',
height: 200,
html: ''
}
]
}
]
},
new Ext.Panel({
region: 'center',
deferredRender: false,
layout: 'vbox',
layoutConfig:{align:'stretch'},
margins: '5 5 5 0',
items: [
ReportGrid,
{
border: false,
flex:1,
layout: 'hbox',
layoutConfig:{align:'stretch'},
defaults:{flex:1},
items: [
new Ext.Panel({
html: 'West'
}),
new Ext.Panel({
html: 'East'
})
]
}
]
})
]
});
代码-
var ReportForm = new Ext.FormPanel({
url: '',
frame: false,
border: false,
title: 'Filter Results',
width: 260,
labelWidth: 50,
padding: '10 0 0 5',
standardSubmit: true,
items: [
{
fieldLabel: 'Client',
hiddenName: 'ClientID',
mode: 'local',
//store: frmClientStore,
displayField: 'CompanyName',
valueField: 'ClientID',
width: 150,
editable: true,
triggerAction: 'all',
xtype: 'combo'
}
],
buttons: [
{text:'Export',handler:function(){}},
{text:'Search',handler:function(){}},
{text:'Reset',handler:function(){}}
]
});
var ReportGrid = new Ext.grid.GridPanel({
id: 'ReportGrid',
flex:1,
viewConfig: {
forceFit: true
},
loadMask: true,
stripeRows: true,
//store: ReportStore,
margins: '5 5 5 5',
cm: new Ext.grid.ColumnModel({
columns:[
{header:'A column', dataIndex:'afield'},
{header:'B column', dataIndex:'bfield'}
]
}),
store:new Ext.data.ArrayStore({
autoLoad:true,
fields:['afield', 'bfield'],
data:[['value 1','value 3'],['value 2', 'value4']]
}),
bbar: new Ext.PagingToolbar
(
{
pageSize: 10,
//store: ReportStore,
displayInfo: true,
displayMsg: 'Displaying results {0} - {1} of {2}'
}
)
});
var viewport = new Ext.Viewport({
layout: 'border',
items: [
{
region: 'west',
layout: 'vbox',
layoutConfig: {
align: 'stretch'
},
width: 260,
minSize: 175,
maxSize: 400,
margins: '5 5 5 5',
items: [
ReportForm,
{
region: 'south',
title: 'Superuser',
border: false,
xtype: 'tabpanel',
activeTab: 0,
items: [
{
title: 'General',
xtype: 'panel',
height: 200,
html: ''
},
{
title: 'Exams',
height: 200,
html: ''
}
]
}
]
},
new Ext.Panel({
region: 'center',
deferredRender: false,
layout: 'vbox',
layoutConfig:{align:'stretch'},
margins: '5 5 5 0',
items: [
ReportGrid,
{
border: false,
flex:1,
layout: 'hbox',
layoutConfig:{align:'stretch'},
defaults:{flex:1},
items: [
new Ext.Panel({
html: 'West'
}),
new Ext.Panel({
html: 'East'
})
]
}
]
})
]
});