《ExtJs中文教程》PPT课件.ppt

《《ExtJs中文教程》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《ExtJs中文教程》PPT课件.ppt（95页珍藏版）》请在装配图网上搜索。

1、Ext JS开发框架简介,主讲：毛冬情,框架简介、环境搭建、helloWord示例,EXT核心组件应用,Ext框架,EXT框架基础,Ext框架简介,怎样搭建EXT运行环境及开发环境,helloWord示例程序,框架简介、环境搭建及HelloWord,Ext框架简介,什么是ext？ Ext是一个Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。 Ext是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中。 Ext最新版本是ext3.0,Ext框架简

2、介,Ext提供一系列的对象类，这些基本上都是用于处理WEB页面控件的。 Ext的发布包括三个方面的内容：API参考手册、示例程序及开发包。,Ext框架简介,EXT API参考手册,Ext框架简介,示例程序,Ext示例程序包共包括十二大类近100示例程序 。,Ext框架简介,开发包,adapter ：负责将里面提供第三方底层库（包括Ext自带的底层库）映射为Ext所支持的底层库。 build ：压缩后的ext全部源码(里面分类存放)。 docs ： API帮助文档。 exmaples：提供使用ExtJs技术做出的小实例。 resources：Ext UI资源文件目录，如CSS、图片文件都存放在这

3、里面。 source ：无压缩Ext全部的源码(里面分类存放) 遵从Lesser GNU （LGPL） 开源的协议。 ext-all.js ：压缩后的Ext全部源码。 ext-all-debug.js ：无压缩的Ext全部的源码(用于调试)。 ext-core.js ：压缩后的Ext的核心组件，包括sources/core下的所有类。 ext-core-debug.js ：无压缩Ext的核心组件，包括sources/core下的所有类。,Ext框架简介,怎样搭建EXT运行环境及开发环境,开发环境 把Ext的开发包直接复制到WEB工程的目录下,helloWord示例程序,新建HTML文件并在页面

4、中引入ExtJS的样式及ExtJS库文件 样式文件为resources/css/ext-all.css 库文件主要包含两个：adapter/ext/ext-base.js及ext-all.js 其中ext-base.js是框架基础库，ext-all.js是extjs的核心库。, ,helloWord示例程序,helloWord在HTML直接嵌入代码实现, Ext.onReady(function() Ext.Msg.alert(helloWord,Hello Word!); ); ,helloWord示例程序,Ext类库简介,Ext框架基础及核心简介,Ext组件简介,Ext入门基础,Ext类库

5、简介,ExtJS 由一系列的类库组成，一旦页面成功加载了ExtJS 库后，我们就可以在页面中调用ExtJS 的类及控件来实现需要的功能。ExtJS 的类库由以下几部分组成： 底层API(core) 控件(widgets) 实用工具(Utils),Ext类库简介,底层API(core)：底层API 中提供了对DOM 操作、查询的封装、事件处理、DOM 查询器等基础的功能。其它控件都是建立在这些底层api 的基础上，底层api 位于源代码目录的core 子目录中，包括DomHelper.js、Element.js 等文件。,Ext类库简介,控件(widgets)：控件是指可以直接在页面中创建的可视

6、化组件，比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。控件位于源代码目录的widgets 子目录中。,Ext类库简介,实用工具Utils：Ext 提供了很多的实用工具，可以方便我们实现如数据内容格式化、JSON数据解码或反解码、对Date、Array、发送Ajax 请求、Cookie 管理、CSS 管理等扩展等功能,Ext入门基础,尺寸Ext.getDom(hello);Ext.getDom(e);Ext.getDom(e.dom);); /Html页面中包含一个id为hello的div，代码如下：aa

