步骤一:在公共文件ExtCustomer.js中定义区域对象
1
var viewport;
2
3 var leftPanel = {
4 region: 'west',
5 id: 'west-panel',
6 contentEl: 'LeftDiv',
7 autoScroll: true,
8 margins: '0 0 0 0',
9 width: 200
10}
11
12 var topPanel = {
13 region: 'north',
14 id: 'north-panel',
15 contentEl: 'TopDiv',
16 height: 75,
17 margins: '0 0 0 0'
18} ;
19
20 var bottomPanel = {
21 region: 'south',
22 id: 'south-panel',
23 contentEl: 'BottomDiv',
24 height: 20,
25 margins: '0 0 0 0'
26} ;
27
28 var contentPanel = {
29 region: 'center',
30 id: 'center-panel',
31 contentEl: 'ContentDiv',
32 layout: 'fit',
33 margins: '0 0 0 0',
34 border: false
35} ;
2
3 var leftPanel = {
4 region: 'west',
5 id: 'west-panel',
6 contentEl: 'LeftDiv',
7 autoScroll: true,
8 margins: '0 0 0 0',
9 width: 200
10}
11
12 var topPanel = {
13 region: 'north',
14 id: 'north-panel',
15 contentEl: 'TopDiv',
16 height: 75,
17 margins: '0 0 0 0'
18} ;
19
20 var bottomPanel = {
21 region: 'south',
22 id: 'south-panel',
23 contentEl: 'BottomDiv',
24 height: 20,
25 margins: '0 0 0 0'
26} ;
27
28 var contentPanel = {
29 region: 'center',
30 id: 'center-panel',
31 contentEl: 'ContentDiv',
32 layout: 'fit',
33 margins: '0 0 0 0',
34 border: false
35} ;
上面代码中定义了四个区域:页头,页脚,左侧和内容。
步骤二:在各页面的处理函数中,使用定义的区域对象
页面布局
/**//*************************************** 设置布局 *****************************************/
var cellToolBarName = 'ExtToolBar';
function InitViewPort() {
// 主区域
contentPanel.contentEl = null;
contentPanel.items = {
id: 'row-panel',
layout: 'ux.row',
bodyStyle: 'padding:0px 0px 0px 1px',
items: [{
id: cellToolBarName,
contentEl: 'cellToolbar',
border: false,
margins: '0 0 0 0'
}, {
contentEl: 'cellTitle',
border: false,
margins: '0 0 0 0',
height: 20
}, {
rowHeight: 1,
contentEl: 'cellDiv',
border: false,
margins: '0 0 0 0'
}]
};
// 左侧
leftPanel.title = '报表';
leftPanel.collapsible = true;
// 创建区域
viewport = new Ext.Viewport({
layout: 'border',
items: [
topPanel,
leftPanel,
contentPanel
]
});
Ext.getCmp(toolBarName).hide(); // 隐藏工具栏
viewport.render();
InitFormControlLocation(); // 将生成Ext viewport内容,移到form下
}
/**//*************************************** 设置布局 *****************************************/
var cellToolBarName = 'ExtToolBar';
function InitViewPort() {
// 主区域
contentPanel.contentEl = null;
contentPanel.items = {
id: 'row-panel',
layout: 'ux.row',
bodyStyle: 'padding:0px 0px 0px 1px',
items: [{
id: cellToolBarName,
contentEl: 'cellToolbar',
border: false,
margins: '0 0 0 0'
}, {
contentEl: 'cellTitle',
border: false,
margins: '0 0 0 0',
height: 20
}, {
rowHeight: 1,
contentEl: 'cellDiv',
border: false,
margins: '0 0 0 0'
}]
};
// 左侧
leftPanel.title = '报表';
leftPanel.collapsible = true;
// 创建区域
viewport = new Ext.Viewport({
layout: 'border',
items: [
topPanel,
leftPanel,
contentPanel
]
});
Ext.getCmp(toolBarName).hide(); // 隐藏工具栏
viewport.render();
InitFormControlLocation(); // 将生成Ext viewport内容,移到form下
}
单个页面代码如上。其中给左侧区域添加标题和区域收起功能。 内容区域被划分为3个区域:工具栏,标题,报表控件,工具栏默认为隐藏状态。
关于InitFormControlLocation函数,参考:
http://www.cnblogs.com/joyyuan97/archive/2009/02/26/1398610.html |
步骤三:将页头和页脚做成UserControl,提高复用。
1
2 <!-- 页头 -->
3 < uc:PageTitle ID ="PageTitle1" runat ="server" Title ="主窗体" />
4
5 <!-- 主工具栏 -->
6 < div id ="main_ToolBar" style ="width:240px" ></ div >
7
8 <!-- 报表树 -->
9 < div id ="LeftDiv" ></ div >
10
11 <!-- 内容区域 -->
12 < div id ="ContentDiv" >
13 < div id ="cellToolbar" ></ div >
14 < div id ="cellTitle" > </ div >
15 < div id ="cellDiv" >
16 < uc:CellDesign ID ="CellDesign1" runat ="server" />
17 </ div >
18 </ div >
19
20 <!-- 页脚 -->
21 < uc:PageBottom ID ="PageBottom1" runat ="server" />
2 <!-- 页头 -->
3 < uc:PageTitle ID ="PageTitle1" runat ="server" Title ="主窗体" />
4
5 <!-- 主工具栏 -->
6 < div id ="main_ToolBar" style ="width:240px" ></ div >
7
8 <!-- 报表树 -->
9 < div id ="LeftDiv" ></ div >
10
11 <!-- 内容区域 -->
12 < div id ="ContentDiv" >
13 < div id ="cellToolbar" ></ div >
14 < div id ="cellTitle" > </ div >
15 < div id ="cellDiv" >
16 < uc:CellDesign ID ="CellDesign1" runat ="server" />
17 </ div >
18 </ div >
19
20 <!-- 页脚 -->
21 < uc:PageBottom ID ="PageBottom1" runat ="server" />
大功告成!