EXTJS VIEWPORT & Reusable Framework

When you use ExtJS viewport to define a page frame within a project, the frames of each page are basically the same, and only slightly different within each page. This article describes the method that I use when using ExtJS's viewport.

Step one: Define a Zone object in the public file 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};

The above code defines four areas: header, footer, left, and content.