ExtJS培训进阶教程.docx

Extjs入门培训软件就是服务30 / 30目录1什么是ExtJs32ExtJs的使用32.1获取ExtJs32.2应用Extjs32.3演示HelloWorld43get,getDOM,getCmp43.1getDom方法43.2get方法53.3getCmp方法54事件105ExtJs所包含组件105.1ExtJS组件分类106ExtJs常用组件介绍126.1Panel组件126.1.1panel示例136.1.2panel的布局146.1.3panel属性简介166.2ViewPort组件176.3表格控件及其内部属性186.3.1简单的Grid186.3.2Grid的功能详解216.4按钮287Ext.Ajax.request308Ext同步/异步请求311 什么是ExtJsExtJs是可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。ExtJs是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把ExtJs用在.Net、Java、Php等各种开发语言开发的应用中。2 ExtJs的使用2.1 获取ExtJs获取ExtJs网址：/download公司使用ExtJs版本为2.02.2 应用Extjs 应用extjs需要在页面中引入extjs的样式及extjs库文件，样式文件为resources/css/ext-all.css，extjs的js库文件主要包含两个，adapter/ext/ext-base.js及ext-all.js(ext/build/locale/ext-lang-zh_CN.js)，其中ext-base.js表示框架基础库，ext-all.js是 extjs的核心库。ext-base.js顺序必须在ext-all.js的前面，resources/css/ext-all.css位置随意。在ExtJs库文件及页面内容加载完后，ExtJS会执行Ext.onReady中指定的函数，一般情况下每一个用户的ExtJS应用都是从Ext.onReady开始的。2.3 演示HelloWorld3 get,getDOM,getCmpv 要学习及应用好Ext框架，必须需要理解Html DOM、Ext Element及Component三者之间的区别。每一个HTML页面都有一个层次分明的DOM树模型，浏览器中的所有内容都有相应的DOM对象，动态改变页面的内容，正是通过使用脚本语言来操作DOM对象实现。(通常使用getElementById/Ext.getDOM获得DOM对象)仅仅有DOM是不够的，比如要把页面中的某一个节点移到其它位置，要给某一个节点添加阴影效果，要隐藏或显示某一个节点等，我们都需要通过几句javascript才能完成。因此，Ext在DOM的基础上，创建了Ext Element，可以使用Element来包装任何DOM，Element对象中添加了一系列快捷、简便的实用方法。3.1 getDom方法getDom方法能够得到文档中的DOM节点，该方法中包含一个参数，该参数可以是DOM节点的id、DOM节点对象或DOM节点对应的Ext元素(Element)等。 (与 getElementById是一个效果)；Ext.onReady(function()var e=new Ext.Element(hello);Ext.getDom(hello);Ext.getDom(e);Ext.getDom(e.dom); );/Html页面中包含一个id为hello的div，代码如下： aaa3.2 get方法get方法中只有一个参数，这个参数是混合参数，可以是 DOM节点的id、也可以是一个Element、或者是一个DOM 节点对象等。get方法其实是Ext.Element.get的简写形式。Ext.onReady(function()var e=new Ext.Element(hello);Ext.get(hello);Ext.get(document.getElementById(hello);Ext.get(e); ); /Html页面中包含一个id为hello的div3.3 getCmp方法getCmp方法用来获得一个Ext组件，也就是一个已经在页面中初始化了的Component或其子类的对象，getCmp方 法中只有一个参数，也就是组件的id。 v getCmp方法其实是Ext.ComponentMgr.get方法的简写形 式。 v Ext.onReady(function() var myPanel=new Ext.Panel( id:“myFirstPanel”, title:“旧的标题, renderTo:hello, width:300, height:200 ); Ext.getCmp( myFirstPanel ).setTitle(新的标题); ); v vExt.Element占Ext Core库的篇幅很大，其中方法 就占据了大部份。因此我们将这些方法可分为下面几类：DOM查询或遍历（如query、select、findParent）v CSS（如setStyle、addClass）v DOM操控（如createChild、remove）v 方位、尺寸（如getHeight、getWidth）获取下一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。 Ext.get(elId).next(); 类似的还有: Ext.get(elId).prev();/上一个侧边节点 Ext.get(elId).first();/第一个节点 Ext.get(elId).last();/最后一个节点 Ext.get(elId).parent();/父节点,等等。v 比如要获取页面上所有的p标签,则可以使用:var ps = Ext.select(p);这样你就可以对所要获取的元素进行操了,select()方法返回的是 Ext.CompositeElement对象,可以通过其中的each()方法对其所包含的元素进 行遍历:ps.each(function(el) el.highlight();/高亮 );当然,如果你要是对获取的所有元素进行相同的操作,可以直接应用于 CompositeElement对象上,如:ps.highlight();/select方法返回的结果可直接如同Element般地操作 Ext.query和Ext.select的作用同是根据CSS选择符,基本的XPath,HTML属性等 查找出一个或多个元素。区别在于返回类型上。分别是：query方法返回的是JavaScript标准的数组类型；select方法返回的是CompositeElement类型。 v CompositeElement类型属于Ext自定义的类型，简单地说是以一个 Ext.Element实例代表集合中多个元素，可实现Element对象上所有的接口， 也就是说CompositeElement在Ext中用于表示元素的集合中不论有多少个元 素，均被视为一个单独元素处理。v 它的用法和单个的Element对象一样。select方法返回的结果可直接如同 Element般地操作，一般比query方法常用。v Dom Query是Ext Core提供的HTML或XML文档选择器，它支持大部分的CSS 3选择器规则，同时提供了一些自定义方式. Dom Query主要有4种选择方式：元素标记、元素属性、伪对象、CSS值1.通过元素标记选择，主要有以下6种方法：（1）*：选择任何元素。其使用方法请看下面代码。 Ext.select(*); （2）E：元素的标记为E。其使用方法请看下面代码。 Ext.select(div); （3）E F：选择包含在标记E中的标记F。其使用方法请看下面代码。 Ext.select(div a);/将选择div下的a元素 （4）EF：选择包含在标记E中的直接子标记F。其使用方法请看下面代码。 Ext.select(diva);/将选择div下的直接子元素a （5）E+F：选择所有紧接在元素E后的元素F。其使用方法请看下面代码。 Ext.select(div+a);/将选择紧接在div下的元素av 2.通过元素属性选择，主要有以下7种语法。（1）Efoo：选择带有属性foo的元素。其使用语法请看下面代码。 Ext.select(divid);/选择有id属性的div元素 （2）Efoo=bar：选择foo的属性值为bar的元素。其使用语法请看下面代码。 Ext.select(inputchecked=true);/选择checked属性值为true的元素 （3）Efoo=bar：选择foo的属性值以bar开头的元素。其使用语法请看下面 代码。 Ext.select(inputname=form1); /选择name属性值以form1开头的元素 （4）Efoo$=bar：选择foo的属性值以bar结尾的元素。其使用语法请看下面 代码。 Ext.select(inputname$=form1); /选择name属性值以form1结尾的元素 （5）Efoo*=bar：选择foo的属性值包含字符串bar的元素。其使用语法请看 下面代码。 Ext.select(inputname*=form1); /选择name属性值包含字符串form1的元素 （6）Efoo%=2：选择foo的属性值能整除2的元素。其使用语法请看下面代码。3.通过伪对象选择，主要有以下18种语法。 （1）Ext.select(ul li:first-child); /选择所有ul下的第一个li子节点 （2）Ext.select(ul li:last-child); /选择所有ul下的最后一个li子节点 （3）Ext.select(ul li:nth-child(2); /选择所有ul下的第2个li子节点 （4）Ext.select(ul li:nth-child(odd); /选择所有ul下的奇数行li子节点 （5）Ext.select(ul li:nth-child(evan); /选择所有ul下的偶数行li子节点 （6）Ext.select(ul li:only-child); /选择所有ul下只有一个子节点的li节点 （7）Ext.select(input:checked);/选择所有checked属性值为true的元素 （8）Ext.select(input:first); /选择第一个input元素 （9）Ext.select(input:last); /选择最后一个input元素 （10）E:nth(n)：选择匹配的第n（n1）个元素E。其使用语法请看下面代码。 Ext.select(input:nth(2); /选择第2个input元素 （11）E:odd：是语法“:nth-child(odd)”的简写。 （12）E:evan：是语法“:nth-child(evan)”的简写。（13） Ext.select(div:contains(list); /选择innerHTML属性包含“list”的div （14）Ext.select(div:nodeValue(test); /选择包含文本节点且值为“test”的4.通过CSS值进行选择。主要有以下6种语法。 v （1）E:display=none：选择display值为none的元素E。其使用语法请看下 面代码。Ext.select(div:display=none); /选择display值为none的元素E v （2）Ext.select(div:display=none); /选择display值以none开始的元素E（3）Ext.select(div:display$=none); /选择display值以none结尾的元素E v （4）Ext.select(div:display*=none); /选择display值包含字符串none的元 素E v（5）Ext.select(div:display%=none); /选择display值整除2的元素E v （6）Ext.select(div:display!=none); /选择display值不等于none的元素E Domquery的语法可以单独使用，也可以组合在一起使用，例如以下代码： Ext.select(div,span); /选择所有div元素与span元素 Ext.select(div.red:first-childdisplay=none); /选择class为red，且是第1个子节点，display属性为none的div如果没有指定选择器开始搜索的根节点，默认是从body节点开始，这就等于 每次都要做全文搜索，其性能可想而知，是相当低效的 4 事件HTML元素的标准事件是指mouseover、mousedown、click、blur、focus、 change等能够直接对HTML元素发生的事件。在ExtJS中，这些事件的处理可以用如下的代码：注册一个事件处理函数使用： v Ext.get(myElement).on(click, myHandler, myScope); myElement是要注册 的元素的ID，click是事件的名称（注意，和HTML元素中的声明onXXX不同， 这里不需要on），myHandler是处理函数的函数名称，myScope是一个可选的参数，指定处理函数绑定的对象，也就是处理函数的作用域，如果不提供 这个参数，则是默认的window。撤销一个事件处理函数： Ext.get(myElement).un(click, myHandler, myScope) 参数的意义同上。 5 ExtJs所包含组件5.1 ExtJS组件分类EXTJS有近40种组件，而这些组件又可以大致分成三大类，即基本组件、工具栏组件、表单及元素组件。EXIJS的基本组件：xtype Class 说明- - -box Ext.BoxComponent 具有边框属性的组件button Ext.Button 按钮colorpalette Ext.ColorPalette 调色板component Ext.Component 组件container Ext.Container 容器cycle Ext.CycleButtondataview Ext.DataView 数据显示视图datepicker Ext.DatePicker 日期选择面板editor Ext.Editor 编辑器editorgrid Ext.grid.EditorGridPanel 可编辑的表格grid Ext.grid.GridPanel 表格paging Ext.PagingToolbar 工具栏中的间隔panel Ext.Panel 面板progress Ext.ProgressBar 进度条splitbutton Ext.SplitButton 可分裂的按钮tabpanel Ext.TabPanel 选项面板treepanel Ext.tree.TreePanel 树viewport Ext.ViewPort 视图window Ext.Window 窗口 工具栏组件是为了构造工具栏而准备的，在Windows桌面软件中，工具栏随处可见，以其方便性与集成性为用户所称道。EXTJS的工具栏组件能够在Web上构造其表现和功能与桌面软件完全一样的工具栏。工具栏组件有：-toolbar Ext.Toolbar 工具栏tbbutton Ext.Toolbar.Button 按钮tbfill Ext.Toolbar.Fill 文件tbitem Ext.Toolbar.Item 工具条项目tbseparator Ext.Toolbar.Separator 工具栏分隔符tbspacer Ext.Toolbar.Spacer 工具栏空白tbsplit Ext.Toolbar.SplitButton工具栏分隔按钮tbtext Ext.Toolbar.TextItem 工具栏文本项 在传统Web UI中，表单时重要的界面元素了。ExtJS的表单组件对普通HTML的表单进行了封装，不仅提供了更靓丽的外观表现，同时也扩充了功能。使用EXTJS时限Web应用，表单组件也是使用最为频繁的组件了。表单及字段组件包含：-form Ext.FormPanel Form面板checkbox Ext.form.Checkboxcheckbox录入框combo Ext.form.ComboBoxcombo选择项datefield Ext.form.DateField 日期选择项field Ext.form.Field 表单字段fieldset Ext.form.FieldSet 表单字段组hidden Ext.form.Hidden 表单隐藏域htmleditor Ext.form.HtmlEditor html编辑器numberfield Ext.form.NumberField 数字编辑器radio Ext.form.Radio 单选按钮textarea Ext.form.TextArea 区域文本框textfield Ext.form.TextField 表单文本框timefield Ext.form.TimeField 时间录入项trigger Ext.form.TriggerField 触发录入项6 ExtJs常用组件介绍6.1 Panel组件面板本身是一个容器，应用程序界面一般由一个个面板，通过不同的方式组合而成，里面可以包含各种其他的组件；面板一般由以下几个部分组成：一个顶部工具栏、一个底部工具栏、面板头部（即title）、面板底部、面板主区域。6.1.1 panel示例 简单的panel tabPanel panel的组成6.1.2 panel的布局panel的布局主要有十种之多，主要包括ContainerLayout (容器布局)、FitLayout (自适应布局)、AccordionLayout (折叠布局)、CardLayoutLayout (卡片式布局)、AbsoluteLayout (绝对位置布局)、FormLayout(表单布局)、ColumnLayout (列布局)、BoderLayout (边框布局)、TableLayout (表格布局），下面介绍几个常用的布局方式： ContainerLayout (容器布局)提供容器作为布局的基础逻辑，通常会被扩展而不通过new 关键字直接创建，一般作为默认布局存在; ColumnLayout (列布局) TableLayout (表格布局） BoderLayout (边框布局)BorderLayout边框布局将布局分为5部分：east,south,west,north,center6.1.3 panel属性简介1.autoLoad：有效的url字符串，把那个url中的body中的数据自动加载显示2.autoScroll:设为true则内容溢出的时候产生滚动条，默认为false3.bbar:底部条，显示在主体内，/代码：bbar:text:底部工具栏bottomToolbar,工具条中也可以放置相应的按钮，以及其他的组件，分页条等等4.tbar:顶部条，显示在主体内，/代码:tbar:text:顶部工具栏topToolbar,5.buttons:按钮集合，自动添加到footer中（footer参数，显示在主体外）/代码：buttons:text:按钮位于footer;buttons:new Ext.Button(text:确定)6.buttonAlign:footer中按钮的位置，枚举值为：left,right,center,默认为right面板中按钮的显示位置，不过按钮的显示并没有在panel的主体中，而是显示在底部的工具条上7.collapsible：设为true，显示右上角的收缩按钮，默认为false8.draggable:true则可拖动，但需要你提供操作过程，默认为false9.html:主体的内容10.id：id值，通过id可以找到这个组件，建议一般加上这个id值；注：页面中不能出现两个id相同的组件否则页面就会发生冲突，导致某些组件的位置等显示不正确。11.width：宽度12.height：高度13.title:标题14.titleCollapse：设为true，则点击标题栏的任何地方都能收缩，默认为false.15.applyTo：（id）渲染到某个html元素中16.contentEl：（id）将某个html元素里面的内容在panel中呈现出来，17.renderTo：（id）渲染到某个html元素/applyTo,renderTo这两个和contentEl方向是相反的，在表面上看applyTo和renderTo没有太大的区别。6.2 ViewPort组件在前面的示例中，为了显示一个面板，我们需要在页面上添加一个，然后把 Ext控件渲染到这个div上。VeiwPort代表整个浏览器显示区域，该对象渲染到页面的body区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort实例，Viewport不需要再指定renderTo。 在Viewport 上常用的布局有fit、border 等。fit布局示例：border布局示例：6.3 表格控件及其内部属性EXT中的表格功能非常强大，包括排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等使用功能。6.3.1 简单的Grid首先，grid表格是二维的，横着的是行，竖着的是列，就像设计数据库表一样，要设置我们的表有几列。1、创建表格的列信息： 代码如下:var cm=new Ext.grid.ColumnModel( header:编号,dataIndex:id, header:名称,dataIndex:name, header:描述,dataIndex:desn ); 2、添加数据信息： 代码如下:var data= 1,name1,desn1, 2,name2,desn2, 3,name3,desn3, 4,name4,desn4, 5,name5,desn5 ; 此处定义了一个二维数组，显示到grid中就应该是5行3列，其中的列，分别对应id、name、desn。3、创建数据存储对象：（列和数据联系的桥梁） 代码如下:var ds = new Ext.data.Store( proxy:new Ext.data.MemoryProxy(data), reader:new Ext.data.ArrayReader(, name:id, name:name, name:desn ) ); ds.load();/这个相当的重要 Ext.data.Store有两个属性，proxy：定义从哪里获得数据，此处为从内存获取数据；reader定义如何解析数据。ds.load()用于进行数据的初始化。若与后台结合，proxy定义如下：proxy : new Ext.data.HttpProxy( url:url),reader定义如下：reader : new Ext.data.JsonReader( totalProperty: totalCount, root: root, fields: extFields/对应需要显示的实体属性，如:/var extFields = id,name, desn;)注:后台返回数据形式为：json = totalCount: + count + ,root: +jsonArray + ;jsonArray的格式为root:id:id,name:name,desn: desn；可用如下形式进行转化：JsonConfig jsonConfig = new JsonConfig();jsonConfig.registerJsonValueProcessor(Date.class, new DateJsonValueProcessor(yyyy-MM-dd);JSONArray jsonArray = JSONArray.fromObject(list, jsonConfig);导入jar包为：json-lib-2.3-jdk15.jar、commons-beanutils-1.8.0.jar、commons-collections-3.2.1.jar、commons-lang-2.3.jar、commons-logging-1.1.1.jar、ezmorph-1.0.6.jar4、表格的列模型定义好了，原始数据和数据的转换也已经完成，剩下的只需要把它们装配在一起，我们的Grid就创建成功了。 代码如下:var grid=new Ext.grid.GridPanel( renderTo:grid, store: ds, cm:cm); 5、注意：Ext.grid.Grid的renderTo属性指示EXT将表格渲染到什么地方，所以，在HTML里应该有一个与之对应。 6.3.2 Grid的功能详解 部分功能属性1、默认情况下，Grid是可以拖放列，也可以改变列的宽度，如果要禁用这两个功能，在定义Grid对象时分别设置enableColumnMove和enableColumnResize为false即可。 2、如果希望显示斑马线效果，可以加上stripeRows:true 自主决定每列的宽度1、如果要定义宽度，只要设置该列的width属性即可，如下面的代码所示。效果图如图2所示。代码如下:var cm=new Ext.grid.ColumnModel( header:编号,dataIndex:id,width:60, header:名称,dataIndex:name,width:180, header:描述,dataIndex:desn,width:200 );2、这样需要自己去计算每列的宽度，如果想让每列自动填满Grid,只需要viewConfig中的forceFit即可。使用forceFit后，Grid会根据你在cm里设置的width按比例分配，非常智能。实现代码如下： 代码如下:var grid=new Ext.grid.GridPanel( renderTo:grid, stripeRows:true,/斑马线效果 loadMask:true, store: ds, height:600, cm:cm, viewConfig: forceFit:true ); 3、我们也可以考虑autoExpandColumn,它可以让指定列的宽度自动伸展，从而填充整个表格。代码如下 代码如下:var grid=new Ext.grid.GridPanel( renderTo:grid, stripeRows:true,/斑马线效果 loadMask:true, store: ds, height:600, cm:cm, autoExpandColumn:desn / viewConfig: / forceFit:true / ); 注意：autoExpandColum只能指定一列的id,注意，必须是id,原来我们设置的cm里面都没有id,现在为了使用autoExpandColumn,要给cm的desn设置id.于是在渲染时desn就可以自动延伸，否则会出错。 代码如下:var cm=new Ext.grid.ColumnModel( header:编号,dataIndex:id,width:60, header:名称,dataIndex:name,width:180, id:desn,header:描述,dataIndex:desn,width:200 ); Grid支持按列排序在EXT中可以很方便地实现排序功能，只需要在定义列模型时增加sortable属性，如下面代码所示： 代码如下:var cm=new Ext.grid.ColumnModel( header:编号,dataIndex:id,width:60,sortable:true, header:名称,dataIndex:name,width:180, id:desn,header:描述,dataIndex:desn,width:200 );grid在后台进行排序，除了在列中增加sortable属性外，还要在Ext.data.Store中添加remoteSort:true属性，代码如下：var ds = new Ext.data.Store(url : grid1.jsp,reader : extReader,remoteSort:true);设置remoteSort后，加载数据时，会向后台传递两个参数：sort、dirsort：表示需要排序的字段dir：表示排序ASC/DESC正序或逆序 显示时间类型数据尽管返回的JSON里都是数字和字符串，但是在EXT中我们同样可以从后台取得日期类型的数据，然后交给Grid进行格式化。 1、首先定义一组数据，其中最后一列是日期格式的数据。 代码如下:var data= 1,name1,desn1,2009-09-17T02:58:04, 2,name2,desn1,2009-09-17T02:58:04, 3,name3,desn1,2009-09-17T02:58:04, 4,name4,desn1,2009-09-17T02:58:04, 5,name5,desn1,2009-09-17T02:58:04 ; 2、接着我们在reader里面增加一行配置，除了设置name以外，还设置了type和dateFormat两个属性。代码如下： 代码如下:var store1= new Ext.data.Store( proxy:new Ext.data.MemoryProxy(data), reader:new Ext.data.ArrayReader(, name:id, name:name, name:desn, name:date,type:date,dateFormat:Y-m-dTH:i:s ) ); 3、同样的，我们还需要在cm里面增加一行配置： 代码如下:var cm=new Ext.grid.ColumnModel( header:编号,dataIndex:id,width:60,sortable:true, header:名称,dataIndex:name,width:180, id:desn,header:描述,dataIndex:desn,width:200, header:时间,dataIndex:date,type:date,renderer:Ext.util.Format.dateRenderer(Y年m月d日) ); 单元格中改变字的颜色及显示按钮我们在cm中增加性别及操作一列，并为这两列增加renderer属性，代码如下：var cm=new Ext.grid.ColumnModel( header:序号,dataIndex:id,sortable:true, header:名称,dataIndex:name, header:性别,dataIndex:sex,renderer:showSex,id:desn,header:描述,dataIndex:desn, header:时间,dataIndex:date,type:date,renderer:Ext.util.Format.dateRenderer(Y年m月d日),header:操作,dataIndex:desn,renderer:showDesn );function showSex(value)if (value = 男) return 男; else return 女;function showDesn(value,cellmeta,record,rowIndex,columnIndex,store) var str = ;return str;1.value是当前单元格的值2.record是获得这行的所有数据，此行的值可以用record.dataid来获得3.rowIndex是行号，从零开始4.columnIndex是列号，从零开始5.store表格里的所有数据都可以通过它来调用，store.getAt(0)取得的为第1行的record值； 自动显示行号和复选框实际上，行号和复选框都是renderer的延伸。当然，复选框的功能要复杂得多。 1、自动显示行号：修改列模型cm,加入RowNumberer对象；2、复选框：我们创建一个CheckboxSelectionModel()代码如下:var sm=new Ext.grid.CheckboxSelectionModel(); var cm=new Ext.grid.ColumnModel( new Ext.grid.RowNumberer(), sm, header:编号,dataIndex:id,width:40,sortable:true, header:名称,dataIndex:name,width:180, id:desn,header:描述,dataIndex:desn,width:200, header:时间,dataIndex:date,type:date,renderer:Ext.util.Format.dateRenderer(Y年m月d日) ); grid加载时的遮罩效果定义遮罩效果mask：var mask = new Ext.LoadMask(grid, msg:正在加载数据，请稍侯); mask.show();当加载完成时，取消掉遮罩ds.on(load, function() Ext.get(grid).unmask(););同时，在grid中添加mask属性：var grid=new Ext.grid.GridPanel( renderTo:grid, stripeRows:true,/斑马线效果 loadMask:true, store: ds, height:600, cm:cm, loadMask : msg:正在加载数据，请稍侯); 表格分页表格分页Grid控件对性能要求较高，如果在一个Grid里面显示上千条记录，效率会有明显下降，所以必须考虑分页问题。 1、为Grid添加分页工具条：在前面代码的基础上修改grid代码： 代码如下:var grid1=new Ext.grid.GridPanel( renderTo:grid1, stripeRows:true,/斑马线效果 loadMask:true, store: store1, height:200, cm:cm, viewConfig: forceFit:true