1
보고서 시스템을 위해 유동적 인 고급 테두리 레이아웃을 작성해야합니다.ExtJS 고급 유체 경계선 배열
웨스트 패널은 두 개의 별도 창, 필터 양식의 상단 및 탐색의 하단으로 분할됩니다.
센터 창은 기본 데이터 격자의 위쪽과 하위 보고서 격자의 2 개의 아래쪽 창으로 분리됩니다. 나는 어느 시점에서 3 개의 아래 창을 필요로 할지도 모른다. 그러나 나는 그것을 피하기를 바라고있다. 내가 지금까지 확실히 만족보다 작은 것을 http://dl.dropbox.com/u/298258/Amistaff/desiredLayout.png
: 여기
내가 무엇을 찾고의 예입니다.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'
})
]
})
]
})
]
});
감사합니다 ...
편집 : 여기
http://dl.dropbox.com/u/298258/Amistaff/currentLayout.png
은 코드 아래의 답변 아몰에많은 감사합니다. 추가 질문이 하나 있습니다. 서부 지역의 양식을 접은 경우 탐색 패널의 크기를 조정하여 나머지 공간을 채우려면 어떻게해야합니까?
환상적인! 고맙습니다. – cmhampton