• 1. 第8章 Ext简介
  • 2. 本章内容Ext简介 Ext环境 Ext Grid控件
  • 3. 本章目标了解Ext语法 了解Ext环境 熟练掌握表格控件Grid用法
  • 4. 1. Ext1.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版本
  • 5. 1.2 Ext简介 ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的 ExtJS主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架 ExtJS可以单独使用,也可以用在.Net、Java、Php等各种开发语言开发的应用中
  • 6. 1.3 Ext类库 ExtJS库文件的官方网站下载地址:http://extjs.com/ 最新的ext-3.1.1.zip文件后解压如下:
  • 7. Ext类库 Ext3的目录说明名称说明adapter负责将里面提供第三方底层库(包括Ext自带的底层库)映射为Ext所支持的底层库docsAPI帮助文档exmaples提供使用ExtJs技术做出的小实例pkgs工具包resourcesExt UI资源文件目录,如CSS、图片文件都存放在这里面src无压缩Ext全部的源码ext-all.js压缩后的Ext全部源码ext-all-debug.js无压缩的Ext全部的源码(用于调试)
  • 8. Ext类库 一个Ext应用需要在页面中引入Ext的样式及Ext库文件 主要样式文件为 resources/css/ext-all.css 主要库文件主要包含两个 adapter/ext/ext-base.js及ext-all.js 其中ext-base.js表示框架基础库,ext-all.js是extjs的核心库
  • 9. Ext类库 一个最简单Ext示例 hello
  • 10. 1.4 Ext组件 表单及元素组件 基本组件 工具栏组件 表单及元素组件
  • 11. Ext组件 基本组件 xtypeClassboxExt.BoxComponent  具有边框属性的组件button Ext.Button 按钮colorpaletteExt.ColorPalette 调色板component Ext.Component 组件container Ext.Container 容器cycle Ext.CycleButton dataviewExt.DataView 数据显示视图datepickerExt.DatePicker 日期选择面板editor Ext.Editor 编辑器editorgrid Ext.grid.EditorGridPanel 可编辑的表格gridExt.grid.GridPanel 表格paging Ext.PagingToolbar 工具栏中的间隔progress Ext.ProgressBar 进度条splitbutton Ext.SplitButton 可分裂的按钮tabpanel Ext.TabPanel 选项面板treepanelExt.tree.TreePanel 树viewport  Ext.ViewPort 视图window Ext.Window 窗口
  • 12. Ext组件 工具栏组件 xtypeClasstoolbarExt.Toolbar 工具栏tbbutton Ext.Toolbar.Button 按钮tbfillExt.Toolbar.Fill 文件tbitem Ext.Toolbar.Item 工具条项目tbseparatorExt.Toolbar.Separator 工具栏分隔符tbspacer Ext.Toolbar.Spacer 工具栏空白tbsplit Ext.Toolbar.SplitButton 工具栏分隔按钮tbtextExt.Toolbar.TextItem 工具栏文本项
  • 13. Ext组件 表单及元素组件 xtypeClassformExt.FormPanel Form面板checkboxExt.form.Checkbox checkbox录入框comboExt.form.ComboBox combo选择项datefieldExt.form.DateField 日期选择项fieldExt.form.Field 表单字段fieldsetExt.form.FieldSet 表单字段组hiddenExt.form.Hidden 表单隐藏域htmleditorExt.form.HtmlEditor html编辑器numberfieldExt.form.NumberField 数字编辑器radioExt.form.Radio 单选按钮textareaExt.form.TextArea 区域文本框textfieldExt.form.TextField 表单文本框timefieldExt.form.TimeField 时间录入项triggerExt.form.TriggerField 触发录入项
  • 14. ExtJS提供了一套强大的事件处理机制,通过这些事件处理机制来响应用户的动作、监控控件状态变化、更新控件视图信息、与服务器进行交互等等 一个按钮的点击事件 button 1.5 Ext事件
  • 15. 2. Ext表格控件Grid 2.1 Grid特性 Ext的表格功能非常强的,包括排序、缓存、拖动、隐藏列、显示行号以及编辑单元格等功能 表格由类Ext.grid.GridPanel定义,它继承Panel 在Ext中,Grid控件和其它可以显示数据的控件,能够支持多种数据类型
  • 16. 2.2 一个简单的Grid 按照Ext解压包的examples目录中的示例来制作一个Grid 定义员工的表格 var cm = new Ext.grid.ColumnModel()用来创建表格列信息 var cm = new Ext.grid.ColumnModel([ {header:'编号', dataIndex:'empId' }, {header:'姓名', dataIndex:'userName'}, {header:'性别', dataIndex:'sex'}, {header:'出生日期', dataIndex:'birthday'}, {header:'地址', dataIndex:'address'}, {header:'备注', dataIndex:'remark'} ]); 列的名称 列对应的记录集字段
  • 17. 一个简单的Grid 向表格中添加数据 var data = …是来定义表格中的数据,这里一共有4条记录,它是一个二维数组,在页面上显示的是4行,每行有6列var data = [ ['0001', '张三','boy','9/1 12:00am','建设路', '0001remark'], ['0002', '李四','boy', '9/1 12:00am','人民路', '0002remark'], ['0003', '王五','boy', '9/1 12:00am','大致路', '0003remark'], ['0004', '赵六','girl', '9/1 12:00am','湖边路', '0004remark'] ];
  • 18. 一个简单的Grid 为了能在页面上显示这些数据,还需要对原始数据进行转换 store有两个部分:proxy和reader。proxy是指获取数据的方式,而reader指如何解析数据var store = new Ext.data.Store({ proxy:new Ext.data.MemoryProxy(data), reader:new Ext.data.ArrayReader({}, [ {name:'empId'}, {name:'userName'}, {name:'sex'}, {name:'birthday'}, {name:'address'}, {name:'remark'} ]) }); store.load();对数据进行初始化
  • 19. 一个简单的Grid 定义好列模型,完成原始数据和数据转换后,就可以把它们进行装配 var grid = new Ext.grid.GridPanel({ store: store, height:350, width:700, cm:cm }); grid.render('gridCm');grid开始渲染
  • 20. 一个简单的Grid Grid运行效果
  • 21. 2.3 Grid常用功能 互换列的位置var store = new Ext.data.Store({ proxy:new Ext.data.MemoryProxy(data), reader:new Ext.data.ArrayReader({}, [ {name:'empId',mapping:0}, {name:'userName',mapping:2}, {name:'sex',mapping:1}, {name:'birthday',mapping:3}, {name:'address',mapping:4}, {name:'remark',mapping:5} ]) });这两行互换注意:mapping的索引号是从0开始
  • 22. Grid常用功能 自定义列宽var cm = new Ext.grid.ColumnModel([ {header:'编号', dataIndex:'empId',width:40, sortable:true}, {header:'姓名', dataIndex:'userName',width:60}, {header:'性别', dataIndex:'sex',width:40}, {header:'出生日期', dataIndex:'birthday',width:120}, {header:'地址', dataIndex:'address',width:200}, {header:'备注', dataIndex:'remark',width:200} ]);设置宽度
  • 23. Grid常用功能 支持按列排序 var cm = new Ext.grid.ColumnModel([ {header:'编号', dataIndex:'empId', sortable:true}, {header:'姓名', dataIndex:'userName', sortable:true}, {header:'性别', dataIndex:'sex', sortable:true}, {header:'出生日期', dataIndex:'birthday', sortable:true}, {header:'地址', dataIndex:'address', sortable:false}, {header:'备注', dataIndex:'remark'} ]);设置排序点击这里按编号排序
  • 24. Grid常用功能 支持按列排序同时可以隐藏列 隐藏备注列
  • 25. Grid常用功能 格式化数据var data = [ ['0001', '张三','boy','1/1 12:00am','建设路', '0001remark'], ['0002', '李四','boy', '9/1 12:00am','人民路', '0002remark'], ['0003', '王五','boy', '9/1 12:00am','大致路', '0003remark'], ['0004', '赵六','girl', '9/1 10:00am','湖边路', '0004remark'] ]; var store = new Ext.data.Store({ proxy:new Ext.data.MemoryProxy(data), reader:new Ext.data.ArrayReader({}, [ {name:'empId',mapping:0}, {name:'userName',mapping:1}, {name:'sex',mapping:2}, {name:'birthday',mapping:3,type: 'date', dateFormat:'n/j h:ia'}, {name:'address',mapping:4}, {name:'remark',mapping:5} ]) }); 格式化的日期
  • 26. Grid常用功能 上面日期不是很通用,cm配置中做如下修改 var cm = new Ext.grid.ColumnModel([ {header:'编号', dataIndex:'empId', sortable:true}, {header:'姓名', dataIndex:'userName', sortable:true}, {header:'性别', dataIndex:'sex', sortable:true}, {header:'出生日期', dataIndex:'birthday', sortable:true,renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s')}, {header:'地址', dataIndex:'address', sortable:false}, {header:'备注', dataIndex:'remark'} ]);格式化的日期
  • 27. Grid常用功能 自动显示行号 var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), {header:'编号', dataIndex:'empId', sortable:true}, {header:'姓名', dataIndex:'userName', sortable:true}, {header:'性别', dataIndex:'sex', sortable:true}, {header:'出生日期', dataIndex:'birthday', sortable:true,renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s')}, {header:'地址', dataIndex:'address', sortable:false}, {header:'备注', dataIndex:'remark'} ]);自动显示行号行号
  • 28. 复选框 var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, {header:'编号', dataIndex:'empId', sortable:true}, {header:'姓名', dataIndex:'userName', sortable:true}, {header:'性别', dataIndex:'sex', sortable:true}, {header:'出生日期', dataIndex:'birthday', sortable:true,renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s')}, {header:'地址', dataIndex:'address', sortable:false}, {header:'备注', dataIndex:'remark'} ]); var grid = new Ext.grid.GridPanel({ store: store, height:150, width:700, cm:cm, sm:sm, viewConfig:{forceFit:true } }); Grid常用功能 复选框通过CheckboxSelectionModel对象来实现
  • 29. 查询所有员工的页面,代码如下4. DWR整合SH实现查询 <%@ page language="java" pageEncoding="gb2312"%> empList 员工信息
    employeeId empName birthday phone
    动态添加4列的表格
  • 30. 总结ExtJS简介及使用Ext优点 ExtJS的类及控件:底层API(core)、控件(widgets)、实用工具Util ExtJS组件大致可以分成三大类,即基本组件、工具栏组件、表单及元素组件 ExtJS Grid控件实现查询以及选择一条记录、多条记录、高亮显示选择行、调整列宽、显示行号、支持复选框等功能
  • 31. (本页无文本内容)