在项目里面使用ExtJs viewport定义页面框架时,各页面的框架基本相同,只有对各页面内部会有少许不同。 此文介绍我在使用ExtJs的viewport时,采用的方法。
步骤一:在公共文件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

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

上面代码中定义了四个区域:页头,页脚,左侧和内容。
步骤二:在各页面的处理函数中,使用定义的区域对象

单个页面代码如上。其中给左侧区域添加标题和区域收起功能。 内容区域被划分为3个区域:工具栏,标题,报表控件,工具栏默认为隐藏状态。
关于InitFormControlLocation函数,参考:
步骤三:将页头和页脚做成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

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

大功告成!
如果你对上面实现方式有任何建议,请留言讨论。 --JoyYuan97
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步