ExtJs viewport & 可复用框架

Posted on   joyyuan97  阅读(8654)  评论(3编辑  收藏  举报

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

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

 

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

 

 

页面布局

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

 

编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述

随笔 - 31, 文章 - 0, 评论 - 78, 阅读 - 43248

Copyright © 2025 joyyuan97
Powered by .NET 9.0 on Kubernetes

点击右上角即可分享
微信分享提示