ExtJs viewport& 可复用框架-控件新闻-慧都网

产品

产品
资讯
资源
视频
学院
示例

首页 > 资讯 > ExtJs viewport& 可复用框架

ExtJs viewport& 可复用框架

转帖|其它|编辑：郝浩|2009-02-27 13:21:21.000|阅读 995 次

概述：ExtJs viewport& 可复用框架操作

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

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

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

var viewport;
2

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

var topPanel = {
13

region: 'north',
14

id: 'north-panel',
15

contentEl: 'TopDiv',
16

height: 75,
17

margins: '0 0 0 0'
18

};
19

var bottomPanel = {
21

region: 'south',
22

id: 'south-panel',
23

contentEl: 'BottomDiv',
24

height: 20,
25

margins: '0 0 0 0'
26

};
27

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

};

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

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

页面布局

单个页面代码如上。其中给左侧区域添加标题和区域收起功能。内容区域被划分为3个区域：工具栏，标题，报表控件，工具栏默认为隐藏状态。

关于InitFormControlLocation函数，参考:

http://www.cnblogs.com/joyyuan97/archive/2009/02/26/1398610.html

步骤三：将页头和页脚做成UserControl，提高复用。

3

<uc:PageTitle ID="PageTitle1" runat="server" Title="主窗体" />
4

6

<div id="main_ToolBar" style="width:240px"></div>
7

9

<div id="LeftDiv"></div>
10

12

<div id="ContentDiv" >
13

<div id="cellToolbar"></div>
14

<div id="cellTitle">  </div>
15

<div id="cellDiv">
16

<uc:CellDesign ID="CellDesign1" runat="server" />
17

</div>
18

</div>
19

21

<uc:PageBottom ID="PageBottom1" runat="server" />

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自：博客园

上一篇：wpf的相关设计问题下一篇：Javascript Resize和 Drag类,基于 jQuery

在线采购

中文文档库

试用/Demo下载

开发社群

ExtJs viewport& 可复用框架

用科技创就卓越

Create excellence with technology

在线采购

中文文档库

试用/Demo下载

开发社群

ExtJs viewport& 可复用框架

为你推荐

用科技创就卓越

Create excellence with technology