• 1. ExtJS 培训2009-4 电讯盈科企业解决方案
  • 2. 目录1ExtJS简介2信息提示框3面板布局4常用组件5数据模型6事件绑定7信息展示步骤8Ajax及工具方法9相关资源
  • 3. ExtJS简介 ExtJS简称EXT,它是一个非常优秀的javascript开发框架,主要用来开发具有绚丽外观的富客户端WEB程序。 ExtJS提供了许多非常实用的可视化组件,为我们开发富客户端程序提供了许多功能强大的支持,关于Extjs的相关基本概念及使用方法详见Extjs的API文档。 特点: 1、开发速度快 2、界面效果绚丽 3、组件式开发 缺点: 报错不明确调试有一定的难度。
  • 4. ExtJS简介必须引入的ExtJS库文件及样式文件 ext-all.css ext-base.js ext-all.js ext-lang-zh_CN.js
  • 5. ExtJS简介常用开发工具 Eclipse 插件 spket-1.6.16 编辑javascript Fullsource 查看动态生成的html代码
  • 6. ExtJS简介常用文档 DHTML 手册.chm extjs2.0 API
  • 7. 目录1ExtJS简介2信息提示框3面板布局4常用组件5数据模型6事件绑定7信息展示步骤8Ajax及工具方法9相关资源
  • 8. 信息提示框Ext.Msg.alert 注意:ExtJS中的信息提示框全部都是异步执行的,不会中断程序的执行,如果某些操作需要在信息提示框出现之后执行则相应的代码需要放置回调函数中。
  • 9. 信息提示框Ext.Msg.confirm
  • 10. 信息提示框Ext.Msg.prompt
  • 11. 信息提示框Ext.Msg.wait
  • 12. 信息提示框Ext.Msg.show(自定义信息提示框)
  • 13. 目录1ExtJS简介2信息提示框3面板布局4常用组件5数据模型6事件绑定7信息展示步骤8Ajax及工具方法9相关资源
  • 14. 面板布局fit 布局(子面板充满父面板)
  • 15. 面板布局accordion布局(可折叠)
  • 16. 面板布局Card布局(卡片布局)
  • 17. 面板布局column布局(列布局)
  • 18. 面板布局table布局(表格布局)
  • 19. 面板布局border布局
  • 20. 面板布局Ext.Viewport(自动充满整个页面)
  • 21. 面板布局Ext.TabPanel(页签面板)
  • 22. 目录1ExtJS简介2信息提示框3面板布局4常用组件5数据模型6事件绑定7信息展示步骤8Ajax及工具方法9相关资源
  • 23. 常用组件介绍Ext.Panel 标准面板组件 new Ext.Panel({ title:'面板头部(header)', tbar : ['顶端工具栏(top toolbars)'], bbar : ['底端工具栏(bottom toolbars)'], height:200, width:300, frame:true, applyTo :'panel', bodyStyle:'background-color:#FFFFFF', html:'sdfasdfasdf', tools : [ {id:'toggle'}, {id:'close'}, {id:'maximize'} ], buttons:[ new Ext.Button({ text:'面板底部(footer)' }) ] })
  • 24. 常用组件介绍Ext.grid.GridPanel 表格面板组件//创建表格数据 var data = [[1,'张三',24],[2,'李四',30],[3,'王五',29]]; //创建记录类型Person,mapping值为字段值对应数组中数据的索引位置 var Person = Ext.data.Record.create([ {name: 'personId',mapping: 0}, {name: 'personName',mapping: 1}, {name: 'personAge',mapping: 2}, ]); //创建Grid表格组件 new Ext.grid.GridPanel({ title : '简单Grid表格示例', applyTo : 'grid-div', width:230, height:150, frame:true, store: new Ext.data.Store({//配置数据集 reader: new Ext.data.ArrayReader({id:0},Person), data: data }), columns: [//配置表格列 {header: "id", width: 30, dataIndex: 'personId', sortable: true}, {header: "姓名", width: 80, dataIndex: 'personName', sortable: true}, {header: "年龄", width: 80, dataIndex: 'personAge', sortable: true} ] })
  • 25. 常用组件介绍Ext.tree.TreePanel 树形面板组件(读取本地数据)//创建根节点 var root = new Ext.tree.TreeNode({ text : '根节点' }); //为根节点添加子节点 root.appendChild(new Ext.tree.TreeNode({ text : '一级子节点A' })) root.appendChild(new Ext.tree.TreeNode({ text : '一级子节点B' })) //创建Tree面板组件 var tree = new Ext.tree.TreePanel({ title : '简单的树面板示例', width : 200, height : 100, applyTo : 'tree-div', root : root })
  • 26. 常用组件介绍Ext.tree.TreePanel 树形面板组件(加载远程数据)//创建根节点 var root = new Ext.tree.AsyncTreeNode({ text : '菜单根节点', id : 'root', //设置异步树节点的数据加载器 loader : new Ext.tree.TreeLoader({ dataUrl : ‘serverurl' }) }); //创建Tree面板组件 var tree = new Ext.tree.TreePanel({ title : '异步加载树节点示例', width : 200, height : 150, applyTo : 'tree-div', root : root });请求的服务器端数据格式: [ {id:'level1-1',text:'一级节点',leaf:true}, {id:'level1-2',text:'一级节点',leaf:false}, {id:'level1-4',text:'一级节点',leaf:true} ]
  • 27. 常用组件介绍Ext.form.FormPanel 表单面板组件Ext.QuickTips.init();//初始化信息提示功能 var form = new Ext.form.FormPanel({ title:'表单',//表单标题 height:100,//表单高度 width:300,//表单宽度 frame:true,//是否渲染表单 labelSeparator :':',//分隔符 labelWidth : 60,//标签宽度 labelAlign : 'right',//标签对齐方式 applyTo :'form', items:[ new Ext.form.TextField({//文本框 fieldLabel : '姓名',//标签内容 allowBlank : false,//是否允许为空 msgTarget :'side'//显示一个浮动的提示信息。 }), new Ext.form.NumberField({ fieldLabel : '年龄', allowBlank : false, msgTarget :'side' }) ] })
  • 28. 常用组件介绍Ext.Window(弹出窗口)
  • 29. 目录1ExtJS简介2信息提示框3面板布局4常用组件5数据模型6事件绑定7信息展示步骤8Ajax及工具方法9相关资源
  • 30. 数据模型Store 数据源Record 记录Reader 数据读取器Proxy 代理
  • 31. 数据模型常用数据代理: Ext.data.HttpProxy 用于读取远程数据 //创建http代理 new Ext.data.HttpProxy({ url : ‘personServer.do' }) Ext.data.MemoryProxy 用于读取本地数据 //定义内存数据变量 var data = [[1,'张三',24],[2,'李四',30],[3,'王五',29]]; //创建memory代理 var memoryProxy = new Ext.data.MemoryProxy(data) Ext.data.ScriptTagProxy 用于跨域读取数据(不常用) //创建ScriptTagProxy代理 var scriptTagProxy = new Ext.data.ScriptTagProxy({ //于当前服务器处于不同域中的url地址 url : 'http://192.168.0.102:8080/scriptTagProxyServer.jsp' })Proxy 代理
  • 32. 数据模型常用数据读取器 Ext.data.JsonReader 读取json数据 { 'results': 2, 'rows': [ { 'id': 1, 'name': 'Bill', occupation: 'Gardener' }, { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ] } Ext.data.ArrayReader 读取数组数据 [[1,'张三',24],[2,'李四',30],[3,'王五',29]] Ext.data.XmlReader 读取xml数据 2 1 Bill Gardener Reader 数据读取器
  • 33. 数据模型Ext.data.Store 标准数据源 new Ext.data.Store({ proxy : new Ext.data.HttpProxy({...}), reader : new Ext.data.JsonReader({...}) }) Ext.data.SimpleStore 简单数据源,内置了ArrayReader Ext.data.JsonStore json数据源,内置了JsonReader Ext.data.GroupingStore 分组数据源,提供了数据的分组功能 一般搭配Ext.grid.GroupingView使用Store 数据源
  • 34. 数据模型数据记录 由数据代理(proxy)获取的原始数据经过数据读取器(reader)解析后最终统一转化为标准的数据记录对象保存在数据源(store)中,供其他组件使用。 //创建记录类型Person var Person = Ext.data.Record.create([ {name: 'personName'}, {name: 'personAge'}, ]); //新建一条Person类型的记录 var myNewRecord = new Person({ personName : 'tom', personAge : 24 }); Record 记录
  • 35. 数据模型数据生成 由于在开发过程中大量的用到了json或xml作为数据传递方式,因此需要一种方便的数据转换方法生成为json或xml,目前我们提供了一些工具方法来完成这个转化过程,下面是一个将java的List集合转化为xml的示例: 定义一个javabean,必须提供get和set方法。 将数据填充到javabean中,并依次追加到List集合中。 调用工具方法完成数据转换,下面列出了目前主要的转换方法。 JSONHelper.getTextFromList(beanList) //输出extjs可用的JSON字符串 JSONHelper.getTextFromList(long recordCount, List beanList) JSONHelper.getXmlFromList(beanList) //输出extjs可用的xml JSONHelper.getXmlFromList(long recordTotal, List beanList) QueryResult //实现查询结果的简单封装,支持分页及xml、json输出。
  • 36. 目录1ExtJS简介2信息提示框3面板布局4常用组件5数据模型6事件绑定7信息展示步骤8Ajax及工具方法9相关资源
  • 37. 事件绑定为ExtJS组件添加事件处理函数(事件监听器)addListener( String eventName, Function handler, [Object scope], [Object options] ) 简写形式 on( String eventName, Function handler, [Object scope], [Object options] ) //绑定单个事件处理函数 el.on('click', this.onClick, this, { single: true, delay: 100, forumId: 4 }); //绑定多个事件处理函数 foo.on({ 'click' : { fn: this.onClick, scope: this, delay: 100 }, 'mouseover' : { fn: this.onMouseOver, scope: this } }); //简化的写法 component.on(‘click’,function(param){ //处理代码 });
  • 38. 事件解除解除已经绑定到ExtJS组件上的事件处理函数(监听器)removeListener( String eventName, Function handler, [Object scope] ) 简写形式 un( String eventName, Function handler, [Object scope] )
  • 39. 目录1ExtJS简介2信息提示框3面板布局4常用组件5数据模型6事件绑定7信息展示步骤8Ajax及工具方法9相关资源
  • 40. 信息展示步骤PLSQLDBHelperXML/JSONDAOListBeanActionJSONHelperAjaxExt.GridDB
  • 41. 目录1ExtJS简介2信息提示框3面板布局4常用组件5数据模型6事件绑定7信息展示步骤8Ajax及工具方法9相关资源
  • 42. Ajax及工具方法Ext.Ajax默认情况下Ext.Ajax是不支持同步提交的,如果需要进行同步提交需要进行扩展。 //发送请求 Ext.Ajax.request({ url :'Ext.Ajax.request.Server.jsp',//请求的服务器地址 params : {userName : 'tom',password : '123'},//请求参数 success : function(response ,options){ alert(response.responseText); alert('success'); }, failure : function(response ,options){ alert('failure'); } });
  • 43. Ajax及工具方法Ext.get(); 获取Element对应 Ext.getDom(); 获取dom对象 Ext.getCmp(); 获取组件 Ext.select(); 获取集合对象 Ext.query(); 获取数组对象 Ext.util.JSON.decode(); 将字符串转化为json对象 Ext.util.JSON.encode(); 将json对象转化为字符串
  • 44. 目录1ExtJS简介2信息提示框3面板布局4常用组件5数据模型6事件绑定7信息展示步骤8Ajax及工具方法9相关资源
  • 45. 相关资源ExtJS官方论坛:http://www.extjs.com/forum/
  • 46. 谢 谢The contents of this Presentation are confidential and constitute property of PCCW Solutions Limited. It is provided for your exclusive use on the basis that it will be held in complete confidence and is used solely for the purpose of informing you on the subject of this Presentation. You acknolwedge and agree that PCCW Solutions Limited retains all intellectual property now or hereinafter subsiting in the PresentationQ&A