• 1. 技术讲座之轻松掌握 ExtJS
  • 2. 2Ext JS介绍 Ext JS环境配置 Ext JS组件介绍 Ext JS常用组件应用详解 Ext JS应用实例——学员管理系统 内容要点
  • 3. 3什么是Ext JSExt JS是一个强大的js类库,以前是基于YAHOO-UI,现在已经完全独立了,官方网站:www.extjs.com。 它提供了丰富的,非常漂亮的外观体验,成为众多界面层开发人员的追捧!其核心的组件基本覆盖了我们构建RIA的常用的组件。 让我们尽情享受精彩吧!
  • 4. 4Ext JS环境配置从官方网站www.extjs.com下载压缩包ext-x.x.x.rarip 目前最新版本是3.1,从2.1版以后遵照GBL协议执行,以前是LGBL。 适配器帮助文档实例参考资源包源码包主文件插件文件
  • 5. 5Ext JS环境配置Ext JS是一个JS库,所以只要将它放在Web应用的目录下即可使用。它有两种模式:发布模式和调试模式。即ext-all.js和ext-all-debug.js。前者是经过重新排版和压缩的,文件比较小方便应用。后者是未经排版的原始格式,在开发过程中方便调试。 只需将以下文件和文件夹加入程序即可: adapter/ext文件夹、resources文件夹和ext-all.js文件 引用:
  • 6. 6Ext JS环境配置Ext JS帮助文档不能使用 Ext JS提供是详细的帮助文档,其格式与Java api相似。对开发或学习人员来说是非常好的参资料,但是如果直接用浏览器打开并不能使用。是因为它默认需要安装Adobe AIR插件才能使用。 解决办法: 打开docs文件夹中的index.html文件,找到以下语句进行修改即可: 将: 改为: 现在可以使用了
  • 7. 7Ext JS环境配置Ext JS开发工具 开发利器Spket——是一款全面支持JavaScript、XUL/XBL、Flex、SVG以及Yahoo!Widget的免费开发工具。它有插件版和IDE两种版本,我们选择插件版可以将它集成到Eclipse,这样我们就可以快速开发Ext JS应用了。官方网站:www.spket.com 安装好插件后还需经过简单的设置 Window->Preferences选项,在窗口左边可以看到Spket菜单项。选择JavaScript Profiles,点New先创建ExtJS选项,再点Add Library,选择插件文件ext.jsb2,最后选择中所有的选项即可。
  • 8. 8Ext JS环境配置
  • 9. 9Ext JS组件介绍Ext JS组件结构图
  • 10. 10Ext JS组件介绍Ext .Component是ExtJS中所有组件的基类,它的所有子类都自动享有了标准ExtJS组件的生命周期,包括创建、渲染和销毁。它们也自动支持了标准的隐藏/显示以及启用/禁用等操作。 组件大致可分成3大类: 基本组件——Window、Panel、Button、Grid等 工具栏组件——ToolBar、Tbbutton等 表单组件——Form、Textfield等 灵活应用以上各种组件,就可做出具有优雅界面和良好用户体验的Web应用。
  • 11. 11第一个应用——Hello WorldExt JS常用组件应用详解演示示例:ExtJS版Hello World 加载事件信息窗口
  • 12. 12Ext包和类 ExtJS的设计结构仿照了Java包和类的概念。所有组件都以类的形式存在,Ext是顶层包,在使用时需先按包名进行创建。然后再以对象.属性/对象.方法的形式进行应用。 例如:var win = new Ext.Window(参数);//创建一个窗口 win.title=“窗口标题”;//设置窗口标题属性 win.show();//调用显示方法 ExtJS中的对象也有静态方法,只要通过类名调用即可。 例如: Ext.MessageBox.alert(‘警告', 'Hello World.'); Ext JS常用组件应用详解
  • 13. 13JavaScript对象直接量——json格式数据 语法格式: {属性名1:属性值1,属性名2:{属性名3:属性值3}} ExtJS的很多类和方法使用了json格式数据进行处理,对于一个对象可以在创建时按要求以json格式数据初始化对象。 例如:win = new Ext.Window({width : 300,height : 150}); //创建一个宽300px高150px的窗口。 Ext JS常用组件应用详解
  • 14. 14表格对象——Grid ExtJS的表格功能非常强大,包括排序、拖动、汇总,编辑等实用功能,还能配合存储器方便实现分页功能。 Ext JS常用组件应用详解演示示例:按列排序演示示例:自动序号、复选框和隔行变色演示示例:加载远程数据进行分页
  • 15. 15表格对象——Grid 由Ext.grid.ColumnModel存储表头 由Ext.data.Store存储表身数据 由类Ext.grid.GridPanel创建 Ext JS常用组件应用详解 var cm = new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id',sortable:true}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]);var data = [ ['1','name1','descn1'],… ]; var store = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'id'}, {name: 'name'},{name: 'descn'} ]) }); store.load(); var grid = new Ext.grid.GridPanel({ autoHeight: true, renderTo: 'grid', store: store, cm: cm });渲染目标
  • 16. 16表格对象——GridExt JS常用组件应用详解 var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, …. ]); var data = […]; var store = new Ext.data.Store(… store.load(); var grid = new Ext.grid.GridPanel({ … stripeRows:true });复选框自动行号隔行变色
  • 17. 17表格对象——GridExt JS常用组件应用详解 var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, …. ]); var data = […]; var store = new Ext.data.Store(… store.load(); var grid = new Ext.grid.GridPanel({ … stripeRows:true });复选框自动行号隔行变色
  • 18. 18Ext JS常用组件应用详解var cm = new Ext.grid.ColumnModel([…]); var store = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url:‘grid3.jsp'}), reader: new Ext.data.JsonReader({ totalProperty: 'totalProperty', root: 'root' }, [{name: 'id'},{name: 'name'},{name: 'descn'} ]) }); var grid = new Ext.grid.GridPanel({ … bbar: new Ext.PagingToolbar({ pageSize: 10,store: store,displayInfo: true, displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条', emptyMsg: "没有记录" }) }); store.load({params:{start:0,limit:10}});总条数远程地址起始序号、页大小 必须在最后加载,否则不能分页分页工具条
  • 19. 19表单及表单元素——Form Ext.form.FormPanel 表单元素结构图Ext JS核心对象演示示例:表单元素
  • 20. 20Ext JS核心对象 var form = new Ext.form.FormPanel({ defaultType: 'textfield',labelAlign: 'right', title: 'form',labelWidth: 50, frame:true,width: 220, url: ‘form2.jsp', items: [{fieldLabel: '文本框',name: 'text'}], buttons: [{ text: '按钮', handler: function() { form.getForm().submit( {success : function(form, action), failure : function(form, action)}); }}] }); form.render("form"); //{success:false,errors:{text1:'有问题一',text2:'有问题二'}} 演示示例:表单提交远程数据格式
  • 21. 21树形对象——Tree 加载远程数据动态生成树Ext JS核心对象var tree = new Ext.tree.TreePanel({ el: 'tree', loader: new Ext.tree.TreeLoader({dataUrl: 'tree.jsp'}) }); var root = new Ext.tree.AsyncTreeNode({ id: '0', text:'我是根' }); tree.setRootNode(root); tree.render(); root.expand(false, false);远程数据地址作用目标自动展开设置演示示例:动态树
  • 22. 22窗口对象——Window 常用窗口类型 自定义窗口Ext JS核心对象演示示例:窗口演示
  • 23. 23菜单、工具条对象——Menu、ToolBar 下拉多级菜单 特殊菜单Ext JS核心对象演示示例:菜单演示
  • 24. 24Ext JS应用实例——学员管理系统学员管理系统——需求说明 学员信息包括: 学号、姓名、性别、年龄、政治面貌、籍贯和所属系 要求实现对学员信息的基本维护包括: 增加新的学员信息 检索学员信息 修改现存的学员信息 删除现存的学员信息
  • 25. 25Ext JS应用实例——学员管理系统学员管理系统——界面效果 演示示例:系统效果
  • 26. 26Ext JS应用实例——学员管理系统学员管理系统界——实现步骤 第一步:实现数据模型 第二步:实现业务处理 第三步:创建页面视图 第四步:调用业务实现功能
  • 27. 27Ext JS应用实例——学员管理系统创建页面视图——Viewport进行页面布局 Viewport用来对界面按上、下、左、右、中进行布局。用户可以根据实际需要任意取舍搭配。 var viewport = new Ext.Viewport({ layout: 'border', items: [ {region: 'north',contentEl: 'head'}, {region: ‘center‘,html:’grid’}, {region: ‘east‘,html:’form’}, {region: 'south',contentEl: 'foot'} ] });上方,作用在id=“head”的标鉴上
  • 28. 28Ext JS应用实例——学员管理系统创建页面视图——GridPanel显示数据 var grid = new Ext.grid.GridPanel({ title: '学生信息列表',region: 'center', loadMask: true,stripeRows:true, store: store, cm: columns, sm: new Ext.grid.RowSelectionModel({singleSelect:true}), viewConfig: { forceFit: true }, bbar: new Ext.PagingToolbar({ pageSize: 15, displayInfo: true, store: store }) });数据存储表头单行选择模式分页工具栏
  • 29. 29Ext JS应用实例——学员管理系统创建页面视图——GridPanel显示数据 var grid = new Ext.grid.GridPanel({ title: '学生信息列表',region: 'center', loadMask: true,stripeRows:true, store: store, cm: columns, sm: new Ext.grid.RowSelectionModel({singleSelect:true}), viewConfig: { forceFit: true }, bbar: new Ext.PagingToolbar({ pageSize: 15, displayInfo: true, store: store }) });数据存储表头单行选择模式分页工具栏
  • 30. 30Ext JS应用实例——学员管理系统创建页面视图——FormPanel创建表单 var form = new Ext.form.FormPanel({ items: [ {xtype: 'hidden',name: 'id'}, {fieldLabel: '学号',name: 'code'}, {fieldLabel: '姓名',name: 'name'}, { fieldLabel: '年龄', name: 'age', xtype: 'numberfield', allowNegative: false }, ……
  • 31. 31Ext JS应用实例——学员管理系统创建页面视图——FormPanel创建表单 { fieldLabel: '性别', name: 'sexText', hiddenName: 'sex', xtype: 'combo', store: new Ext.data.SimpleStore({ fields: ['value','text'], data: [['1','男'],['2','女']] }), emptyText: '请选择', mode: 'local', triggerAction: 'all', valueField: 'value', displayField: 'text', readOnly: true } ……
  • 32. 32Ext JS应用实例——学员管理系统创建页面视图——FormPanel创建表单 { fieldLabel: '政治面貌', name: 'political', xtype: 'combo', store: new Ext.data.SimpleStore({ fields: ['text'], data: [['群众'],['党员'],['团员']] }), emptyText: '请选择', mode: 'local', triggerAction: 'all', valueField: 'text', displayField: 'text', readOnly: true }
  • 33. 33Ext JS应用实例——学员管理系统创建页面视图——点击表格填充表单 // 单击修改信息 start grid.on('rowclick', function(grid, rowIndex, event) { var record =grid.getStore().getAt(rowIndex); form.getForm().loadRecord(record); form.buttons[0].setText('修改'); });获得行记录自动填充表单
  • 34. 34Ext JS应用实例——学员管理系统 // 修改 form.getForm().submit({ url: './jsp/save.jsp', success: function(f, action) { if (action.result.success) { Ext.Msg.alert('消息', action.result.msg, function() { grid.getStore().reload(); form.getForm().reset(); form.buttons[0].setText('添加');}); } }, failure: function() { Ext.Msg.alert('错误', "修改失败"); } });提交地址重新加载数据表单重置、更改按钮文字
  • 35. 35总结Ext JS是一个强大的js类库 Ext JS配置方便且兼容各种浏览器 Ext JS是基于面向对象编程(oop),并且以事件驱动模型为基础的。 Ext JS为创建富客户端应用(RIA)提供了丰富的组件对象 Ext JS的应用与服务器端技术无关,可以非常容易的改造现有Web应用的客户体验
  • 36. 36Thank you