第8章 Ext简介(理论).pptVIP

总结 ExtJS简介及使用Ext优点 ExtJS的类及控件：底层API(core)、控件(widgets)、实用工具Util ExtJS组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件 ExtJS Grid控件实现查询以及选择一条记录、多条记录、高亮显示选择行、调整列宽、显示行号、支持复选框等功能 第8章　Ext简介 本章内容 Ext简介 Ext环境 Ext Grid控件 本章目标 了解Ext语法 了解Ext环境 熟练掌握表格控件Grid用法 1. Ext 1.1 Ext发展史 Ext的产生，最早是在YUI的库的基础上扩展开来，因此Ext早期名字是YUI-Ext 2006年秋天, 发行了版本为0.33的YUI-Ext,而最终被证明为最后版本的代码，年底之前，这个库已大受欢迎, 名字被简化为Ext 2007年4月1日，发布1.0正式版 2008年4月1日，ExtJS已发展涵盖美国、日本、中国、法国、德国等全球范围的用户，版本为Ext-3.0 2009年4月14-16日的首次Ext Conference中发布了Ext的3.0 RC版本 1.2 Ext简介 ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写的 ExtJS主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架 ExtJS可以单独使用，也可以用在.Net、Java、Php等各种开发语言开发的应用中 1.3 Ext类库 ExtJS库文件的官方网站下载地址：/ 最新的ext-3.1.1.zip文件后解压如下： Ext类库 Ext3的目录说明 无压缩的Ext全部的源码(用于调试) ext-all-debug.js 压缩后的Ext全部源码 ext-all.js 无压缩Ext全部的源码 src Ext UI资源文件目录，如CSS、图片文件都存放在这里面 resources 工具包 pkgs 提供使用ExtJs技术做出的小实例 exmaples API帮助文档 docs 负责将里面提供第三方底层库（包括Ext自带的底层库）映射为Ext所支持的底层库 adapter 说明 名称 Ext类库 一个Ext应用需要在页面中引入Ext的样式及Ext库文件 主要样式文件为 resources/css/ext-all.css 主要库文件主要包含两个 adapter/ext/ext-base.js及ext-all.js 其中ext-base.js表示框架基础库，ext-all.js是extjs的核心库 Ext类库 一个最简单Ext示例 html head titlehello/title link rel=stylesheet type=text/css href=../../resources/css/ext-all.css / script type=text/javascript src=../../adapter/ext/ext-base.js/script script type=text/javascript src=../../ext-all.js/script script type=text/javascript Ext.onReady(function () { var win = new Ext.Window({title:hello,width:200,height:200,html:h1hello,my first Ext/h1}); win.show(); } ); /script /head /html 1.4 Ext组件 表单及元素组件 基本组件 工具栏组件 表单及元素组件 Ext组件 基本组件 Ext.Window　窗口 window? Ext.ViewPort 视图 viewport?? Ext.tree.TreePanel 树 treepanel Ext.TabPanel　选项面板 tabpanel? Ext.SplitButton 可分裂的按钮 splitbutton? Ext.ProgressBar 进度条 progress? Ext.PagingToolbar 工具栏中的间隔 paging? Ext.grid.GridPanel 表格 grid Ext.grid.EditorGridPanel 可编辑的表格 editorgrid? Ext.Editor　编辑器 editor? Ext.DatePicker 日期选择面板 datepicker Ext.DataView 数据显示视图 dataview Ext.CycleButton　 cycle