7、a 在上面的代码中，Ext.getDom(hello)、Ext.getDom(e)、Ext.getDom(e.dom)等三个语句返回都是同一个DOM节点对象。,Ext中 get、getDom、getCmp的区别,Ext入门基础,get方法中只有一个参数，这个参数是混合参数，可以是DOM节点的id、也可以是一个Element、或者是一个DOM节点对象等。 get方法其实是Ext.Element.get的简写形式。 Ext.onReady(function() var e=new Ext.Element(hello); Ext.get(hello); Ext.get(document.getEle

8、mentById(hello); Ext.get(e);); /Html页面中包含一个id为hello的div，代码如下：aaa Ext.get(hello)、Ext.get(document.getElementById(hello)、Ext.get(e)等三个方法都可以得到一个与DOM节点hello对应的Ext元素。,Ext中 get、getDom、getCmp的区别,Ext入门基础,getCmp方法用来获得一个Ext组件，也就是一个已经在页面中初始化了的Component或其子类的对象，getCmp方法中只有一个参数，也就是组件的id。 getCmp方法其实是Ext.ComponentM

9、gr.get方法的简写形式。 Ext.onReady(function() var myPanel=new Ext.Panel( id:“myFirstPanel”, title:“旧的标题, renderTo:hello, width:300, height:200);Ext.getCmp( myFirstPanel ).setTitle(新的标题);); /Html页面中包含一个id为hello的div，代码如下：aaa 我们使用Ext.getCmp(“myFirstPanel).来得到id为myFirstPanel的组件，并调用其setTitle方法来设置该面板的标题,Ext中 get、

10、getDom、getCmp的区别,Ext.Element占Ext Core库的篇幅很大，其中方法就占据了大部份。因此我们将这些方法可分为下面几类： DOM查询或遍历（如query、select、findParent） CSS（如setStyle、addClass） DOM操控（如createChild、remove） 方位、尺寸（如getHeight、getWidth）,Ext入门基础,DOM的增删改查,DOM查询,获取下一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。 Ext.get(elId).next(); 类似的还有: Ext.get(elId).prev();/上一个侧边节

11、点 Ext.get(elId).first();/第一个节点 Ext.get(elId).last();/最后一个节点 Ext.get(elId).parent();/父节点 比如要获取页面上所有的p标签,则可以使用: var ps = Ext.select(p); 这样你就可以对所要获取的元素进行操作了,select()方法返回的是Ext.CompositeElement对象,可以通过其中的each()方法对其所包含的元素进行遍历: ps.each(function(el) el.highlight();/高亮 ); 当然,如果你要是对获取的所有元素进行相同的操作,可以直接应用于Compos

12、iteElement对象上,如: ps.highlight();/select方法返回的结果可直接如同Element般地操作 或是: Ext.select(p).highlight(); 当然,select参数还可以更复杂一些,其中可以包括CSS选择符,基本的XPath,HTML属性等,Ext入门基础,DOM查询-Ext.query与Ext.select,Ext.query和Ext.select的作用同是根据CSS选择符,基本的XPath,HTML属性等查找出一个或多个元素。区别在于返回类型上。 分别是：query方法返回的是JavaScript标准的数组类型； select方法返回的是Com

13、positeElement类型，试比较： alter(Ext.isArray(Ext.query(a.BigClass); /true alter(Ext.query(a.BigClass).length);/里面包含的元素个数 Ext.select(a.BigClass).each(function(i)i.dom.href = javescript:void(0);/ 找到所有带有BigClass样式的A元素修改其链接); CompositeElement类型属于Ext自定义的类型，简单地说是以一个Ext.Element实例代表集合中多个元素，可实现Element对象上所有的接口，也就是说

14、CompositeElement在Ext中用于表示元素的集合中不论有多少个元素，均被视为一个单独元素处理。 它的用法和单个的Element对象一样。select方法返回的结果可直接如同Element般地操作，一般比query方法常用。,Ext入门基础,DOM查询- DomQuery详解,DomQuery是Ext Core提供的HTML或XML文档选择器，它支持大部分的CSS 3选择器规则，同时提供了一些自定义方式. DomQuery主要有4种选择方式：元素标记、元素属性、伪对象、 CSS值 1.通过元素标记选择，主要有以下6种方法： （1）*：选择任何元素。其使用方法请看下面代码。 Ext.s

15、elect(*); （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下的元素a （6）EF：选择所有紧接在元素E后的同层元素F。其使用方法请看下面代码。 Ext.se

16、lect(diva);/将选择紧接在div下的同层元素a,Ext入门基础,DOM查询- DomQuery详解,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(inputna

17、me=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的元素。其使用语法请看下面代码。 Ext.select(inputvalue%=2); /

18、选择value属性值能整除2的元素 （7）Efoo!=bar：选择foo的属性值不等于bar的元素。其使用语法请看下面代码。 Ext.select(inputname!=form1); /选择name属性值不等于form1的元素,Ext入门基础,DOM查询- DomQuery详解,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);

19、 /选择所有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:las

20、t); /选择最后一个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”的div （15）Ext

21、.select(input:not(:checked); /选择不包含checked属性的input （16）Ext.select(div:has(p); /选择包含p的div （17）Ext.select(div:next(p); /选择与包含p的div同层的下一个div （18）Ext.select(div:prev(p); /选择与包含p的div同层的下一个div,Ext入门基础,DOM查询- DomQuery详解,4.通过CSS值进行选择。主要有以下6种语法。 （1）E:display=none：选择display值为none的元素E。其使用语法请看下面代码。 Ext.select(d

22、iv:display=none); /选择display值为none的元素E （2）Ext.select(div:display=none); /选择display值以none开始的元素E （3）Ext.select(div:display$=none); /选择display值以none结尾的元素E （4）Ext.select(div:display*=none); /选择display值包含字符串none的元素E （5）Ext.select(div:display%=none); /选择display值整除2的元素E （6）Ext.select(div:display!=none); /选

23、择display值不等于none的元素E Domquery的语法可以单独使用，也可以组合在一起使用，例如以下代码： Ext.select(div,span); /选择所有div元素与span元素 /选择class为red，且是第1个子节点，display属性为none的div Ext.select(div.red:first-childdisplay=none); 如果没有指定选择器开始搜索的根节点，默认是从body节点开始，这就等于每次都要做全文搜索，其性能可想而知，是相当低效的，因此，建议大家在每次搜索时都指定搜索的根节点，减少搜索范围。设置搜索根节点的语法请看下面代码。 Ext.sele

24、ct(div,true, elId); / elId为根节点id /下面这句与上面的效果是一样的 Ext.get(elid).select(div);,Ext入门基础,操纵CSS,Ext为我们提供了很多操纵CSS的方法. addClass轻松地为一个元素添加样式： Ext.get(elId).addClass(myCls); / 加入元素的myCls的样式 radioClass添加一个或多个className到这个元素，并移除其所有侧边（siblings）节点上的同名样式。 Ext.get(elId).radioClass(myCls);/为元素添加myCls在所有侧边元素上删除myCls样式

25、 removeClass移除元素身上一个或多个的CSS类。 Ext.get(elId).removeClass(myCls); / 移除元素的样式 toggleClass轮换（Toggles，两种状态中转换到一个状态）-添加或移除指定的CSS类（如果已经存在的话便删除，否则就是新增加）。 Ext.get(elId).toggleClass(myCls); / 加入(移除,再加入)样式 Ext.get(elId).toggleClass(myCls); hasClass检查某个CSS类是否作用于这个元素身上。 If (Ext.get(elId).hasClass(myCls) alert(是有样

26、式的); replaceClass在这个元素身上替换CSS类。 Ext.get(elId).replaceClass(myClsA, myClsB);,Ext入门基础,操纵CSS,getStyle返回该元素的统一化当前样式和计算样式。 var color = Ext.get(elId).getStyle(color); var zIndx = Ext.get(elId).getStyle(z-index); var fntFmly = Ext.get(elId).getStyle(font-family); / . 等等 setStyle设置元素的样式，也可以用一个对象参数包含多个样式。 Ex

27、t.get(elId).setStyle(color, #FFFFFF); Ext.get(elId).setStyle(z-index, 10); Ext.get(elId).setStyle( display : block, overflow : hidden, cursor : pointer ); Ext.get(elId).setStyle(color, #FFFFFF, true); / 带有动画的变换过程 Ext.get(elId).setStyle(color, #FFFFFF, duration: .75); / 带有0.75秒动画变换过程 getColor为指定的CSS属

28、性返回CSS颜色。RGB、三位数(像#fff)和有效值都被转换到标准六位十六进制的颜色。 Ext.get(elId).getColor(background-color); Ext.get(elId).getColor(color); Ext.get(elId).getColor(border-color); / . 等等 setOpacity设置元素的透明度。 Ext.get(elId).setOpacity(.5); Ext.get(elId).setOpacity(.45, true); / 动画 Ext.get(elId).setOpacity(.45, duration: .5);

29、/ 附有半秒的动画过程 clearOpacity清除这个元素的透明度设置。 Ext.get(elId).clearOpacity();,Ext入门基础,操纵DOM,appendChild 把送入的元素归为这个元素的子元素。 var el = Ext.get(elId1); Ext.get(elId).appendChild(elId2); / elId2添加到elId里面 Ext.get(elId).appendChild(el); / 参数还可以是:elId2,elId3, el.dom , Ext.select(div) appendTo把这个元素添加到送入的元素里面。 Ext.get(e

30、lId).appendTo(elId2);/ elId添加到elId2里面 Replace 用于当前这个元素替换传入的元素。 Ext.get(elId).replace(elId2); / elId去替换elId2 replaceWith 用传入的元素替换这个元素 Ext.get(elId).replaceWith(elId2); / elId2替换掉elId. insertBefore 传入一个元素的参数，将其放置在当前元素之前的位置 Ext.get(elId).insertBefore(elId2); insertFirst 可以是插入一个元素，也可以是创建一个元素（要创建的话请使用“Do

31、mHelper配置项对象”作为参数传入），这个元素将作为当前元素的第一个子元素出现。 Ext.get(elId).insertFirst(el); / 用DomHelper配置项创建新节点 Ext.get(elId).insertFirst( tag: p, cls: myCls, html: Hi I am the new first child ); remove从DOM里面移除当前元素，并从缓存中删除。 Ext.get(elId).remove(); / elId在缓存和dom里面都没有,Ext入门基础,操纵DOM- - - -DOMHepler配置项,在上面的例子中，大家可能就注意到这

32、样的语法： .insertFirst( tag: p, html: Hi I am the new first child ); insertFirst方法的那个参数作用是什么呢？参数就是要创建的装饰元素(HTML元素)在DomHelper 中是怎么表示的，也就是DomHelper的配置选项，其配置项支持很多的HTML属性，html片断也行，至于html属性就可以是Dom节点的很多属性了（css class、url、src、id等）。 DomHelper配置可视作任何HTML元素的等价物. DomHelper是专用于动态生成装饰元素的实用工具，已解决大多数浏览器之间差别的问题，避免了原始操作D

33、OM脚本的麻烦。对于HTML片断与innerHTML的操作， DomHelper经充分考虑并在性能上有足够的优化。 Ext.DomHelper是一个单例，因此无须实例化即可调用其静态方法: markup, insertHtml , insertBefore , insertAfter , insertFirst , append ,overwrite 例1 :Ext.DomHelper.append(my-div, tag:ul, cls:my-class); 例2 :Ext.DomHelper.insertFirst(my-div, Hi);,Ext入门基础,尺寸 / 设置高度为200px以

34、默认配置进行动画 / 设置高度为150px以自定义的配置进行动画 Ext.get(elId).setHeight(150, duration : .5, / 动画将会持续半秒 callback: function() this.update(结束); / 动画过后改变其内容为“结束” ); getHeight/返回元素的偏移（offset）高度。 getWidth/返回元素的偏移（offset）宽度。 setHeight/设置元素的高度。 setWidth/设置元素的宽度。 getBorderWidth/返回指定边（side(s)）的padding宽度。 getPadding/可以是t, l,

35、 r, b或是任何组合。传入lr的参数会得到leftpadding+right padding。 clip/保存当前的溢出（overflow），然后进行裁剪元素的溢出部分 使用unclip()来移除。 unclip/在调用clip()之前，返回原始的裁剪部分（溢出的）,Ext入门基础,定位,通过Ext Core定义的API能快速地采集元素位置的各方面数据，归纳为get的或set的方法，全部浏览器都可通用。类似于上一节的尺寸大小的API，多数的setter方法支持动画效果。可在第二参数中传入动画的配置参数（object-literal configuration object），或即就是以个布尔

36、型的true， 表示这是默认的动画。 set/getX set/getY set/getXY set/getOffsetsTo/返回当前元素与送入元素的距离 var elOffsets = Ext.get(elId).getOffsetsTo(anotherEl); set/getLeft set/getRight set/getTop set/getBottom setLocation/无论这个元素如何定位，设置其在页面的坐标位置。 clearPositioning/当文档加载后清除位置并复位到默认 set/getPositioning/返回一个包含CSS定位信息的对象。有用的技巧：连同se

37、tPostioning 一起，可在更新执行之前，先做一个快照（snapshot），之后便可恢复该元素,Ext入门基础,动画,Ext Core里的Fx类是核心类库中最激动人心的一个类，它不是最重要的，却是最实用的一个类定义了一些常用的特效方法. puff/渐隐元素的同时还伴随着向各个方向缓慢地展开。特效结束后，元素会被隐藏（visibility = hidden）， 但是块元素仍然会在 document对象中占据空间。如果需要将元素从 DOM 树删除，则使用remove配置选项。 / 默认 el.puff(); / 常见的配置选项及默认值 el.puff( easing: easeOut, du

38、ration: .5, remove: false, useDisplay: false ); slideIn/slideOut/将元素滑入到视图中。 fadeIn/fadeOut/将元素从透明渐变为不透明。 switchOff/类似单击过后般地闪烁一下元素，然后从元素的中间开始收缩。 highlight/高亮 pause/在任何后续的特效开始之前一次暂停。 scale/以动画展示元素从开始的高度/宽度转换到结束的高度/宽度 ghost/将元素从视图滑出并伴随着渐隐。 /等等,Ext入门基础,事件,HTML元素的标准事件是指mouseover、mousedown、click、blur、focu

39、s、change等能够直接对HTML元素发生的事件。在ExtJS中，这些事件的处理可以用如下的代码： 注册一个事件处理函数使用： Ext.get(myElement).on(click, myHandler, myScope); myElement是要注册的元素的ID，click是事件的名称（注意，和HTML元素中的声明onXXX不同，这里不需要on），myHandler是处理函数的函数名称，myScope是一个可选的参数，指定处理函数绑定的对象，也就是处理函数的作用域，如果不提供这个参数，则是默认的window。 撤销一个事件处理函数： Ext.get(myElement).un(click

40、, myHandler, myScope) 参数的意义同上。 Ext.Element的on方法是addListener方法的简写. 如果你想在一个元素上添加多个事件处理器可以这样一次搞定。 var el= Ext.get(myElement); el.on(click : fn: this.onMyClick,scope: this,delay: 100/延迟0.1秒执行,-高级事件功能, mouseover : fn: this.onMyMouseOver,scope: this);,Ext入门基础,高级事件,事件委托、事件缓冲、事件延迟等的这些功能都是属于高级事件的控制内容， Ext Co

41、re在此方面提供了一系列的配置选项。 委托delegation 减低内存销毁和防止内存泄露的隐患是事件委托技术的两项好处，其基 本要义是： 并不是集合内的每一个元素都要登记上事件处理器，而是在集合其容器上登记 一次便可，这样产生了中央化的一个事件处理器，然后就有不断循环该事件周 期，使得逐层上报机制付诸实现，只要在容器层面定义就可以。 我们想实现,点击不同的li,产生不同的效果.为此我们可能会这么做. Ext.get(btn-edit).on(click, function(e,t) / 执行事件具体过程A); Ext. get(btn-delete).on(click, function(e

42、,t) / 执行事件具体过程B); Ext. get(btn-cancel).on(click, function(e,t) / 执行事件具体过程C);,Ext入门基础,高级事件,使用事件委托的方式代替，在容器身上登记一个事件处理器，按照依 附的逻辑选择： Ext.get(actions).on(click, function(e,t) /在div上登记一个事件 switch(t.id) case btn-edit: / 处理特定元素的事件具体过程A break; case btn-delete: / 处理特定元素的事件具体过程B break; case btn-cancel: / 处理特定元

43、素的事件具体过程C break; ); 基于dom各层经过逐层上报的原因，可以说，我们登记了的“actions”的div一定会被访问得到。这时就是执行我们所指定的switch指令，跳到对应匹配的元素那部分代码。这样方法具备可伸缩性，因为我们只要维护一个函数就可以控制那么多的元素的事件。,Ext入门基础,高级事件,是否一次性触发single 在登记事件的处理器的时候可以加入配置这个选项。true代表为事件触发后加入一个下次移除本身的处理函数。 el.on(click, function(e,t) / 执行事件具体过程 , this, single: true / 触发一次后不会再执行事件了 );

44、 延时delay 你在登记事件的处理器的时候可以加入配置这个选项。制定触发事件后 处理函数延时执行的时间。 el.on(click, function(e,t) / 执行事件具体过程 , this, delay: 1000/ 延迟事件，响应事件后开始计时（这里一秒） ); 缓冲buffer 将上面代码的delay换成buffer/在缓冲时间内触发事件 无效. 移除事件句柄removeAllListeners el.removeAllListeners();/在该元素身上移除所有已加入的侦听器(事件)。,Ext入门基础,类编程-继承与重写,JavaScript本身是基于原型的，这与普通基于类的编

45、程语言相比，在实现继承的机制上有较大的出入。JavaScript中创建一个新类那便是修改了某个对象原型（prototype）的结果。Ext提供了许多简化这方面工作的函数。 Ext支持以下类风格的编程行为：继承扩展（extend），重写（overrride）/直接覆盖。这意味着开发者可以根据需求加入自己的行为，创建自己的类，或者修改某些函数让其更加合适。 extend与override Ext.extend方法创建新一个类之定义。第一个参数是父类，第二个参数是属性/函数的列表。第二个参数加入到对象的prototype中extend过后，Ext.extend还会产生一个superclass的引用。

46、,Ext入门基础,Person = Ext.extend(Object, constructor: function(first, last) this.firstName = first; this.lastName = last; , getName: function() return this.firstName + + this.lastName; );,Developer = Ext.extend(Person, getName: function() if(this.isCoding) return Go Away!; else / 访问父类的方法 return Develope

47、r.superclass.getName.call(this); ); var p = new Person(John, Smith); var d = new Developer(John, Smith); alert(p.getName();/John Smith alert(d.getName();/John Smith,类编程-继承与重写,override override方法也编辑、修改类的其中一种途径，不过本方法不会创建一个新类，而是对现有类予以修改其行为，第一个参数是要覆盖的类，第二个参数就是覆盖列表。override方法实际是修改类prototype的属性。 / 我们已声明的P

48、erson类 Ext.override(Person, getName: function() / 覆盖了旧行为，这次last name排头 return this.lastName + + this.firstName; ); var p = new Person(John, Smith); alert(p.getName();/Smith John / 覆盖了旧行为，这次last name排头,Ext入门基础,类编程-单例(Singletons),单例另一种较常见的说法是“模块设计模式”，如果某一个类静态方法较多，或者该类只须要实例化一次，那么采用单例的模式就很不错了。JavaScript

49、的单例模式中，我们常常会创建私有JavaScript变量或通过高明的闭包手法建立私有的方法，以一段程序入口的范例代码就能说明多少问题。 MyApp = function() var data; /外部无法访问data，这是的私有成员 return init: function() / 初始化程序 , getData: function() return data; ; (); Ext.onReady(MyApp.init, MyApp);,Ext入门基础,类编程-命名空间,命名空间（Namespaces）(类似于java中的包) 命名空间对组织代码很方便，可在两方面体现其益处：其一是用了命名空

50、间，很大程度避免了全局空间被污染的问题，污染全局的成员终究不是一个好习惯，例如Ext对象本身就是在全局空间的一个对象。要养成一个良好的习惯，就要把写好的类放进一个命名空间中，可以用你公司的名字或程序的名字决定命名；其二是有助规范好你的代码，把相类似的或相依赖的类都放在同一个名命空间 中，也方便向其它开发者指明代码其意图。 / 两种方式都是一样的，后者的为佳。 Ext.namespace( MyCompany, MyCompany.Application, MyCompany.Application.Reports ); Ext.namespace(MyCompany.Application.R

51、eports);,Ext入门基础,AJAX,Ext.Ajax对象继承自Ext.data.Connection，定义为单例提供了一个既统一又高度灵活的Ajax通迅服务。利用这个单例对象，就可以处理全体Ajax请求，并执行相关的方法、事件和参数。 Ext.Ajax的事件 每次请求都触发事件，这是全局规定的。 beforerequest (conn, opts) 任何Ajax请求发送之前触发。 requestcomplete (conn, response, opts) 任何Ajax成功请求后触发。 requestexception (conn, response, opts) 服务端返回一个错误的

52、HTTP状态码时触发。 / 例子:凡是Ajax通迅都会通过spinner告知状态如何。 Ext.Ajax.on(beforerequest, this.showSpinner, this); Ext.Ajax.on(requestcomplete, this.hideSpinner, this); Ext.Ajax.on(requestexception, this.hideSpinner, this);,Ext入门基础,AJAX,Ext.Ajax的属性 由于Ext.Ajax是单例，所以你可以在发起请求的时候才覆盖Ext.Ajax属性。 这些是最常见的属性： method：用于请求的默认方法，

53、注意这里大小写有关系的，应为是全部 大写（默认为undefined，如不设置参数就是“POST”，否则是“GET”）。 extraParams：收集各属性的对象，每次发起请求就会把该对象身上的各 属性作为参数发送出去（默认为undefined）需要与Session信息和其它 数据交互就要在这里设置。 url： 请求目标的服务器地址（默认为undefined），如果服务端都用 一个url来接收请求，那么在这里设置过一次就足够了。 defaultHeaders：对请求头部设置的对象（默认为undefined）。 / 每次请求都将这字段与信息注入到头部中去。 Ext.Ajax.defaultHead

54、ers = Powered-By: Ext Core ;,Ext入门基础,AJAX,Ext.Ajax.request Ext.Ajax.request就是发送与接收服务端函数的函数。服务端返用response以决定执行success或failure函数。注意这种success/failure函数是异步的，即就是服务端有响应后客户端这边回头调用（回调函数），期用客户端的Web页面还可以进行其它任务的操作。 Ext.Ajax.request( url: login.do, /请求地址 /提交参数组 params: LoginName:Ext.get(LoginName).dom.value, Lo

55、ginPassword:Ext.get(LoginPassword).dom.value , /成功时回调 success: function(response, options) /获取响应的json字符串 var responseArray=Ext.util.JSON.decode(response.responseText); if(responseArray.success=true) Ext.Msg.alert(恭喜,您已成功登录！); else Ext.Msg.alert(失败,登录失败，请 重新登录); /失败时回调,一般很少写 failure: function(respons

56、e, opts) console.log(服务端失效的状态代码： + response.status); );,Ext入门基础,Ext2.0对整个框架进行了重构，最为杰出的是推出了一个以Component类为基础的组件体系，在Component类基础上，使用面向对象的方法，设计了一系列的组件及控件。因此，要能游刃有余地使用Ext，熟悉Ext组件体系是最基本的。 通过组件结构图我们可以一目了然的看出整个Ext组件继承及组成体系，当使用一个组件的时间，了解他的继承体系，这样可以便于我们掌握组件的各种特性,Ext组件简介,Ext组件简介,Ext组件简介,Ext组件简介,Ext.FormPanel,E

57、XT核心组件应用,Ext.tree.TreePanel,Ext.Window,toolBar and Menus,Ext界面中的布局,Ext.grid.GridPanel,Record 、 Store 、 DataProxy、DataReader,辅助函数,Ext组件的应用,组件可以直接通过new 关键子来创建，比如控件一个窗口，使用new Ext.Window()，创建一个表格则使用new Ext.GridPanel()。当然，除了一些普通的组件以外，一般都会在构造函数中通过传递构造参数来创建组件。 组件的构造函数中一般都可以包含一个对象，这个对象包含创建组件所需要的配置属性及值，组件根据构

58、造函数中的参数属性值来初始化组件。,Ext.FormPanel,一个简单的FormPanel效果图,Ext.FormPanel,一个简单的FormPanel代码,var simple = new Ext.FormPanel( labelWidth: 75, frame:true, url:saveForm.do, title: Simple Form, bodyStyle:padding:5px 5px 0, width: 350, defaults: width: 230,defaultType: textfield, items: fieldLabel: First Name,name:

59、first,allowBlank:false, fieldLabel: Last Name,name: last, fieldLabel: Company,name: company, fieldLabel: Email,name: email,vtype:email, new Ext.form.TimeField( fieldLabel: Time,name: time, minValue: 8:00am,maxValue: 6:00pm) , buttons: text: Save,text: Cancel );,Ext.FormPanel,Ext.FormPanel中的数据控件 Ext.

60、form.Checkbox, Ext.form.CheckboxGroup Ext.form.ComboBox Ext.form.DateField Ext.form.HtmlEditor Ext.form.NumberField Ext.form.Radio, Ext.form.RadioGroup Ext.form.TextArea Ext.form.TextField Ext.form.TimeField Ext.form.VTypes,toolBar and Menus,toolBar是用来存放功能按钮的容器 toolBar中可以放置所有的FormPanel中的控件 toolBar可以

61、放置在formPanel,panel,gridPanel,treePanel等容器中 示例效果图,Ext.tree.TreePanel,Tree是用来显示树形数据的，效果图如下,Ext.tree.TreePanel,代码实现定义根节点,Var root = new Ext.tree.AsyncTreeNode( id : 0, text : 未分配权限, expanded: true );,Ext.tree.TreePanel,代码实现定义树的数据源,Var store = new Ext.tree.TreeLoader( dataUrl : loadTreeNode.do );,Ext.tr

62、ee.TreePanel,代码实现定义树,var tree = new Ext.tree.TreePanel( rootVisible : true, autoScroll:true, loader : store, enableDD:true, containerScroll: true, dropConfig: appendOnly:true, root : root );,var tree = new Ext.tree.TreePanel( rootVisible : true, autoScroll:true, loader : new Ext.tree.TreeLoader( dat

63、aUrl : loadTreeNode.do ), enableDD:true, containerScroll: true, dropConfig: appendOnly:true, root : new Ext.tree.AsyncTreeNode( id : 0, text : 未分配权限, expanded: true ) );,Ext.Window,其本身也是一个容器，可以放置所有的EXT控件 主要是用来处理弹出式窗口的,var win=new Ext.Window( id:w, title:lyr:新窗口,/窗口显示名称 width:300, height:140, collaps

64、ible: true,/是否可折叠 layout : column,/布局方式 model:true, items:/窗口需要增加的内容 ).show();/让窗口显示出来,Ext.grid.GridPanel,GridPanel是用来显示数据，并且支持分页 效果图,Ext.grid.GridPanel,数据的显示非常简单：HTML文件： JS：var grid = new Ext.grid.GridPanel( el: grid, /renderTo: myPanel ds: ds,/Stroe数据源 cm: cm/columnModle 大家可以理解为表头);grid.render();,

65、首先，一个表格应该有列定义，即定义表头ColumnModel：/ 定义一个ColumnModel，表头中有四列var cm = new Ext.grid.ColumnModel( header:编号,dataIndex:id, header:性别,dataIndex:sex, header:名称,dataIndex:name, header:描述,dataIndex:descn); cm.defaultSortable = true; 该ColumnModel定义了表格的四个列，其每列的名称和对应的数据键。请注意defaultSortable属性，即为每个列都安上一个可以排序的功能。如果只想某些列举有该功能，可以设置：header:编号,dataIndex:id,Sortable:true,Ext.grid.GridPanel,Ext.grid.GridPanel,现在就来看