ExtJs viewport & 可复用框架
在项目里面使用ExtJs viewport定义页面框架时,各页面的框架基本相同,只有对各页面内部会有少许不同。 此文介绍我在使用ExtJs的viewport时,采用的方法。
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
/*************************************** 设置布局 *****************************************/
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
var cellToolBarName = 'ExtToolBar';
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
function InitViewPort() {
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// 主区域
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'
}]
};
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// 左侧
leftPanel.title = '报表';
leftPanel.collapsible = true;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// 创建区域
viewport = new Ext.Viewport({
layout: 'border',
items: [
topPanel,
leftPanel,
contentPanel
]
});
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
Ext.getCmp(toolBarName).hide(); // 隐藏工具栏
viewport.render();
InitFormControlLocation(); // 将生成Ext viewport内容,移到form下
}
步骤一:在公共文件ExtCustomer.js中定义区域对象
1
var viewport;
2![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
var topPanel = {
13
region: 'north',
14
id: 'north-panel',
15
contentEl: 'TopDiv',
16
height: 75,
17
margins: '0 0 0 0'
18
};
19![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
20
var bottomPanel = {
21
region: 'south',
22
id: 'south-panel',
23
contentEl: 'BottomDiv',
24
height: 20,
25
margins: '0 0 0 0'
26
};
27![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
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
};
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
29
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
30
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
31
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
32
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
33
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
34
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
35
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
上面代码中定义了四个区域:页头,页脚,左侧和内容。
步骤二:在各页面的处理函数中,使用定义的区域对象
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
单个页面代码如上。其中给左侧区域添加标题和区域收起功能。 内容区域被划分为3个区域:工具栏,标题,报表控件,工具栏默认为隐藏状态。
关于InitFormControlLocation函数,参考:
http://www.cnblogs.com/joyyuan97/archive/2009/02/26/1398610.html |
步骤三:将页头和页脚做成UserControl,提高复用。
1![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
20
<!-- 页脚 -->
21
<uc:PageBottom ID="PageBottom1" runat="server" />
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
大功告成!