ExtJs viewport & 可复用框架

  在项目里面使用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} ;

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

 

步骤二：在各页面的处理函数中，使用定义的区域对象

 

 

页面布局
/**//*************************************** 设置布局 *****************************************/

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" > &nbsp;&nbsp; </ 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"   />

大功告成！

  如果你对上面实现方式有任何建议，请留言讨论。 --JoyYuan97