ExtJs viewport & 可复用框架

在项目里面使用ExtJs viewport定义页面框架时，各页面的框架基本相同， 只有对各页面内部会有少许不同。此文介绍我在使用ExtJs的viewport时，采用 的方法。

步骤一：在公共文件ExtCustomer.js中定义区域对象

　1var viewport;
2
3var 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
12var topPanel = {
13　　　 region: 'north',
14　　　 id: 'north-panel',
15　　 　 contentEl: 'TopDiv',
16　　　 height: 75,
17　　 　 margins: '0 0 0 0'
18};
19
20var bottomPanel = {
21　　　 region: 'south',
22　　　 id: 'south-panel',
23　　　 contentEl: 'BottomDiv',
24　　　 height: 20,
25　　　 margins: '0 0 0 0'
26};
27
28var contentPanel = {
29　　　 region: 'center',
30　　　 id: 'center- panel',
31　　　 contentEl: 'ContentDiv',
32　　 　 layout: 'fit',
33　　　 margins: '0 0 0 0',
34　　　 border: false
35};

上面代码中定义了四个区 域：页头，页脚，左侧和内容。