《ExtJS开发框架入门.ppt》由会员分享，可在线阅读，更多相关《ExtJS开发框架入门.ppt（94页珍藏版）》请在金锄头文库上搜索。
1、ExtJS开发框架入门开发框架入门框架简介、环境搭建、helloWord示例EXT核心组件应用Ext框架框架EXT框架基础Ext框架简介框架简介怎样搭建怎样搭建EXT运行环境及开发环境运行环境及开发环境helloWord示例程序示例程序框架简介、环境搭建及框架简介、环境搭建及HelloWordExt框架简介框架简介v什么是什么是ext？Ext是一个Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。Ext是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等各种开发语言开发
2、的应用中。Ext最新版本是ext3.2Ext框架简介框架简介vExt提供一系列的对象类，这些基本上都是用于处理WEB页面控件的。vExt的发布包括三个方面的内容：API参考手册、示例程序及开发包。Ext框架简介框架简介vEXTAPI参考手册Ext框架简介框架简介v示例程序Ext示例程序包共包括十二大类近100示例程序。Ext框架简介框架简介v开发包vadapter：负责将里面提供第三方底层库（包括Ext自带的底层库）映射为Ext所支持的底层库。vbuild：压缩后的ext全部源码(里面分类存放)。 vdocs： API帮助文档。vexmaples：提供使用ExtJs技术做出的小实例。vreso
3、urces：ExtUI资源文件目录，如CSS、图片文件都存放在这里面。vsource：无压缩Ext全部的源码(里面分类存放) 遵从LesserGNU（LGPL） 开源的协议。vext-all.js：压缩后的Ext全部源码。vext-all-debug.js：无压缩的Ext全部的源码(用于调试)。vext-core.js：压缩后的Ext的核心组件，包括sources/core下的所有类。vext-core-debug.js：无压缩Ext的核心组件，包括sources/core下的所有类。Ext框架简介怎样搭建怎样搭建EXT运行环境及开发环境运行环境及开发环境开发环境把Ext的开发包直接复制到WE
4、B工程的目录下helloWord示例程序示例程序v新建HTML文件并在页面中引入ExtJS的样式及ExtJS库文件v样式文件为resources/css/ext-all.cssv库文件主要包含两个：adapter/ext/ext-base.js及ext-all.jsv其中ext-base.js是框架基础库，ext-all.js是extjs的核心库。helloWord示例程序示例程序vhelloWord在HTML直接嵌入代码实现Ext.onReady(function()Ext.Msg.alert(helloWord,HelloWord!););helloWord示例程序示例程序Ext类库简介类
5、库简介Ext框架基础及核心简介框架基础及核心简介Ext组件简介组件简介Ext入门基础入门基础Ext类库简介类库简介vExtJS 由一系列的类库组成，一旦页面成功加载了ExtJS 库后，我们就可以在页面中调用ExtJS的类及控件来实现需要的功能。ExtJS 的类库由以下几部分组成：v底层API(core)v控件(widgets)v实用工具(Utils)Ext类库简介类库简介v底层API(core)：底层API 中提供了对DOM 操作、查询的封装、事件处理、DOM 查询器等基础的功能。其它控件都是建立在这些底层api 的基础上，底层api 位于源代码目录的core 子目录中，包括DomHelper
6、.js、Element.js 等文件。Ext类库简介类库简介v控件(widgets)：控件是指可以直接在页面中创建的可视化组件，比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。控件位于源代码目录的widgets 子目录中。Ext类库简介类库简介v实用工具Utils：Ext 提供了很多的实用工具，可以方便我们实现如数据内容格式化、JSON数据解码或反解码、对Date、Array、发送Ajax 请求、Cookie 管理、CSS 管理等扩展等功能Ext入门基础入门基础尺寸尺寸&大小大小,定位定位get,getD
7、OM,getCmp的区别的区别DOM的增删改查的增删改查动画动画类编程事件AJAXExt入门基础入门基础v要学习及应用好Ext框架，必须需要理解HtmlDOM、ExtElement及Component三者之间的区别。v每一个HTML页面都有一个层次分明的DOM树模型，浏览器中的所有内容都有相应的DOM对象，动态改变页面的内容，正是通过使用脚本语言来操作DOM对象实现。(通常使用getElementById/Ext.getDOM获得DOM对象)v仅仅有DOM是不够的，比如要把页面中的某一个节点移到其它位置，要给某一个节点添加阴影效果，要隐藏或显示某一个节点等，我们都需要通过几句javascrip
8、t才能完成。因此，Ext在DOM的基础上，创建了ExtElement，可以使用Element来包装任何DOM，Element对象中添加了一系列快捷、简便的实用方法。(通常使用Ext.get获得Element对象)v对于终端用户来说，仅仅有Element是不够的，比如用户要显示一个表格、要显示一棵树、要显示一个弹出窗口等。因此，除了Element以外，Ext还建立了一系列的客户端界面组件Component，我们在编程时，只要使用这些组件Componet即可实现相关数据展示及交互等，而Component是较高层次的抽象，每一个组件在渲染render的时候，都会依次通过Element、DOM来生成最
9、终的页面效果。(通常使用Ext.getCmp获得Component对象)Ext入门基础入门基础vgetDom方法能够得到文档中的DOM节点，该方法中包含一个参数，该参数可以是DOM节点的id、DOM节点对象或DOM节点对应的Ext元素(Element)等。(与getElementById是一个效果)vExt.onReady(function()vare=newExt.Element(hello);Ext.getDom(hello);Ext.getDom(e);Ext.getDom(e.dom););v/Html页面中包含一个id为hello的div，代码如下：aaav在上面的代码中，Ext.g
10、etDom(hello)、Ext.getDom(e)、Ext.getDom(e.dom)等三个语句返回都是同一个DOM节点对象。Ext中中get、getDom、getCmp的区别的区别Ext入门基础入门基础vget方法中只有一个参数，这个参数是混合参数，可以是DOM节点的id、也可以是一个Element、或者是一个DOM节点对象等。vget方法其实是Ext.Element.get的简写形式。vExt.onReady(function()vare=newExt.Element(hello);Ext.get(hello);Ext.get(document.getElementById(hello)
11、;Ext.get(e););v/Html页面中包含一个id为hello的div，代码如下：aaavExt.get(hello)、Ext.get(document.getElementById(hello)、Ext.get(e)等三个方法都可以得到一个与DOM节点hello对应的Ext元素。Ext中中get、getDom、getCmp的区别的区别Ext入门基础入门基础vgetCmp方法用来获得一个Ext组件，也就是一个已经在页面中初始化了的Component或其子类的对象，getCmp方法中只有一个参数，也就是组件的id。vgetCmp方法其实是Ext.ComponentMgr.get方法的简写
12、形式。vExt.onReady(function()varmyPanel=newExt.Panel(id:“myFirstPanel”,title:“旧的标题,renderTo:hello,width:300,height:200);Ext.getCmp(myFirstPanel).setTitle(新的标题););v/Html页面中包含一个id为hello的div，代码如下：aaav我们使用Ext.getCmp(“myFirstPanel).来得到id为myFirstPanel的组件，并调用其setTitle方法来设置该面板的标题Ext中中get、getDom、getCmp的区别的区别vEx
13、t.Element占ExtCore库的篇幅很大，其中方法就占据了大部份。因此我们将这些方法可分为下面几类：vDOM查询或遍历（如查询或遍历（如query、select、findParent）vCSS（如（如setStyle、addClass）vDOM操控（如操控（如createChild、remove）v方位、尺寸（如方位、尺寸（如getHeight、getWidth）Ext入门基础DOM的增删改查DOM查询v获取下一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。vExt.get(elId).next();v类似的还有:vExt.get(elId).prev();/上一个侧边节点vE
14、xt.get(elId).first();/第一个节点vExt.get(elId).last();/最后一个节点vExt.get(elId).parent();/父节点/等等v比如要获取页面上所有的p标签,则可以使用:vvarps=Ext.select(p);v这样你就可以对所要获取的元素进行操作了,select()方法返回的是Ext.CompositeElement对象,可以通过其中的each()方法对其所包含的元素进行遍历:vps.each(function(el)vel.highlight();/高亮v);v当然,如果你要是对获取的所有元素进行相同的操作,可以直接应用于Composite
15、Element对象上,如:vps.highlight();/select方法返回的结果可直接如同Element般地操作v或是:vExt.select(p).highlight();v当然,select参数还可以更复杂一些,其中可以包括CSS选择符,基本的XPath,HTML属性等Ext入门基础DOM查询-Ext.query与Ext.selectvExt.query和Ext.select的作用同是根据CSS选择符,基本的XPath,HTML属性等查找出一个或多个元素。区别在于返回类型上区别在于返回类型上。v分别是：query方法返回的是JavaScript标准的数组类型；vselect方法返回的
16、是CompositeElement类型，试比较：valter(Ext.isArray(Ext.query(a.BigClass);/truevalter(Ext.query(a.BigClass).length);/里面包含的元素个数vExt.select(a.BigClass).each(function(i)i.dom.href=javescript:void(0);/找到所有带有BigClass样式的A元素修改其链接);vCompositeElement类型属于Ext自定义的类型，简单地说是以一个Ext.Element实例代表集合中多个元素，可实现Element对象上所有的接口，也就是说
17、CompositeElement在Ext中用于表示元素的集合中不论有多少个元素，均被视为一个单独元素处理。v它的用法和单个的Element对象一样。select方法返回的结果可直接如同方法返回的结果可直接如同Element般地操作般地操作，一般比query方法常用。Ext入门基础DOM查询-DomQuery详解vDomQuery是ExtCore提供的HTML或XML文档选择器，它支持大部分的CSS3选择器规则，同时提供了一些自定义方式.vDomQuery主要有4种选择方式：元素标记、元素属性、伪对象、元素标记、元素属性、伪对象、CSS值值v1.通过元素标记选择，主要有以下通过元素标记选择，主要
18、有以下6种方法：种方法：v（1）*：选择任何元素。其使用方法请看下面代码。vExt.select(*);v（2）E：元素的标记为E。其使用方法请看下面代码。vExt.select(div);v（3）EF：选择包含在标记E中的标记F。其使用方法请看下面代码。vExt.select(diva);/将选择div下的a元素v（4）EF：选择包含在标记E中的直接子标记F。其使用方法请看下面代码。vExt.select(diva);/将选择div下的直接子元素av（5）E+F：选择所有紧接在元素E后的元素F。其使用方法请看下面代码。vExt.select(div+a);/将选择紧接在div下的元素av（6
19、）EF：选择所有紧接在元素E后的同层元素F。其使用方法请看下面代码。vExt.select(diva);/将选择紧接在div下的同层元素aExt入门基础DOM查询-DomQuery详解v2.通过元素属性选择，主要有以下通过元素属性选择，主要有以下7种语法。种语法。v（1）Efoo：选择带有属性foo的元素。其使用语法请看下面代码。vExt.select(divid);/选择有id属性的div元素v（2）Efoo=bar：选择foo的属性值为bar的元素。其使用语法请看下面代码。vExt.select(inputchecked=true);/选择checked属性值为true的元素v（3）Efo
20、o=bar：选择foo的属性值以bar开头的元素。其使用语法请看下面代码。vExt.select(inputname=form1);/选择name属性值以form1开头的元素v（4）Efoo$=bar：选择foo的属性值以bar结尾的元素。其使用语法请看下面代码。vExt.select(inputname$=form1);/选择name属性值以form1结尾的元素v（5）Efoo*=bar：选择foo的属性值包含字符串bar的元素。其使用语法请看下面代码。vExt.select(inputname*=form1);/选择name属性值包含字符串form1的元素v（6）Efoo%=2：选择foo
21、的属性值能整除2的元素。其使用语法请看下面代码。vExt.select(inputvalue%=2);/选择value属性值能整除2的元素v（7）Efoo!=bar：选择foo的属性值不等于bar的元素。其使用语法请看下面代码。vExt.select(inputname!=form1);/选择name属性值不等于form1的元素Ext入门基础DOM查询-DomQuery详解v3.通过伪对象选择，主要有以下通过伪对象选择，主要有以下18种语法。种语法。v（1）Ext.select(ulli:first-child);/选择所有ul下的第一个li子节点v（2）Ext.select(ulli:las
22、t-child);/选择所有ul下的最后一个li子节点v（3）Ext.select(ulli:nth-child(2);/选择所有ul下的第2个li子节点v（4）Ext.select(ulli:nth-child(odd);/选择所有ul下的奇数行li子节点v（5）Ext.select(ulli:nth-child(evan);/选择所有ul下的偶数行li子节点v（6）Ext.select(ulli:only-child);/选择所有ul下只有一个子节点的li节点v（7）Ext.select(input:checked);/选择所有checked属性值为true的元素v（8）Ext.selec
23、t(input:first);/选择第一个input元素v（9）Ext.select(input:last);/选择最后一个input元素v（10）E:nth(n)：选择匹配的第n（n1）个元素E。其使用语法请看下面代码。vExt.select(input:nth(2);/选择第2个input元素v（11）E:odd：是语法“:nth-child(odd)”的简写。v（12）E:evan：是语法“:nth-child(evan)”的简写。v（13）Ext.select(div:contains(list);/选择innerHTML属性包含“list”的divv（14）Ext.select(di
24、v:nodeValue(test);/选择包含文本节点且值为“test”的divv（15）Ext.select(input:not(:checked);/选择不包含checked属性的inputv（16）Ext.select(div:has(p);/选择包含p的divv（17）Ext.select(div:next(p);/选择与包含p的div同层的下一个divv（18）Ext.select(div:prev(p);/选择与包含p的div同层的下一个divExt入门基础DOM查询-DomQuery详解v4.通过通过CSS值进行选择。主要有以下值进行选择。主要有以下6种语法。种语法。v（1）E:
25、display=none：选择display值为none的元素E。其使用语法请看下面代码。vExt.select(div:display=none);/选择display值为none的元素Ev（2）Ext.select(div:display=none);/选择display值以none开始的元素Ev（3）Ext.select(div:display$=none);/选择display值以none结尾的元素Ev（4）Ext.select(div:display*=none);/选择display值包含字符串none的元素Ev（5）Ext.select(div:display%=none);/选
26、择display值整除2的元素Ev（6）Ext.select(div:display!=none);/选择display值不等于none的元素EvDomquery的语法可以单独使用，也可以组合在一起使用可以组合在一起使用，例如以下代码：vExt.select(div,span);/选择所有div元素与span元素v/选择class为red，且是第1个子节点，display属性为none的divvExt.select(div.red:first-childdisplay=none);v如果没有指定选择器开始搜索的根节点，默认是从body节点开始，这就等于每次都要做全文搜索，其性能可想而知，是相当
27、低效的，因此，建议大家在建议大家在每次搜索时都指定搜索的根节点每次搜索时都指定搜索的根节点，减少搜索范围。设置搜索根节点的语法请看下面代码。vExt.select(div,true,elId);/elId为根节点idv/下面这句与上面的效果是一样的vExt.get(elid).select(div);Ext入门基础操纵CSSvExt为我们提供了很多操纵CSS的方法.vaddClass轻松地为一个元素添加样式：vExt.get(elId).addClass(myCls);/加入元素的myCls的样式vradioClass添加一个或多个className到这个元素，并移除其所有侧边（sibling
28、s）节点上的同名样式。vExt.get(elId).radioClass(myCls);/为元素添加myCls在所有侧边元素上删除myCls样式vremoveClass移除元素身上一个或多个的CSS类。vExt.get(elId).removeClass(myCls);/移除元素的样式vtoggleClass轮换（Toggles，两种状态中转换到一个状态）-添加或移除指定的CSS类（如果已经存在的话便删除，否则就是新增加）。vExt.get(elId).toggleClass(myCls);/加入(移除,再加入)样式Ext.get(elId).toggleClass(myCls);vhasCl
29、ass检查某个CSS类是否作用于这个元素身上。vIf(Ext.get(elId).hasClass(myCls)alert(是有样式的);vreplaceClass在这个元素身上替换CSS类。vExt.get(elId).replaceClass(myClsA,myClsB);Ext入门基础操纵CSSvgetStyle返回该元素的统一化当前样式和计算样式。vvarcolor=Ext.get(elId).getStyle(color);vvarzIndx=Ext.get(elId).getStyle(z-index);vvarfntFmly=Ext.get(elId).getStyle(font
30、-family);/.等等vsetStyle设置元素的样式，也可以用一个对象参数包含多个样式。vExt.get(elId).setStyle(color,#FFFFFF);vExt.get(elId).setStyle(z-index,10);vExt.get(elId).setStyle(display:block,overflow:hidden,cursor:pointer);vExt.get(elId).setStyle(color,#FFFFFF,true);/带有动画的变换过程vExt.get(elId).setStyle(color,#FFFFFF,duration:.75);/带
31、有0.75秒动画变换过程vgetColor为指定的CSS属性返回CSS颜色。RGB、三位数(像#fff)和有效值都被转换到标准六位十六进制的颜色。vExt.get(elId).getColor(background-color);vExt.get(elId).getColor(color);vExt.get(elId).getColor(border-color);/.等等vsetOpacity设置元素的透明度。vExt.get(elId).setOpacity(.5);vExt.get(elId).setOpacity(.45,true);/动画vExt.get(elId).setOpaci
32、ty(.45,duration:.5);/附有半秒的动画过程vclearOpacity清除这个元素的透明度设置。vExt.get(elId).clearOpacity();Ext入门基础操纵DOMvappendChild把送入的元素归为这个元素的子元素。vvarel=Ext.get(elId1);vExt.get(elId).appendChild(elId2);/elId2添加到elId里面vExt.get(elId).appendChild(el);/参数还可以是:elId2,elId3,el.dom,Ext.select(div)vappendTo把这个元素添加到送入的元素里面。vExt
33、.get(elId).appendTo(elId2);/elId添加到elId2里面vReplace用于当前这个元素替换传入的元素。vExt.get(elId).replace(elId2);/elId去替换elId2vreplaceWith用传入的元素替换这个元素vExt.get(elId).replaceWith(elId2);/elId2替换掉elId.vinsertBefore传入一个元素的参数，将其放置在当前元素之前的位置vExt.get(elId).insertBefore(elId2);vinsertFirst可以是插入一个元素，也可以是创建一个元素（要创建的话请使用“DomHe
34、lper配置项对象”作为参数传入），这个元素将作为当前元素的第一个子元素出现。vExt.get(elId).insertFirst(el);/用DomHelper配置项创建新节点vExt.get(elId).insertFirst(vtag:p,vcls:myCls,vhtml:HiIamthenewfirstchildv);vremove从DOM里面移除当前元素，并从缓存中删除。vExt.get(elId).remove();/elId在缓存和dom里面都没有Ext入门基础操纵DOM-DOMHepler配置项v在上面的例子中，大家可能就注意到这样的语法：v.insertFirst(tag:p
35、,html:HiIamthenewfirstchildv);vinsertFirst方法的那个参数作用是什么呢？参数就是要创建的装饰元素(HTML元素)在DomHelper中是怎么表示的，也就是DomHelper的配置选项，其配置项支持很多的HTML属性，html片断也行，至于html属性就可以是Dom节点的很多属性了（cssclass、url、src、id等）。vDomHelper配置可视作任何配置可视作任何HTML元素的等价物元素的等价物.vDomHelper是专用于动态生成装饰元素的实用工具专用于动态生成装饰元素的实用工具，已解决大多数浏览器之间差别的问题，避免了原始操作DOM脚本的麻烦
36、。对于HTML片断与innerHTML的操作，DomHelper经充分考虑并在性能上有足够的优化。vExt.DomHelper是一个单例，因此无须实例化即可调用其静态方法:vmarkup,insertHtml,insertBefore,insertAfter,insertFirst,append,overwritev例1:Ext.DomHelper.append(my-div,tag:ul,cls:my-class);v例2:Ext.DomHelper.insertFirst(my-div,Hi);Ext入门基础尺寸&大小v某个元素在页面上，我们就想获得到其尺寸大小或改变它的尺寸大小。毫无意外
37、下，ExtCore也把这些任务抽象为清晰的API供大家使用。这些都是setter的方法，可传入动画的配置参数，或即就是以个布尔型的true，表示v这是默认的动画。vExt.get(elId).setHeight(200,true);/设置高度为200px以默认配置进行动画v/设置高度为150px以自定义的配置进行动画vExt.get(elId).setHeight(150,vduration:.5,/动画将会持续半秒vcallback:function()this.update(结束);/动画过后改变其内容为“结束”v);vgetHeight/返回元素的偏移（offset）高度。vgetWid
38、th/返回元素的偏移（offset）宽度。vsetHeight/设置元素的高度。vsetWidth/设置元素的宽度。vgetBorderWidth/返回指定边（side(s)）的padding宽度。vgetPadding/可以是t,l,r,b或是任何组合。传入lr的参数会得到leftpadding+rightpadding。vclip/保存当前的溢出（overflow），然后进行裁剪元素的溢出部分使用unclip()来移除。vunclip/在调用clip()之前，返回原始的裁剪部分（溢出的）Ext入门基础定位v通过ExtCore定义的API能快速地采集元素位置的各方面数据，归纳为get的或se
39、t的方法，全部浏览器都可通用。类似于上一节的尺寸大小的API，多数的setter方法支持动画效果。可在第二参数中传入动画的配置参数（object-literalconfigurationobject），或即就是以个布尔型的true，v表示这是默认的动画。vset/getXvset/getYvset/getXYvset/getOffsetsTo/返回当前元素与送入元素的距离vvarelOffsets=Ext.get(elId).getOffsetsTo(anotherEl);vset/getLeftvset/getRightvset/getTopvset/getBottomvsetLocatio
40、n/无论这个元素如何定位，设置其在页面的坐标位置。vclearPositioning/当文档加载后清除位置并复位到默认vset/getPositioning/返回一个包含CSS定位信息的对象。有用的技巧：连同setPostioningv一起，可在更新执行之前，先做一个快照（snapshot），之后便可恢复该元素Ext入门基础动画vExtCore里的Fx类是核心类库中最激动人心的一个类，它不是最重要的，却是最实用的一个类定义了一些常用的特效方法.vpuff/渐隐元素的同时还伴随着向各个方向缓慢地展开。特效结束后，元素会被隐藏（visibility=hidden），但是块元素仍然会在documen
41、t对象中占据空间。如果需要将元素从DOM树删除，则使用remove配置选项。v/默认vel.puff();v/常见的配置选项及默认值vel.puff(veasing:easeOut,vduration:.5,vremove:false,vuseDisplay:falsev);vslideIn/slideOut/将元素滑入到视图中。vfadeIn/fadeOut/将元素从透明渐变为不透明。vswitchOff/类似单击过后般地闪烁一下元素，然后从元素的中间开始收缩。vhighlight/高亮vpause/在任何后续的特效开始之前一次暂停。vscale/以动画展示元素从开始的高度/宽度转换到结束的
42、高度/宽度vghost/将元素从视图滑出并伴随着渐隐。/等等Ext入门基础事件vHTML元素的标准事件是指mouseover、mousedown、click、blur、focus、change等能够直接对HTML元素发生的事件。在ExtJS中，这些事件的处理可以用如下的代码：v注册一个事件处理函数使用：vExt.get(myElement).on(click,myHandler,myScope);myElement是要注册的元素的ID，click是事件的名称（注意，和注意，和HTML元素中的声明元素中的声明onXXX不同，不同，这里不需要这里不需要on），myHandler是处理函数的函数名称
43、，myScope是一个可选的参数，指定处理函数绑定的对象，也就是处理函数的作用域，如果不提供这个参数，则是默认的window。v撤销一个事件处理函数：Ext.get(myElement).un(click,myHandler,myScope)参数的意义同上。vExt.Element的的on方法是方法是addListener方法的简写方法的简写.v如果你想在一个元素上添加多个事件处理器可以这样一次搞定。vvarel=Ext.get(myElement);vel.on(click:fn:this.onMyClick,scope:this,delay:100/延迟0.1秒执行,-高级事件功能,mou
44、seover:fn:this.onMyMouseOver,scope:this);Ext入门基础高级事件v事件委托、事件缓冲、事件延迟等的这些功能都是属于高级事件的控制内容，vExtCore在此方面提供了一系列的配置选项。v委托委托delegationv减低内存销毁和防止内存泄露的隐患是事件委托技术的两项好处，其基v本要义是：v并不是集合内的每一个元素都要登记上事件处理器，而是在集合其容器上登记v一次便可，这样产生了中央化的一个事件处理器，然后就有不断循环该事件周v期，使得逐层上报机制付诸实现，只要在容器层面定义就可以。vvvvvv我们想实现,点击不同的li,产生不同的效果.为此我们可能会这么
45、做.vExt.get(btn-edit).on(click,function(e,t)/执行事件具体过程A);vExt.get(btn-delete).on(click,function(e,t)/执行事件具体过程B);vExt.get(btn-cancel).on(click,function(e,t)/执行事件具体过程C);Ext入门基础高级事件v使用事件委托的方式代替事件委托的方式代替，在容器身上登记一个事件处理器，按照依v附的逻辑选择：vExt.get(actions).on(click,function(e,t)/在div上登记一个事件vswitch(t.id)vcasebtn-ed
46、it:v/处理特定元素的事件具体过程Avbreak;vcasebtn-delete:v/处理特定元素的事件具体过程Bvbreak;vcasebtn-cancel:v/处理特定元素的事件具体过程Cvbreak;vv);v基于dom各层经过逐层上报的原因，可以说，我们登记了的“actions”的div一定会被访问得到。这时就是执行我们所指定的switch指令，跳到对应匹配的元素那部分代码。这样方法具备可伸缩性，因为我们只要维护一个函数只要维护一个函数就可以控制那么多的元素的事件就可以控制那么多的元素的事件。Ext入门基础高级事件v是否一次性触发是否一次性触发singlev在登记事件的处理器的时候可
47、以加入配置这个选项。true代表为事件触发后加入一个下次移除本身的处理函数。vel.on(click,function(e,t)v/执行事件具体过程v,this,vsingle:true/触发一次后不会再执行事件了触发一次后不会再执行事件了v);v延时延时delayv你在登记事件的处理器的时候可以加入配置这个选项。制定触发事件后v处理函数延时执行的时间。vel.on(click,function(e,t)v/执行事件具体过程v,this,vdelay:1000/延迟事件，响应事件后开始计时（这里一秒）v);v缓冲缓冲bufferv将上面代码的delay换成buffer/在缓冲时间内触发事件无效
48、.v移除事件句柄移除事件句柄removeAllListenersvel.removeAllListeners();/在该元素身上移除所有已加入的侦听器(事件)。Ext入门基础类编程-继承与重写vJavaScript本身是基于原型的，这与普通基于类的编程语言相比，在实现继承的机制上有较大的出入。JavaScript中创建一个新类那便是修改了某个对象原型（prototype）的结果。Ext提供了许多简化这方面工作的函数。vExt支持以下类风格的编程行为：继承扩展（extend），重写（overrride）/直接覆盖。这意味着开发者可以根据需求加入自己的行为，创建自己的类，或者修改某些函数让其更加合
49、适。vextend与与overridevExt.extend方法创建新一个类之定义。第一个参数是父类，第二个参数是属性/函数的列表。第二个参数加入到对象的prototype中extend过后，Ext.extend还会产生一个superclass的引用。Ext入门基础Person=Ext.extend(Object,constructor:function(first,last)this.firstName=first;this.lastName=last;,getName:function()returnthis.firstName+this.lastName;);Developer=Ext.
50、extend(Person,getName:function()if(this.isCoding)returnGoAway!;else/访问父类的方法returnDeveloper.superclass.getName.call(this););varp=newPerson(John,Smith);vard=newDeveloper(John,Smith);alert(p.getName();/JohnSmithalert(d.getName();/JohnSmith类编程-继承与重写voverridevoverride方法也编辑、修改类的其中一种途径，不过本方法不会创建一个新类，而是对现有类
51、予以修改其行为，第一个参数是要覆盖的类，第二个参数就是覆盖列表。override方法实际是修改类prototype的属性。v/我们已声明的Person类vExt.override(Person,vgetName:function()v/覆盖了旧行为，这次lastname排头vreturnthis.lastName+this.firstName;vv);vvarp=newPerson(John,Smith);valert(p.getName();/SmithJohn/覆盖了旧行为，这次lastname排头Ext入门基础类编程-单例(Singletons)v单例另一种较常见的说法是“模块设计模式”
52、，如果某一个类静态方法较多，或者该类只须要实例化一次，那么采用单例的模式就很不错了。JavaScript的单例模式中，我们常常会创建私有JavaScript变量或通过高明的闭包闭包手法建立私有的方法，以一段程序入口的范例代码就能说明多少问题。vMyApp=function()vvardata;/外部无法访问data，这是的私有成员vreturnvinit:function()v/初始化程序v,vgetData:function()vreturndata;vv;v();vExt.onReady(MyApp.init,MyApp);Ext入门基础类编程-命名空间v命名空间（命名空间（Namespa
53、ces）(类似于类似于java中的包中的包)v命名空间对组织代码很方便，可在两方面体现其益处：其一是用了命名空间，很大程度避免了全局空间被污染的问题，污染全局的成员终究不是一个好习惯，例如Ext对象本身就是在全局空间的一个对象。要养成一个良好的习惯，就要把写好的类放进一个命名空间中，可以用你公司的名字或程序的名字决定命名；其二是有助规范好你的代码，把相类似的或相依赖的类都放在同一个名命空间v中，也方便向其它开发者指明代码其意图。v/两种方式都是一样的，后者的为佳。vExt.namespace(vMyCompany,vMyCompany.Application,vMyCompany.Applic
54、ation.Reportsv);vExt.namespace(MyCompany.Application.Reports);Ext入门基础AJAXvExt.Ajax对象继承自Ext.data.Connection，定义为单例提供了一个既统一又高度灵活的Ajax通迅服务。利用这个单例对象，就可以处理全体Ajax请求，并执行相关的方法、事件和参数。vExt.Ajax的事件v每次请求都触发事件，这是全局规定的。vbeforerequest(conn,opts)v任何Ajax请求发送之前触发。vrequestcomplete(conn,response,opts)v任何Ajax成功请求后触发。vreq
55、uestexception(conn,response,opts)v服务端返回一个错误的HTTP状态码时触发。v/例子:凡是Ajax通迅都会通过spinner告知状态如何。vExt.Ajax.on(beforerequest,this.showSpinner,this);vExt.Ajax.on(requestcomplete,this.hideSpinner,this);vExt.Ajax.on(requestexception,this.hideSpinner,this);Ext入门基础AJAXvExt.Ajax的属性的属性v由于Ext.Ajax是单例，所以你可以在发起请求的时候才覆盖Ex
56、t.Ajax属性。v这些是最常见的属性：vmethod：用于请求的默认方法，注意这里大小写有关系的，应为是全部v大写（默认为undefined，如不设置参数就是“POST”，否则是“GET”）。vextraParams：收集各属性的对象，每次发起请求就会把该对象身上的各v属性作为参数发送出去（默认为undefined）需要与Session信息和其它v数据交互就要在这里设置。vurl：请求目标的服务器地址（默认为undefined），如果服务端都用v一个url来接收请求，那么在这里设置过一次就足够了。vdefaultHeaders：对请求头部设置的对象（默认为undefined）。v/每次请求都
57、将这字段与信息注入到头部中去。vExt.Ajax.defaultHeaders=vPowered-By:ExtCorev;Ext入门基础AJAXvExt.Ajax.requestvExt.Ajax.request就是发送与接收服务端函数的函数。服务端返用response以决定执行success或failure函数。注意这种success/failure函数是异步的，即就是服务端有响应后客户端这边回头调用（回调函数），期用客户端的Web页面还可以进行其它任务的操作。vExt.Ajax.request(url:login.do,/请求地址/提交参数组params:LoginName:Ext.get
58、(LoginName).dom.value,LoginPassword:Ext.get(LoginPassword).dom.value,/成功时回调success:function(response,options)/获取响应的json字符串vvarresponseArray=Ext.util.JSON.decode(response.responseText);if(responseArray.success=true)Ext.Msg.alert(恭喜,您已成功登录！);elseExt.Msg.alert(失败,登录失败，请重新登录);/失败时回调,一般很少写failure:functio
59、n(response,opts)console.log(服务端失效的状态代码：+response.status););Ext入门基础Ext2.0对整个框架进行了重构，最为杰出的是推出了一个以Component类为基础的组件体系，在Component类基础上，使用面向对象的方法，设计了一系列的组件及控件。因此，要能游刃有余地使用Ext，熟悉Ext组件体系是最基本的。通过组件结构图我们可以一目了然的看出整个Ext组件继承及组成体系，当使用一个组件的时间，了解他的继承体系，这样可以便于我们掌握组件的各种特性Ext组件简介组件简介Ext组件简介组件简介Ext组件简介组件简介Ext组件简介组件简介Ext
60、.FormPanelEXT核心组件应用Ext.tree.TreePanelExt.WindowtoolBarandMenusExt界面中的布局界面中的布局Ext.grid.GridPanelRecord、Store、DataProxy、DataReader辅助函数辅助函数Ext组件的应用组件的应用v组件可以直接通过new 关键子来创建，比如控件一个窗口，使用newExt.Window()，创建一个表格则使用newExt.GridPanel()。当然，除了一些普通的组件以外，一般都会在构造函数中通过传递构造参数来创建组件。v组件的构造函数中一般都可以包含一个对象，这个对象包含创建组件所需要的配置
61、属性及值，组件根据构造函数中的参数属性值来初始化组件。Ext.FormPanelv一个简单的FormPanel效果图Ext.FormPanelv一个简单的FormPanel代码varsimple=newExt.FormPanel(labelWidth:75,frame:true,url:saveForm.do,title:SimpleForm,bodyStyle:padding:5px5px0,width:350,defaults:width:230,defaultType:textfield,items:fieldLabel:FirstName,name:first,allowBlank:f
62、alse,fieldLabel:LastName,name:last,fieldLabel:Company,name:company,fieldLabel:Email,name:email,vtype:email,newExt.form.TimeField(fieldLabel:Time,name:time,minValue:8:00am,maxValue:6:00pm),buttons:text:Save,text:Cancel);Ext.FormPanelvExt.FormPanel中的数据控件Ext.form.Checkbox,Ext.form.CheckboxGroupExt.form
63、.ComboBoxExt.form.DateFieldExt.form.HtmlEditorExt.form.NumberFieldExt.form.Radio,Ext.form.RadioGroupExt.form.TextAreaExt.form.TextFieldExt.form.TimeFieldExt.form.VTypestoolBarandMenusvtoolBar是用来存放功能按钮的容器vtoolBar中可以放置所有的FormPanel中的控件vtoolBar可以放置在formPanel,panel,gridPanel,treePanel等容器中v示例效果图Ext.tree.T
64、reePanelvTree是用来显示树形数据的，效果图如下Ext.tree.TreePanelv代码实现定义根节点Varroot=newExt.tree.AsyncTreeNode(id:0,text:未分配权限,expanded:true);Ext.tree.TreePanelv代码实现定义树的数据源Varstore=newExt.tree.TreeLoader(dataUrl:loadTreeNode.do);Ext.tree.TreePanelv代码实现定义树vartree=newExt.tree.TreePanel(rootVisible:true,autoScroll:true,lo
65、ader:store,enableDD:true,containerScroll:true,dropConfig:appendOnly:true,root:root);vartree=newExt.tree.TreePanel(rootVisible:true,autoScroll:true,loader:newExt.tree.TreeLoader(dataUrl:loadTreeNode.do),enableDD:true,containerScroll:true,dropConfig:appendOnly:true,root:newExt.tree.AsyncTreeNode(id:0,
66、text:未分配权限,expanded:true);Ext.Windowv其本身也是一个容器，可以放置所有的EXT控件v主要是用来处理弹出式窗口的varwin=newExt.Window(id:w,title:lyr:新窗口,/窗口显示名称width:300,height:140,collapsible:true,/是否可折叠layout:column,/布局方式model:true,items:/窗口需要增加的内容).show();/让窗口显示出来Ext.grid.GridPanelvGridPanel是用来显示数据，并且支持分页v效果图Ext.grid.GridPanelv数据的显示非常简
67、单：HTML文件：JS：vargrid=newExt.grid.GridPanel(el:grid,/renderTo:myPanelds:ds,/Stroe数据源cm:cm/columnModle大家可以理解为表头);grid.render();v首先，一个表格应该有列定义，即定义表头ColumnModel：/定义一个ColumnModel，表头中有四列varcm=newExt.grid.ColumnModel(header:编号,dataIndex:id,header:性别,dataIndex:sex,header:名称,dataIndex:name,header:描述,dataIndex
68、:descn);vcm.defaultSortable=true;该ColumnModel定义了表格的四个列，其每列的名称和对应的数据键。请注意defaultSortable属性，即为每个列都安上一个可以排序的功能。如果只想某些列举有该功能，可以设置：header:编号,dataIndex:id,Sortable:trueExt.grid.GridPanelExt.grid.GridPanelv现在就来看看这个Ext.data.Store是如何转换数据的。1.二维数组：/ArrayDatavardata=1,male,name1,descn1,2,male,name1,descn2,3,mal
69、e,name3,descn3,4,male,name4,descn4,5,male,name5,descn5;/ArrayReadervards=newExt.data.Store(proxy:newExt.data.MemoryProxy(data),reader:newExt.data.ArrayReader(,name:id,mapping:0,name:sex,mapping:1,name:name,mapping:2,name:descn,mapping:3);ds.load();/初始化数据ds要对应两个部分：proxy和reader。proxy告诉我们从哪里获得数据，reader
70、告诉我们如何解析这个数据。现在用的是Ext.data.MemoryProxy，它将内存中的数据data作为参数传递。Ext.data.ArrayReader专门用来解析数组，并且告诉我们它会按照定义的规范进行解析，每行按顺序读取四个数据，第一个叫id，第二个叫sex，第三个叫name，第四个descn。这些是跟cm定义中的dataIndex对应的。这样cm就知道哪列应该显示那条数据了。mapping属性用于标记data中的读取后的数据与标头的映射关系，一般是不用设置的。但如果我们想让sex的数据中name栏中出现，可以设置mapping值。即sex的mapping为2,后者为1。记得要执行一次
71、ds.load()，对数据进行初始化。Ext.grid.GridPanel如何在表格中添加CheckBox呢？varsm=newExt.grid.CheckboxSelectionModel();varcm=newExt.grid.ColumnModel(newExt.grid.RowNumberer(),/自动行号sm,/添加的地方header:编号,dataIndex:id,header:性别,dataIndex:sex,header:名称,dataIndex:name,header:描述,dataIndex:descn);vargrid=newExt.grid.GridPanel(el:
72、grid3,ds:ds,cm:cm,sm:sm,/添加的地方title:HelloWorld);Ext.grid.GridPanel分页工具栏vargrid=newExt.grid.GridPanel(el:grid,ds:ds,cm:cm,sm:sm,title:我的Grid,bbar:newExt.PagingToolbar(/在底部添加pageSize:10,store:ds,displayInfo:true,displayMsg:显示第0条到1条记录，一共2条,emptyMsg:“没有记录”),tbar:newExt.Toolbar(/在顶部添加items:id:buttonA,tex
73、t:“新增”,handler:function()alert(“YouclickedButtonA”);,newExt.Toolbar.SplitButton(),id:buttonB,text:“修改,handler:function()alert(YouclickedButtonB);,-,id:buttonc,text:“删除);grid.render();Record首先需要明确是，ExtJS中有一个名为Record的类，表格等控件中使用的数据是存放在Record对象中，一个Record可以理解为关系数据表中的一行，也可以称为记录。Record对象中即包含了记录（行中各列）的定义信息（
74、也就是该记录包含哪些字段，每一个字段的数据类型等），同时又包含了记录具体的数据信息（也就是各个字段的值）。Ext.onReady(function()varMyRecord=Ext.data.Record.create(/使用Record的create方法创建一个记录集MyRecordname:title,name:username,mapping:author,name:loginTimes,type:int,name:lastLoginTime,mapping:loginTime,type:date);varr=newMyRecord(/可以通过MyRecord来创建包含字段值的Recor
75、d对象(模拟record数据)title:日志标题,username:easyjf,loginTimes:100,loginTime:newDate();alert(MyRecord.getField(username).mapping);alert(MyRecord.getField(lastLoginTime).type);alert(r.data.username);alert(r.get(loginTimes););StoreStore可以理解为数据存储器，可以理解为客户端的小型数据表，提供缓存等功能。在ExtJS中，GridPanel、ComboBox、DataView等控件一般直接
76、与Store打交道，直接通过Store来获得控件中需要展现的数据等。一个Store包含多个Record，同时Store又包含了数据来源，数据解析器等相关信息，Store通过调用具体的数据解析器(DataReader)来解析指定类型或格式的数据(DataProxy)，并转换成记录集的形式保存在Store中，作为其它控件的数据输入。数据存储器由Ext.data.Store类定义，一个完整的数据存储器要知道数据源(DataProxy)及数据解析方式(DataReader)才能工作，在Ext.data.Store类中数据源由proxy配置属性定义、数据解析（读取）器由reader配置属性定义，一个较为
77、按部就班创建Store的代码如下varMyRecord=Ext.data.Record.create(name:title,name:username,mapping:author,name:loginTimes,type:int,name:lastLoginTime,mapping:loginTime,type:date);vardataProxy=newExt.data.HttpProxy(url:“findMyData.do”);/创建数据来源vartheReader=newExt.data.JsonReader(/创建Json数据解析器totalProperty:“results”,/
78、总记录数root:“rows”,/服务器返回的数据id:id,MyRecord);varstore=newExt.data.Store(proxy:dataProxy,/设定数据来源reader:theReader/设定数据解析器);store.load();当然，这样按部就班的写难免代码较多，Store中本身提供了一些快捷创建Store的方式，具体的参见Ext手册DataReaderDataReader表示数据读取器，也就是数据解析器，其负责把从服务器或者内存数组、xml文档中获得的杂乱信息转换成ExtJS中的记录集Record数据对象，并存储到Store里面的记录集数组中。数据解析器的基类
79、由Ext.data.DataReader定义，其它具体的数据解析器都是该类的子类，ExtJS中提供了读取二维数组、JSon数据及Xml文档的三种数据解析器，分别用于把内存中的二级数组、JSON格式的数据及XML文档信息解析成记录集。ArrayReaderExt.data.ArrayReader数组解析器，用于读取二维数组中的信息，并转换成记录集Record对象。varMyRecord=Ext.data.Record.create(name:title,mapping:1,name:username,mapping:2,name:loginTimes,type:3);varmyReader=ne
80、wExt.data.ArrayReader(id:0,MyRecord);这里定义的myReader可以读取下面的二维数组：1,测试,小王,3,2,新年好,williamraym,13DataReaderJsonReaderExt.data.JsonReaderJson数据解析器，用于读取JSON格式的数据信息，并转换成记录集Record对象varMyRecord=Ext.data.Record.create(name:title,name:username,mapping:author,name:loginTimes,type:int);varmyReader=newExt.data.Jso
81、nReader(totalProperty:“results”,/为2root:“rows”,/数据集id:id,MyRecord);这里的JsonReader可以解析下面的JSON数据：results:2,rows:id:1,title:测试,author:小王,loginTimes:3,id:2,title:Ben,author:williamraym,loginTimes:13/更多JsonReader用法请参见Ext手册DataReaderXmlReaderExt.data.XmlReaderXML文档数据解析器，用于把XML文档数据转换成记录集Record对象varMyRecord=
82、Ext.data.Record.create(name:title,name:username,mapping:author,name:loginTimes,type:int);varmyReader=newExt.data.XmlReader(totalRecords:results,record:rows,id:id,MyRecord);上面的myReader能够解析下面的xml文档信息：21测试小王32新年好williamraym13DataProxyDataProxy字面解释就是数据代理，也可以理解为数据源，也即从哪儿或如何得到需要交给DataReader解析的数据。数据代理（源）基类
83、由Ext.data.DataProxy定义，在DataProxy的基础，ExtJS提供了Ext.data.MemoryProxy、Ext.data.HttpProxy、Ext.data.ScriptTagProxy等三种实现。客户端的内存数组中读取数据可以直接使用Ext.data.MemoryProxy从服务器端加载的数据可以直接使用Ext.data.HttpProxy读取跨域服务器中的数据时就可以直接使用Ext.data.ScriptTagProxy。关于DataProxy与自定义Store的更多内容，请参考Ext手册。Ext.layout.AccordionEXT页面布局Ext.layou
84、t.FitLayoutExt.layout.CardLayoutExt.layout.ColumnLayoutExt.layout.BorderLayoutExt.layout.FormLayoutExt.layout.TableLayoutAccordion布局布局vExt中布局的方式-Ext.layout.Accordion由类Ext.layout.Accordion定义，名称为accordion，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式在布局中配置不同的参数，会展示出不同的效果。如：animate为true，表示在执行展开折叠时是否应用动画效果。active
85、OnTop为true,表示在点击每一个子元素的头部名称或右边的按钮，则会展开该面板，收缩其它已经展开的面板，并将点击的那个面板置于顶部显示。具体的各个控件的动作和效果大家可以参考APIBorderLayout局局vExt中布局的方式-Ext.layout.BorderLayout由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south,west，north,center来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置CardLayout布
86、局布局vExt中布局的方式-Ext.layout.CardLayout(选项卡选项卡)由Ext.layout.CardLayout类定义，名称为card，该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求varcard=newExt.Panel(layout:card,activeItem:activeCard,layoutOnTabChange:true,width:640,layoutConfig:animate:true,items:height:250,layout:fit,items:diseaseWQZInfo,height:2
87、50,layout:fit,items:diseaseYQZInfo);ColumnLayout布局布局vExt中布局的方式-Ext.layout.ColumnLayout由Ext.layout.ColumnLayout类定义，名称为column。列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度，而width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。FitLayout布局布局vExt中布局的方式-Ext.layout.Fi
88、tLayout由Ext.layout.FitLayout类定义，名称为fit。填充布局方式是把容器中的子元素覆盖容器的整个区域FormLayout布局布局vExt中布局的方式-Ext.layout.FormLayout这种布局方式由类Ext.layout.FormLayout提供，定义的名称为form。一般情况只用于formPanel的布局，把formPanel中的各子元素按每行一列的方式进行布局显示。TableLayout布局布局Ext中布局的方式-Ext.layout.TableLayout-这种布局方式由类Ext.layout.TableLayout提供，定义的名称为table。一般情况
89、不采用这种布局方式，因为其不能自适合屏幕或其父容器的宽度和高度。Ext界面中的布局界面中的布局v界面布局的综合应用Ext辅助函数辅助函数vExt提供了增强Javascript与JSON若干方面的函数，功能上各自不一样但目v的都是为了更方便地程序员使用好前端设施。vapply与与applyIfvapplyv复制一个JavaScript对象的所有属性至obj，第一个参数为属性接受方v对象，第二个参数为属性源对象。注意即使目的对象都有同名属性，也会被覆盖。vvarperson=vname:JohnSmith,vage:30v;vExt.apply(person,vage:20,vhobby:Codi
90、ng,vcity:Londonv);/person对象age变成20，同时多了hobby与city两个属性vapplyIf则不会覆盖同名属性.Ext辅助函数辅助函数vUrlEncoding/DecodingvurlEncodev把一个对象转换为一串以编码的URL字符。例如Ext.urlEncode(foo:v1,bar:2);变为foo=1&bar=2。可选地，如果遇到属性的类型是数组v的话，那么该属性对应的key就是每个数组元素的key，逐一进行“结对v的”编码。vvarparams=vfoo:value1,vbar:100v;vvars=Ext.encode(params);/s形如foo
91、=value1&bar=100vurlDecode则是转回来则是转回来Ext辅助函数辅助函数v数组数组vExtcore有为JavaScript数组和其他类型的collections提供方法。veachv迭代一个数组，包括Nodelists或CompositeElements，数组中每个成员v都将调用一次所传函数，直到函数返回false才停止执行。vExt.each(1,2,3,4,5,function(num)valert(num);v);vtoArrayv将可以迭代的集合（collection）转换为相当的JavaScript数组。vvararr1=Ext.toArray(1);/arr1=
92、1;v/arr2=Extelementsvvararr2=Ext.toArray(Ext.select(div);Ext辅助函数辅助函数vJSONvJSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。vJSON和XML都是基于文本的，两者都使用Unicode编码。JSON和XML都很容易阅读。主观上，JSON更清晰，冗余更少。XML适合标记文档(配置文件)，JSON更适合数据交换vJSON的语法很简单，就是使用大括号，中括号，逗号，冒号：，双引号“”。数据类型：嵌套对象、数组、字符串、数字、布尔值或空值v1）对象对象是一个无序的“名称/值对”集合。一个对象以
93、“”（左括号）开始，“”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“名称/值对”之间使用“,”（逗号）v如:name:”小王”,sex:”男”v2）数组数组是值（value）的有序集合。一个数组以“”（左中括号）开始，“”（右中括号）结束。值之间使用“,”（逗号）分隔。v如:“FBI:name:rose,age:25,name:jack,age:25/引号可省略v3）值值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、null、对象（object）或者数组（array）。这些结构可以嵌套。v当与服务器交换数据的时候，就要转换为原生
94、的JavaScript形式。有以下两种辅助方法。vencodev对一个对象，数组，或是其它值编码，转换为适合外界使用的格式。vvars=Ext.encode(vfoo:1,vbar:2v);/s是foo=1,bar=2这样。vdecodev对应着encode,decode是将JSON字符串解码（解析）成为JavaScriptv对象。在接受Ajax响应的前期步骤中就会经常使用这个方法处理文本变v为JavaScript对象。vvars=foo=1,bar=2;vvaro=Ext.decode(s);/o现在有两个属性，foo和bar。o=foo:1,bar:2Ext辅助函数辅助函数v浏览器与浏览器
95、与OS的判定的判定vExt带有一系列的浏览器判定的功能，以解决主流浏览器之间有差异的问题，v在JavaScript与CSS方面都有判定技术，也适应复杂的情境。v对浏览器的判定情况:vInternetExplorer-Ext.isIE,Ext.isIE6,Ext.isIE7,Ext.isIE8vFirefox-Ext.isGecko,Ext.isGecko2,Ext.isGecko3vOpera-Ext.isOperavChrome-Ext.isChromevSafari-Ext.isSafari,Ext.isSafari2,Ext.isSafari3vWebKit-Ext.isWebKitvO
96、peratingSystems-Ext.isLinux,Ext.isWindows,Ext.isMacvif(Ext.isIE)v/执行该浏览器的专用代码vExt辅助函数辅助函数vCSSvCSS也有类似的判定，不同的样式会根据不同的操作环境适当添加到根元素和添加到根元素和body上上，目的目的是更方便地解决好浏览器怪辟问题。在strict模式环境中，样v式ext-strict就会加入到root，其余这些可适当地加入到body中去。v.ext-ie,.ext-ie6,.ext-ie7,.ext-ie8v.ext-gecko,.ext-gecko2,.ext-gecko3v.ext-operav.
97、ext-safariv.ext-chromev.ext-mac,.ext-linuxv/*当这是strictmode模式而且是safari的环境中，字体便有变化。*/v.ext-strict.ext-safari.sample-itemvfont-size:20px;vExt辅助函数辅助函数v类型判定类型判定vJavaScript是一门弱类型语言，要搞清楚变量是什么类型自然很有必要。这v方面，Ext有若干如下的方法：visEmptyv如果传入的值是null、undefined或空字符串，则返回true。valert(Ext.isEmpty();visArrayv返回true表名送入的对象是Ja
98、vaScript的array类型对象，否则为false。valert(Ext.isArray(1,2,3);visObjectv检查传入的值是否为对象。valert(Ext.isObject();visFunctionv检查传入的值是否为函数。valert(Ext.isFunction(function();Ext辅助函数辅助函数v时控代码时控代码(定时器定时器)vTaskRunner是一个以特定时间为间隔然后执行函数的类。这对进行操作是比较有用的，例如每30秒的间隔刷新内容（Ajax）。vTaskMgr对象是TaslRunner的单例，这样使用起这个TaskRunner便很快了vvarsto
99、p=false;vvartask=vrun:function()vif(!stop)valert(newDate();velsevrunner.stop(task);/有需要的话这里我们也能停止任务v,vinterval:30000/每30秒一周期v;vvarrunner=newExt.util.TaskRunner();vrunner.start(task);v/使用使用TaskMgrvExt.TaskMgr.start(vrun:function()alert(newDate();v,vinterval:1000v);Ext辅助函数辅助函数v时控代码时控代码(定时器定时器)vDelayed
100、Task就是提供一个快捷的方式达到“缓冲”某个函数执行的目的。调用它之后，那个函数就会等待某段时间过去以后才会被执行。在此等待的期间中，如果task方法再被调用，原来的调用计时就会被取消。因此每一周期内最好只调用task方法一次。譬如在用户是否完成输入的情景，这方法可适用：vvartask=newExt.util.DelayedTask(function()valert(Ext.getDom(myInputField).value.length);v);v/调用函数之前等待调用函数之前等待500ms，如果用户在，如果用户在500ms内按下其他的键，这就会等内按下其他的键，这就会等于作废，重新开始于作废，重新开始v500ms的计算。的计算。vExt.get(myInputField).on(keypress,function()vtask.delay(500);v);v注意我们这里是为了指出DelayedTask的用途。登记事件的同时也能对addListener/on的配置项设置。Ext代码调试的一些技巧代码调试的一些技巧v合理设置断点v合理利用alert方法来查看变量；v正确地理解fireBug提供的错误信息；v合理地利用fireBug跟踪对象的属性值的变化、查看对象的属性和方法
