ExtJS培训文档.ppt

ExtJS 培训,2009-4电讯盈科企业解决方案,Author：,目录,ExtJS简介,ExtJS简称EXT，它是一个非常优秀的javascript开发框架，主要用来开发具有绚丽外观的富客户端WEB程序。ExtJS提供了许多非常实用的可视化组件，为我们开发富客户端程序提供了许多功能强大的支持，关于Extjs的相关基本概念及使用方法详见Extjs的API文档。特点：1、开发速度快2、界面效果绚丽3、组件式开发缺点：报错不明确调试有一定的难度。,ExtJS简介,必须引入的ExtJS库文件及样式文件ext-all.css ext-base.js ext-all.js ext-lang-zh_CN.js,ExtJS简介,常用开发工具Eclipse 插件 spket-1.6.16 编辑javascriptFullsource 查看动态生成的html代码,ExtJS简介,常用文档DHTML 手册.chmextjs2.0 API,目录,信息提示框,Ext.Msg.alert注意：ExtJS中的信息提示框全部都是异步执行的，不会中断程序的执行，如果某些操作需要在信息提示框出现之后执行则相应的代码需要放置回调函数中。,Ext.onReady(function()Ext.BLANK_IMAGE_URL=./extjs2.0/resources/images/default/s.gif;Ext.Msg.alert(提示,信息主体内容,function()alert(回调函数););,信息提示框,Ext.Msg.confirm,Ext.onReady(function()Ext.Msg.confirm(提示,请单击我，做出选择,callBack);function callBack(id)alert(单击的按钮ID是：+id););,信息提示框,Ext.Msg.prompt,Ext.onReady(function()Ext.Msg.prompt(提示,输入一些内容看看：,callBack,this,true);function callBack(id,msg)alert(单击的按钮ID是：+id+n+输入的内容是：+msg););,信息提示框,Ext.Msg.wait,Ext.onReady(function()Ext.Msg.wait(请等待，操作需要很长时间！,提示,text:进度条上的文字);),信息提示框,Ext.Msg.show（自定义信息提示框）,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););,目录,面板布局,fit 布局（子面板充满父面板）,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:子面板);,面板布局,accordion布局（可折叠）,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:嵌套面板二);,面板布局,Card布局（卡片布局）,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););,面板布局,column布局（列布局）,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%);,面板布局,table布局（表格布局）,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:子面板五);,面板布局,border布局,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,/指定子面板所在区域为northheight:50,title:South Panel,html:下边,height:50region: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););,面板布局,Ext.Viewport（自动充满整个页面）,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,/指定子面板所在区域为northheight:100,title:West Panel,html:左边,region:west,/指定子面板所在区域为westwidth:150,title:Main Content,html:中间,region:center/指定子面板所在区域为center););,面板布局,Ext.TabPanel（页签面板）,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内容););,目录,常用组件介绍,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）),常用组件介绍,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),常用组件介绍,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),常用组件介绍,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,常用组件介绍,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),常用组件介绍,Ext.Window（弹出窗口）,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(););,目录,数据模型,Store数据源,Record记录,Reader数据读取器,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),Proxy代理,数据模型,常用数据读取器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,王五,29Ext.data.XmlReader 读取xml数据 2 1 Bill Gardener,Reader数据读取器,数据模型,Ext.data.Store 标准数据源new Ext.data.Store(proxy:new Ext.data.HttpProxy(.),reader:new Ext.data.JsonReader(.)Ext.data.SimpleStore 简单数据源，内置了ArrayReaderExt.data.JsonStore json数据源，内置了JsonReaderExt.data.GroupingStore 分组数据源，提供了数据的分组功能 一般搭配Ext.grid.GroupingView使用,Store数据源,数据模型,数据记录由数据代理（proxy）获取的原始数据经过数据读取器（reader）解析后最终统一转化为标准的数据记录对象保存在数据源（store）中，供其他组件使用。/创建记录类型Personvar Person=Ext.data.Record.create(name:personName,name:personAge,);/新建一条Person类型的记录var myNewRecord=new Person(personName:tom,personAge:24);,Record记录,数据模型,数据生成由于在开发过程中大量的用到了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可用的xmlJSONHelper.getXmlFromList(long recordTotal,List beanList)QueryResult/实现查询结果的简单封装,支持分页及xml、json输出。,目录,事件绑定,为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)/处理代码);,事件解除,解除已经绑定到ExtJS组件上的事件处理函数（监听器）,removeListener(String eventName,Function handler,Object scope)简写形式 un(String eventName,Function handler,Object scope),目录,信息展示步骤,PLSQL,DBHelper,XML/JSON,DAO,ListBean,Action,JSONHelper,Ajax,Ext.Grid,DB,目录,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););,Ajax及工具方法,Ext.get();获取Element对应Ext.getDom();获取dom对象Ext.getCmp();获取组件Ext.select();获取集合对象Ext.query();获取数组对象Ext.util.JSON.decode();将字符串转化为json对象Ext.util.JSON.encode();将json对象转化为字符串,目录,相关资源,ExtJS官方论坛：http:/,谢 谢,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,Q&A,