http://www.efsframe.cn/
第 2 页
目 录
第一章 概述 ..................................................................3
第二章 文件引入 ..............................................................3
第三章 页面布局 ..............................................................4
简单布局 .............................................................4
再布局 ...............................................................6
第四章 Efs 命名空间 ..........................................................9
getDom(el) :.........................................................9
getEfs(el):..........................................................9
getExt(el):.........................................................10
第五章 核心 panel 面板容器 ...................................................10
简单的 panel 容器 ....................................................10
复杂的 panel 容器 ....................................................11
获取 panel容器对象 ..................................................12
第六章 tabpanel 页签容器.....................................................12
简单的 tabpanel 容器 .................................................12
复杂的 tabpanel 容器 .................................................13
第七章 Grid 网格容器.........................................................14
GridPanel 构造.......................................................14
数据源 store........................................................15
列模式 colmodel......................................................16
样例及显示效果 ......................................................16
第八章 Treepanel 树面板......................................................17
Treepanel 构造.......................................................17
xtype="root"节点 ....................................................18
xtype="loader"节点 ..................................................19
样例及显示效果 ......................................................20
第九章 Window 窗口面板.......................................................20
Window 窗口构造......................................................20
样例及显示效果 ......................................................22
第十章 Form 表单 ............................................................22
Form 对象构造........................................................23
样例及效果 ..........................................................23
第十一章 Toolbar 工具条......................................................25
Toolbar 构造 ........................................................25
样例及显示效果 ......................................................25
第十二章 Button 按钮和 Menu..................................................26
Button 构造 .........................................................26
Menu 构造 ...........................................................27
第十三章 Efs 事件 ...........................................................27
onEfs + 大写开头的 Ext 事件名 ........................................27
http://www.efsframe.cn/
第 3 页
第一章概述
Efs 是企业快速开发的 UI 层。这个 UI 层封装 extjs 框架,Ext 提供了好的
页面布局方式、功能强大的组件、优质的页面风格,但是如果直接使用 Ext 又是
较为复杂的,不仅要从头学习 EXT 框架,而且 Ext 是通过 js 函数创建页面的,
这就不得不为每个页面都编写一个相对应初始化函数,这会使得开发人员要将大
量的时间放在页面的制作上,而无法集中精力专注在业务组件的开发上,所以我
们针对 Ext 框架进行再封装,将配置项写在 div 标签上,根据对应的 xtyp 自动
构造 ext 对象。开发人员可以不用深入掌握 Ext框架,只需要开发者编写少量的
html 代码,也可以做出很炫的页面。当然你也可以使用 new Ext 的控件渲染到
页面,两者可以混合使用。
Efs 中的页面配置大多数和 Ext 的配置项相同,少量不同的再下面介绍组件
的篇章会提到。Efs 的常用方法都在 Efs.Common 中,其他方法都是 Ext的方法,
大家可以参考 ExtAPI。Efs 支持 Ext 的所有事件,调用方式请参考“Efs 事件”
篇章。开发者通常通过 Efs.getExt("id")就可以得到 Ext 组件的原始对象,然
后用这个对象再调用 Ext 的方法。
第二章 文件引入
要在页面上使用该框架需要引入相关的 js 文件:
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/efs-all.css" />
<script type="text/javascript" src="js/efs-all.js"></script>
ext-all.css ext 框架的样式文件
efs-all.css Efs 框架的样式文件
efs-all.js 该文件已经包含了 ext 框架的 js 文件,它应该在执行 js 之前
引入,而且在样式文件之后。
http://www.efsframe.cn/
第 4 页
第三章 页面布局
由于 ext 的布局方式很多,真正常用的不多,所以作者挑选了 ext 的 border
布局进行封装。如 果 您还有其他布局要求可以通过 new Ext 的控件方式渲染到页
面,或者联系请联系我们,我们将根据您的需求进行定制。
简单布局
border 布局运用 east(右)、west(左)、north(上)、south(下)、center
(其余部分)最多 5 个方位来满足布局需要,其中 north 和 south 的优先级最高,
然后是 east 和 west,最低的是 center:
通过上图可以理解这里优先级的意思:north 和 south 占用整个页面的宽,高度
由我们定义;west 和 east 占用 north和 south 高度以外剩下的全部高度,最后
剩余的部分为 center,下面是定义 5 个 div 标签来完成布局的实例:
<HEAD>
<TITLE> layout 布局 </TITLE>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../css/ext-all.css" />
<script type="text/javascript" src="../js/efs-all.js"></script>
</HEAD>
<BODY>
<div region="north" height="100" title="north部分">North部分</div>
<div region="south" height="100" title="South部分">South部分</div>
<div region="west" width="150" title="West部分">West部分</div>
North 部分
South 部分
West 部分
East 部分 Center 部分
http://www.efsframe.cn/
第 5 页
<div region="east" width="150" title="East部分">East部分</div>
<div region="center">中间部分</div>
</BODY>
</HTML>
Ø 整体布局(后面会将谈到再次布局)时这些 div 节点一定要都是 body 标签
的直接子节点,而且 body 标签再不应该含有其它需要显示出来的直接子节点,
否则将不作为布局方式,直接以 html 内容引入。
Ø 5 个 div 并不是都需要的,其中 center 对应的 div 节点是不可或缺的,其它
div 根据对页面布局的需要来定义,而且每个 div 一定要定义 id 属性。
Ø 定义布局的 div 标签定义了一些扩展标签:
u region 属性:每个定义布局的 div 一定需要定义 region 属性,而且该
属性的值只可以是'east'、'south'、'west'、'north'、'center'其中之一,
并不能重复,这就定义了该 div 在页面上所在的布局位置。
u height/width 属性:region 为 north 或 south 的 div 需要定义 height
属性,指定占用页面上下的高度是多少,这里定义 width 属性没有作用,宽
度始终是 100%;region 为 east 或 west 的 div 需要定义 width 属性,指定
占用页面左右的宽度是多少,这 里定义 height 属性没有作用,高度始终是除
- 1
- 2
- 3
前往页