1 / 46

ExtJS 培训

ExtJS 培训. Author ： weijun. 2009-4 电讯盈科企业解决方案. 目录. ExtJS 简介. ExtJS 简称 EXT ，它是一个非常优秀的 javascript 开发框架，主要用来开发具有绚丽外观的富客户端 WEB 程序。 ExtJS 提供了许多非常实用的可视化组件，为我们开发富客户端程序提供了许多功能强大的支持，关于 Extjs 的相关基本概念及使用方法详见 Extjs 的 API 文档。 特点： 1 、开发速度快 2 、界面效果绚丽 3 、组件式开发 缺点： 报错不明确调试有一定的难度。. ExtJS 简介.

nuncio
Download Presentation

ExtJS 培训

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ExtJS 培训 Author：weijun 2009-4 电讯盈科企业解决方案

  2. 目录

  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. 目录

  8. 信息提示框 • Ext.Msg.alert 注意：ExtJS中的信息提示框全部都是异步执行的，不会中断程序的执行，如果某些操作需要在信息提示框出现之后执行则相应的代码需要放置回调函数中。 <script type="text/javascript"> Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '../extjs2.0/resources/images/default/s.gif'; Ext.Msg.alert('提示','信息主体内容',function(){ alert('回调函数') }); }); </script>

  9. 信息提示框 • Ext.Msg.confirm <script type="text/javascript"> Ext.onReady(function(){ Ext.Msg.confirm('提示','请单击我，做出选择',callBack); function callBack(id){ alert('单击的按钮ID是：'+id); } }); </script>

  10. 信息提示框 • Ext.Msg.prompt <script type="text/javascript"> Ext.onReady(function(){ Ext.Msg.prompt('提示','输入一些内容看看：',callBack,this,true); function callBack(id,msg){ alert('单击的按钮ID是：'+id+'\n'+'输入的内容是：'+msg); } }); </script>

  11. 信息提示框 • Ext.Msg.wait <script type="text/javascript"> Ext.onReady(function(){ Ext.Msg.wait('请等待，操作需要很长时间！','提示',{ text : '进度条上的文字' }); }) </script>

  12. 信息提示框 • Ext.Msg.show（自定义信息提示框） <script type="text/javascript"> Ext.onReady(function(){ Ext.Msg.show({ title:'提示', msg:'我有三个按钮，和一个多行文本区。', modal:true, prompt:true, value:'请输入', fn:callBack, buttons:Ext.Msg.YESNOCANCEL, icon:Ext.Msg.QUESTION }) function callBack(id,msg){ alert('单击的按钮ID是：'+id+'\n'+'输入的内容是：'+msg); } }); </script>

  13. 目录

  14. 面板布局 • fit 布局（子面板充满父面板） <script type="text/javascript"> Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif'; var panel = new Ext.Panel({ layout : 'fit', title:'Ext.layout.FitLayout布局示例', frame:true,//渲染面板 height : 150, width : 250, applyTo :'panel-div', defaults : {//设置默认属性 bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色 }, items: [ { title : '子面板' } ] }) }); </script>

  15. 面板布局 • accordion布局（可折叠） <script type="text/javascript"> Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif'; var panel = new Ext.Panel({ layout : 'accordion', layoutConfig : { fill : true//子面板充满父面板的剩余空间 }, title:'Ext.layout.Accordion布局示例', frame:true,//渲染面板 height : 150, width : 250, applyTo :'panel-div', defaults : {//设置默认属性 bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色 }, items: [ {title : '嵌套面板一'}, {title : '嵌套面板二'} ] }) }); </script>

  16. 面板布局 • Card布局（卡片布局） <script type="text/javascript"> Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif'; var panel = new Ext.Panel({ layout : 'card', activeItem : 0,//设置默认显示第一个子面板 title:'Ext.layout.CardLayout布局示例', frame:true,//渲染面板 height : 150, width : 250, applyTo :'panel-div', defaults : {//设置默认属性 bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色 }, items: [{title : '嵌套面板一'}, {title : '嵌套面板二'} ], buttons:[{ text : '显示子面板一', handler : function(){ panel.layout.setActiveItem(0); } },{ text : '显示子面板二', handler : function(){panel.layout.setActiveItem(1);} }] }) }); </script>

  17. 面板布局 • column布局（列布局） <script type="text/javascript"> Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif'; var panel = new Ext.Panel({ title:'Ext.layout.ColumnLayout布局示例', layout : 'column', frame:true,//渲染面板 height : 150,width : 350, applyTo :'panel-div', defaults : {//设置默认属性 bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色 height : 100, frame:true//渲染面板 }, items: [{ title:'子面板一', width : 100//指定列宽为100像素 },{ title:'子面板二', columnWidth:.3//指定列宽为容器剩余宽度的30% },{ title:'子面板三', columnWidth:.7//指定列宽为容器剩余宽度的70% }] }) }); </script>

  18. 面板布局 • table布局（表格布局） <script type="text/javascript"> Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif'; var panel = new Ext.Panel({ title:'Ext.layout.TableLayout布局示例', layout : 'table', layoutConfig : {columns : 4}, //设置表格布局默认列数为4列 frame:true,//渲染面板 height : 150,width : 300, applyTo :'panel-div', defaults : {//设置默认属性 bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色 frame : true, height : 50 }, items: [ {title:'子面板一',colspan : 3},//设置跨列 {title:'子面板二',height : 100,rowspan : 2},//设置跨行 {title:'子面板三'}, {title:'子面板四'}, {title:'子面板五'} ] }) }); </script>

  19. 面板布局 • border布局 <script type="text/javascript"> Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif'; var panel = new Ext.Panel({ title : 'Ext.layout.BorderLayout布局示例', layout:'border',//表格布局 height : 250, width : 400, applyTo : 'panel-div', items: [{ title: 'north Panel',html : '上边',collapsible : true, region: 'north',//指定子面板所在区域为north height: 50 },{ title: 'South Panel',html : '下边', height: 50 region: 'south'//指定子面板所在区域为south },{ title: 'West Panel',html : '左边', width: 100, region:'west'//指定子面板所在区域为west },{ title: ‘east Panel’,html : ‘右边’, width: 100, region:'east'//指定子面板所在区域为east },{ title: 'Main Content',html : '中间', region:'center'//指定子面板所在区域为center }] }); }); </script>

  20. 面板布局 • Ext.Viewport（自动充满整个页面） <script type="text/javascript"> Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif'; new Ext.Viewport({ title : 'Ext.Viewport示例', layout:'border',//表格布局 items: [ { title: 'north Panel', html : '上边', region: 'north',//指定子面板所在区域为north height: 100 },{ title: 'West Panel', html : '左边', region:'west',//指定子面板所在区域为west width: 150 },{ title: 'Main Content', html : '中间', region:'center'//指定子面板所在区域为center }] }); }); </script>

  21. 面板布局 • Ext.TabPanel（页签面板） <script type="text/javascript"> Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif'; var tabPanel = new Ext.TabPanel({ height : 150, width : 300, activeTab : 0,//默认激活第一个tab页 animScroll : true,//使用动画滚动效果 enableTabScroll : true,//tab标签超宽时自动出现滚动按钮 applyTo : 'panel-div', items: [ {title: 'tab标签页1',html : 'tab标签页1内容'}, {title: 'tab标签页2',html : 'tab标签页2内容'}, {title: 'tab标签页3',html : 'tab标签页3内容'}, {title: 'tab标签页4',html : 'tab标签页4内容'}, {title: 'tab标签页5',html : 'tab标签页5内容'} ] }); }); </script>

  22. 目录

  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（弹出窗口） <script type="text/javascript"> Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif'; var win = new Ext.Window({ title : '弹出窗口', width : 200, height : 150, html : '模式窗口', modal : true//是否为模式窗口 }); win.show(); }); </script>

  29. 目录

  30. 数据模型 Reader 数据读取器 Proxy 代理 Store 数据源 Record 记录

  31. 数据模型 Proxy 代理 • 常用数据代理： • 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' })

  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数据 <dataset> <results>2</results> <row> <id>1</id> <name>Bill</name> <occupation>Gardener</occupation> </row> </dataset> 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. 目录

  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. 目录

  40. 信息展示步骤 Ext.Grid XML/JSON Ajax Action JSONHelper DB DAO ListBean PLSQL DBHelper

  41. 目录

  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. 目录

  45. 相关资源 • ExtJS官方论坛：http://www.extjs.com/forum/

  46. Q&A 谢 谢 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 Presentation

More Related