第十章 JS应用-Extjs.ppt

Extjs 介绍 Extjs4开发环境部署 Extjs4组件及布局。 Extjs4特点 Extjs介绍 1.1 什么是Extjs ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架 ExtJs支持多平台下的主流浏览器 Internet Explorer 6+ FireFox 1.5+ (PC, Mac) Safari2+、Opera9+。ExtJs官方网站/ ExtJs目前最版本是 ExtJs4 Extjs4开发环境部署 1.1下载ExtJS4 的开发包 可以从官方网站/下载，以保证获得必威体育精装版版本 Extjs4开发环境部署 1.2认识ExtJS4 的开发包 builds 目录是ExtJS 压缩后的代码 docs 中当然是ExtJS 的文档了，其中最重要的是ExtJS 的API examples 中是官方的演示示例 locale 这是多国语言的资源文件其中ext-lang-zh_CN.js是中文 overview 是ExtJS 的功能简述整体上阐述了ExtJS 的功能和结构 pkgs 中是ExtJS 各部分功能的打包文件。 resource 中是ExtJS 要用到的图片文件与样式表文件 src 目录是未压缩的源代码目录。 bootstrap.js 是ExtJS 库的引导文件 ext-all.js 文件是ExtJS 的核心库，是必须要引入的。 ext-all-debug.js 文件是调试版 Extjs4开发环境部署 1.3 Hello world Extjs4开发环境部署 1.3 Hello world Extjs4组件 组件图 Extjs4组件 1.2 组件创建 Extjs4创建组件的方式可以是之前版本 new 关键字的方式，还可以新的方式，就是Ext.create(....) Extjs4组件 1.3 扩展组件 Extjs4能通过Ext.define扩展组件 Extjs4组件 1.4、ExtJS 对原有JavaScript 对象的扩展 Ext.Array 提供了处理数组的常用方法集合 clone克隆数组、contains检查是否包含指定元素 filter过滤、indexOf索引位置、max最大、min最小等等 Ext.Date 提供了处理日期的常用方法集合 add、between、format…… Ext.Function 提供了处理函数的常用方法集合 alias创建别名函数、defer指定函数的延时代理等等 Ext.Number 提供了处理数字的常用方法集合 constrain数值是否在指定的范围、toFixed格式化函数精度 Extjs4组件 1.4、ExtJS 对原有JavaScript 对象的扩展 Ext.String 提供了处理字符串的常用方法集合 trim去空格、leftPad左侧填充指定字符、format Ext.Object 提供了处理对象的常用方法集合 each、getKey、getSize、getValues…… Extjs4常用布局 1.1、Accordion布局 可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式 Extjs4常用布局 1.2、BorderLayout布局 该布局把容器分成东南西北中五个区域，分别由east，south, west，north, center来表示 Extjs4常用布局 1.3、CardLayout布局 该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求 Extjs4常用布局 1.4、其它的布局方式 ColumnLayout列布局把整个容器组件看成一列 fit填充布局方式是把容器中的子元素覆盖容器的整个区域 Hbox、Vbox箱子模型的布局方式,前者为自动按顺序横排后者为竖排布局 Extjs4常用布局 1.5、布局综合应用 Extjs4特点 1.1继承方面Ext.defined代替了原来Ext.extend的写法 这样写的好处是自动创所须的建命名空间，从而免去声明命名空间的一步 Extjs4特点 1.2动态加载 运行时期间，Ext内部会根据依赖树的关系异步地下载类文件,也就是说再也不必一次加载已经达到1MB的ext-all.js了 动态加载