ExtJs viewport & 可复用框架

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

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

 1var viewport;
 2
 3;

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

 

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

 

 

}

  单个页面代码如上。其中给左侧区域添加标题和区域收起功能。  内容区域被划分为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" />

大功告成！