ExtJs中文教程专业知识讲座

ExtJS开发框架介绍

主讲：毛冬情第1页框架介绍、环境搭建、helloWord示例

EXT关键组件应用Ext框架

EXT框架基础第2页

Ext框架介绍如何搭建EXT运行环境及开发环境

helloWord示例程序框架介绍、环境搭建及HelloWord第3页Ext框架介绍什么是ext？Ext是一种Ajax框架，能够用来开发带有华丽外观富客户端应用，使得我们b/s应用愈加具有活力及生命力，提升顾客体验。Ext是一种用javascript编写，与后台技术无关前端ajax框架。因此，能够把Ext用在.Net、Java、Php等多种开发语言开发应用中。Ext最新版本是ext3.0第4页Ext框架介绍Ext提供一系列对象类，这些基本上都是用于处理WEB页面控件。Ext公布包括三个方面内容：API参照手册、示例程序及开发包。第5页Ext框架介绍EXTAPI参照手册第6页Ext框架介绍示例程序Ext示例程序包共包括十二大类近100示例程序。第7页Ext框架介绍开发包第8页adapter：负责将里面提供第三方底层库（包括Ext自带底层库）映射为Ext所支持底层库。build：压缩后ext所有源码(里面分类寄存)。docs：API帮助文档。exmaples：提供使用ExtJs技术做出小实例。resources：ExtUI资源文献目录，如CSS、图片文献都寄存在这里面。source：无压缩Ext所有源码(里面分类寄存)遵从LesserGNU（LGPL）开源协议。ext-all.js：压缩后Ext所有源码。ext-all-debug.js：无压缩Ext所有源码(用于调试)。ext-core.js：压缩后Ext关键组件，包括sources/core下所有类。ext-core-debug.js：无压缩Ext关键组件，包括sources/core下所有类。Ext框架介绍第9页如何搭建EXT运行环境及开发环境开发环境把Ext开发包直接复制到WEB工程目录下第10页helloWord示例程序新建HTML文献并在页面中引入ExtJS样式及ExtJS库文献样式文献为resources/css/ext-all.css库文献主要包括两个：adapter/ext/ext-base.js及ext-all.js其中ext-base.js是框架基础库，ext-all.js是extjs关键库。<linkrel="stylesheet"type="text/css"media="all"href="extjs/resources/css/ext-all.css"/><scripttype="text/javascript"src="extjs/adapter/ext/ext-base.js"></script><scripttype="text/javascript"src="extjs/ext-all.js"></script>第11页helloWord示例程序helloWord在HTML直接嵌入代码实现<scripttype="text/javascript"language="javascript">Ext.onReady(function(){Ext.Msg.alert('helloWord','HelloWord!');});</script>第12页helloWord示例程序第13页Ext类库介绍Ext框架基础及关键介绍

Ext组件介绍Ext入门基础第14页Ext类库介绍ExtJS

由一系列类库组成，一旦页面成功加载了ExtJS

库后，我们就能够在页面中调用ExtJS类及控件来实现需要功能。ExtJS

类库由下列几部分组成：底层API(core)控件(widgets)实用工具(Utils)第15页Ext类库介绍底层API(core)：底层API

中提供了对DOM

操作、查询封装、事件处理、DOM

查询器等基础功能。其他控件都是建立在这些底层api

基础上，底层api

位于源代码目录core子目录中，包括DomHelper.js、Element.js

等文献。第16页Ext类库介绍控件(widgets)：控件是指能够直接在页面中创建可视化组件，例如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等，在我们应用程序中能够直接通过应用这些控件来实现友好、交互性强应用程序UI。控件位于源代码目录widgets

子目录中。第17页Ext类库介绍实用工具Utils：Ext

提供了很多实用工具，能够方便我们实现如数据内容格式化、JSON数据解码或反解码、对Date、Array、发送Ajax

祈求、Cookie

管理、CSS

管理等扩展等功能第18页Ext入门基础尺寸&大小,定位

get,getDOM,getCmp区分

DOM增删改查动画类编程事件AJAX第19页Ext入门基础要学习及应用好Ext框架，必须需要理解HtmlDOM、ExtElement及Component三者之间区分。每一种HTML页面都有一种层次分明DOM树模型，浏览器中所有内容都有对应DOM对象，动态变化页面内容，正是通过使用脚本语言来操作DOM对象实现。(一般使用getElementById/Ext.getDOM取得DOM对象)仅仅有DOM是不够，例如要把页面中某一种节点移到其他位置，要给某一种节点添加阴影效果，要隐藏或显示某一种节点等，我们都需要通过几句javascript才能完成。因此，Ext在DOM基础上，创建了ExtElement，能够使用Element来包装任何DOM，Element对象中添加了一系列快捷、简便实用办法。(一般使用Ext.get取得Element对象)对于终端顾客来说，仅仅有Element是不够，例如顾客要显示一种表格、要显示一棵树、要显示一种弹出窗口等。因此，除了Element以外，Ext还建立了一系列客户端界面组件Component，我们在编程时，只要使用这些组件Componet即可实现有关数据展示及交互等，而Component是较高层次抽象，每一种组件在渲染render时候，都会依次通过Element、DOM来生成最后页面效果。(一般使用Ext.getCmp取得Component对象)第20页Ext入门基础getDom办法能够得到文档中DOM节点，该办法中包括一种参数，该参数能够是DOM节点id、DOM节点对象或DOM节点对应Ext元素(Element)等。(与getElementById是一种效果)Ext.onReady(function(){

vare=newExt.Element("hello");

Ext.getDom("hello");

Ext.getDom(e);

Ext.getDom(e.dom);

});

//Html页面中包括一种id为hellodiv，代码如下：

<divid="hello">aaa</div>

在上面代码中，Ext.getDom("hello")、Ext.getDom(e)、Ext.getDom(e.dom)等三个语句返回都是同一种DOM节点对象。

Ext中get、getDom、getCmp区分第21页Ext入门基础get办法中只有一种参数，这个参数是混合参数，能够是DOM节点id、也能够是一种Element、或者是一种DOM节点对象等。get办法其实是Ext.Element.get简写形式。

Ext.onReady(function(){

vare=newExt.Element("hello");

Ext.get("hello"));

Ext.get(document.getElementById("hello"));

Ext.get(e);

});

//Html页面中包括一种id为hellodiv，代码如下：

<divid="hello">aaa</div>

Ext.get("hello")、Ext.get(document.getElementById("hello"))、Ext.get(e)等三个办法都能够得到一种与DOM节点hello对应Ext元素。Ext中get、getDom、getCmp区分第22页Ext入门基础getCmp办法用来取得一种Ext组件，也就是一种已经在页面中初始化了Component或其子类对象，getCmp办法中只有一种参数，也就是组件id。getCmp办法其实是Ext.ComponentMgr.get办法简写形式。Ext.onReady(function(){

varmyPanel=newExt.Panel({

id:“myFirstPanel”,

title:“旧标题",

renderTo:"hello",

width:300,

height:200

});

Ext.getCmp("myFirstPanel").setTitle("新标题");

});

//Html页面中包括一种id为hellodiv，代码如下：

<divid="hello">aaa</div>

我们使用Ext.getCmp(“myFirstPanel").来得到id为myFirstPanel组件，并调用其setTitle办法来设置该面板标题

Ext中get、getDom、getCmp区分第23页Ext.Element占ExtCore库篇幅很大，其中办法就占据了大部份。因此我们将这些办法可分为下面几类：DOM查询或遍历（如query、select、findParent）CSS（如setStyle、addClass）DOM操控（如createChild、remove）方位、尺寸（如getHeight、getWidth）Ext入门基础DOM增删改查第24页DOM查询获取下一种侧边节点，跳过文本节点。可选地可送入一种期待选择符。Ext.get('elId').next();类似尚有:Ext.get(‘elId’).prev();//上一种侧边节点Ext.get(‘elId’).first();//第一种节点Ext.get(‘elId’).last();//最后一种节点Ext.get(‘elId’).parent();//父节点例如要获取页面上所有p标签,则能够使用:varps=Ext.select('p');这样你就能够对所要获取元素进行操作了,select()办法返回是Ext.CompositeElement对象,能够通过其中each()办法对其所包括元素进行遍历:ps.each(function(el){

el.highlight();//高亮});当然,假如你要是对获取所有元素进行相同操作,能够直接应用于CompositeElement对象上,如:ps.highlight();//select办法返回成果可直接犹如Element般地操作或是:Ext.select('p').highlight();当然,select参数还能够更复杂某些,其中能够包括CSS选择符,基本XPath,HTML属性等Ext入门基础第25页DOM查询Ext.query与Ext.selectExt.query和Ext.select作用同是根据CSS选择符,基本XPath,HTML属性等查找出一种或多种元素。区分在于返回类型上。分别是：query办法返回是JavaScript标准数组类型；select办法返回是CompositeElement类型，试比较：alter(Ext.isArray(Ext.query(‘a.BigClass’)));

//truealter(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对象上所有接口，也就是说CompositeElement在Ext中用于表达元素集合中无论有多少个元素，均被视为一种单独元素处理。它使用方法和单个Element对象同样。select办法返回成果可直接犹如Element般地操作，一般比query办法常用。Ext入门基础第26页DOM查询DomQuery详解DomQuery是ExtCore提供HTML或XML文档选择器，它支持大部分CSS3选择器规则，同步提供了某些自定义方式.DomQuery主要有4种选择方式：元素标识、元素属性、伪对象、CSS值1.通过元素标识选择，主要有下列6种办法：（1）*：选择任何元素。其使用办法请看下面代码。Ext.select('*');（2）E：元素标识为E。其使用办法请看下面代码。Ext.select('div');（3）EF：选择包括在标识E中标识F。其使用办法请看下面代码。Ext.select('diva');//将选择div下a元素（4）E>F：选择包括在标识E中直接子标识F。其使用办法请看下面代码。Ext.select('div>a');//将选择div下直接子元素a（5）E+F：选择所有紧接在元素E后元素F。其使用办法请看下面代码。Ext.select('div+a');//将选择紧接在div下元素a（6）E~F：选择所有紧接在元素E后同层元素F。其使用办法请看下面代码。Ext.select('div～a');//将选择紧接在div下同层元素aExt入门基础第27页DOM查询DomQuery详解2.通过元素属性选择，主要有下列7种语法。（1）E[foo]：选择带有属性foo元素。其使用语法请看下面代码。Ext.select('div[id]');//选择有id属性div元素（2）E[foo=bar]：选择foo属性值为bar元素。其使用语法请看下面代码。Ext.select('input[checked=true]');//选择checked属性值为true元素（3）E[foo^=bar]：选择foo属性值以bar开头元素。其使用语法请看下面代码。Ext.select('input[name^=form1]');//选择name属性值以form1开头元素（4）E[foo$=bar]：选择foo属性值以bar结尾元素。其使用语法请看下面代码。Ext.select('input[name$=form1]');//选择name属性值以form1结尾元素（5）E[foo*=bar]：选择foo属性值包括字符串bar元素。其使用语法请看下面代码。Ext.select('input[name*=form1]');//选择name属性值包括字符串form1元素（6）E[foo%=2]：选择foo属性值能整除2元素。其使用语法请看下面代码。Ext.select('input[value%=2]');//选择value属性值能整除2元素（7）E[foo!=bar]：选择foo属性值不等于bar元素。其使用语法请看下面代码。Ext.select('input[name!=form1]');//选择name属性值不等于form1元素Ext入门基础第28页DOM查询DomQuery详解3.通过伪对象选择，主要有下列18种语法。（1）Ext.select('ulli:first-child');//选择所有ul下第一种li子节点（2）Ext.select('ulli:last-child');//选择所有ul下最后一种li子节点（3）Ext.select('ulli:nth-child(2)');//选择所有ul下第2个li子节点（4）Ext.select('ulli:nth-child(odd)');//选择所有ul下奇数行li子节点（5）Ext.select('ulli:nth-child(evan)');//选择所有ul下偶数行li子节点（6）Ext.select('ulli: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（n≥1）个元素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.select('input:not(:checked)');//选择不包括checked属性input（16）Ext.select('div:has(p)');//选择包括pdiv（17）Ext.select('div:next(p)');//选择与包括pdiv同层下一种div（18）Ext.select('div:prev(p)');//选择与包括pdiv同层下一种divExt入门基础第29页DOM查询DomQuery详解4.通过CSS值进行选择。主要有下列6种语法。（1）E:{display=none}：选择display值为none元素E。其使用语法请看下面代码。

Ext.select('div:{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}');//选择display值不等于none元素EDomquery语法能够单独使用，也能够组合在一起使用，例如下列代码：Ext.select(‘div,span’);//选择所有div元素与span元素//选择class为red，且是第1个子节点，display属性为nonedivExt.select('div.red:first-child[display=none]');假如没有指定选择器开始搜索根节点，默认是从body节点开始，这就等于每次都要做全文搜索，其性能可想而知，是相称低效，因此，提议大家在每次搜索时都指定搜索根节点，减少搜索范围。设置搜索根节点语法请看下面代码。Ext.select('div',true,'elId');//elId为根节点id//下面这句与上面效果是同样Ext.get('elid').select('div');Ext入门基础第30页操纵CSSExt为我们提供了很多操纵CSS办法.addClass轻松地为一种元素添加样式：Ext.get('elId').addClass('myCls');//加入元素'myCls'样式radioClass添加一种或多种className到这个元素，并移除其所有侧边（siblings）节点上同名样式。Ext.get('elId').radioClass('myCls');//为元素添加‘myCls’在所有侧边元素上删除‘myCls’样式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(‘是有样式’);}replaceClass在这个元素身上替代CSS类。Ext.get('elId').replaceClass('myClsA','myClsB');Ext入门基础第31页操纵CSSgetStyle返回该元素统一化目前样式和计算样式。varcolor=Ext.get('elId').getStyle('color');varzIndx=Ext.get('elId').getStyle('z-index');varfntFmly=Ext.get('elId').getStyle('font-family');//...等等setStyle设置元素样式，也能够用一种对象参数包括多种样式。Ext.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属性返回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});//附有半秒动画过程clearOpacity清除这个元素透明度设置。Ext.get('elId').clearOpacity();Ext入门基础第32页操纵DOMappendChild把送入元素归为这个元素子元素。varel=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('elId').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能够是插入一种元素，也能够是创建一种元素（要创建话请使用“DomHelper配备项对象”作为参数传入），这个元素将作为目前元素第一种子元素出现。

Ext.get(‘elId').insertFirst(el);

//用DomHelper配备项创建新节点

Ext.get('elId').insertFirst({tag:'p',cls:'myCls',html:'HiIamthenewfirstchild'});remove从DOM里面移除目前元素，并从缓存中删除。Ext.get('elId').remove();//elId在缓存和dom里面都没有Ext入门基础第33页操纵DOM----DOMHepler配备项在上面例子中，大家也许就注意到这样语法：.insertFirst({tag:'p',html:'HiIamthenewfirstchild'});insertFirst办法那个参数作用是什么呢？参数就是要创建装饰元素(HTML元素)在DomHelper中是怎么表达，也就是DomHelper配备选项，其配备项支持很多HTML属性，html片断也行，至于html属性就能够是Dom节点很多属性了（cssclass、url、src、id等）。DomHelper配备可视作任何HTML元素等价物.DomHelper是专用于动态生成装饰元素实用工具，已处理大多数浏览器之间差异问题，避免了原始操作DOM脚本麻烦。对于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','<p>Hi</p>');Ext入门基础第34页尺寸&大小某个元素在页面上，我们就想取得到其尺寸大小或变化它尺寸大小。毫无意外下，ExtCore也把这些任务抽象为清楚API供大家使用。这些都是setter办法，可传入动画配备参数，或即就是以个布尔型true，表达这是默认动画。Ext.get('elId').setHeight(200,true);//设置高度为200px以默认配备进行动画//设置高度为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,r,b或是任何组合。传入lr参数会得到leftpadding+rightpadding。clip//保存目前溢出（overflow），然后进行裁剪元素溢出部分使用unclip()来移除。unclip//在调用clip()之前，返回原始裁剪部分（溢出）Ext入门基础第35页定位通过ExtCore定义API能迅速地采集元素位置各方面数据，归纳为get或set办法，所有浏览器都可通用。类似于上一节尺寸大小API，多数setter办法支持动画效果。可在第二参数中传入动画配备参数（object-literalconfigurationobject），或即就是以个布尔型true，表达这是默认动画。set/getXset/getYset/getXYset/getOffsetsTo//返回目前元素与送入元素距离varelOffsets=Ext.get('elId').getOffsetsTo(anotherEl);set/getLeftset/getRightset/getTopset/getBottomsetLocation//无论这个元素如何定位，设置其在页面坐标位置。clearPositioning//当文档加载后清除位置并复位到默认set/getPositioning//返回一种包括CSS定位信息对象。有用技巧：连同setPostioning一起，可在更新执行之前，先做一种快照（snapshot），之后便可恢复该元素Ext入门基础第36页动画ExtCore里Fx类是关键类库中最激感人心一种类，它不是最主要，却是最实用一种类

定义了某些常用特效办法.puff//渐隐元素同步还伴伴随向各个方向迟缓地展开。特效结束后，元素会被隐藏（visibility=‘hidden’），不过块元素仍然会在document对象中占据空间。假如需要将元素从DOM树删除，则使用‘remove’配备选项。//默认el.puff();//常见配备选项及默认值el.puff({easing:'easeOut',duration:.5,remove:false,useDisplay:false});slideIn/slideOut//将元素滑入到视图中。fadeIn/fadeOut//将元素从透明渐变为不透明。switchOff//类似单击过后般地闪烁一下元素，然后从元素中间开始收缩。highlight//高亮pause//在任何后续特效开始之前一次暂停。scale//以动画展示元素从开始高度/宽度转换到结束高度/宽度ghost//将元素从视图滑出并伴伴随渐隐。//等等…Ext入门基础第37页事件HTML元素标准事件是指mouseover、mousedown、click、blur、focus、change等能够直接对HTML元素发生事件。在ExtJS中，这些事件处理能够用如下代码：注册一种事件处理函数使用：Ext.get('myElement').on('click',myHandler,myScope);myElement是要注册元素ID，click是事件名称（注意，和HTML元素中申明onXXX不一样，这里不需要on），myHandler是处理函数函数名称，myScope是一种可选参数，指定处理函数绑定对象，也就是处理函数作用域，假如不提供这个参数，则是默认window。撤消一种事件处理函数：Ext.get(‘myElement’).un(‘click’,myHandler,myScope)

参数意义同上。Ext.Elementon办法是addListener办法简写.假如你想在一种元素上添加多种事件处理器能够这样一次搞定。varel=Ext.get(‘myElement’);el.on({

‘click’:{

fn:this.onMyClick,

scope:this,

delay:100//延迟0.1秒执行,高级事件功能

},

'mouseover':{

fn:this.onMyMouseOver,

scope:this

}

});Ext入门基础第38页高级事件事件委托、事件缓冲、事件延迟等这些功能都是属于高级事件控制内容，ExtCore在此方面提供了一系列配备选项。委托delegation减低内存销毁和避免内存泄露隐患是事件委托技术两项好处，其基本要义是：并不是集合内每一种元素都要登记上事件处理器，而是在集合其容器上登记一次便可，这样产生了中央化一种事件处理器，然后就有不停循环该事件周期，使得逐层上报机制付诸实现，只要在容器层面定义就能够。<ulid='actions'><liid='btn-edit'></li><liid='btn-delete'></li><liid='btn-cancel'></li></ul>我们想实现,点击不一样li,产生不一样效果.为此我们也许会这样做.Ext.get(‘btn-edit’).on(‘click,function(e,t){//执行事件详细过程A});Ext.get(‘btn-delete’).on(‘click,function(e,t){//执行事件详细过程B});Ext.get(‘btn-cancel’).on(‘click,function(e,t){//执行事件详细过程C});Ext入门基础第39页高级事件使用事件委托方式替代，在容器身上登记一种事件处理器，按照依附逻辑选择：Ext.get(‘actions’).on(‘click,function(e,t){//在div上登记一种事件switch(t.id){case''btn-edit'://处理特定元素事件详细过程Abreak;case'btn-delete'://处理特定元素事件详细过程Bbreak;case'btn-cancel'://处理特定元素事件详细过程Cbreak;}});基于dom各层通过逐层上报原因，能够说，我们登记了“actions”div一定会被访问得到。这时就是执行我们所指定switch指令，跳到对应匹配元素那部分代码。这样办法具有可伸缩性，由于我们只要维护一种函数就能够控制那么多元素事件。Ext入门基础第40页高级事件是否一次性触发single在登记事件处理器时候能够加入配备这个选项。true代表为事件触发后加入一种下次移除本身处理函数。el.on('click',function(e,t){//执行事件详细过程},this,{single:true//触发一次后不会再执行事件了});延时delay你在登记事件处理器时候能够加入配备这个选项。制定触发事件后处理函数延时执行时间。el.on('click',function(e,t){//执行事件详细过程},this,{delay:1000//延迟事件，响应事件后开始计时（这里一秒）});缓冲buffer

将上面代码delay换成buffer//在缓冲时间内触发事件无效.移除事件句柄removeAllListenersel.removeAllListeners();//在该元素身上移除所有已加入侦听器(事件)。Ext入门基础第41页类编程继承与重写JavaScript本身是基于原型，这与一般基于类编程语言相比，在实现继承机制上有较大出入。JavaScript中创建一种新类那便是修改了某个对象原型（prototype）成果。Ext提供了许多简化这方面工作函数。Ext支持下列类格调编程行为：继承扩展（extend），重写（overrride）/直接覆盖。这意味着开发者能够根据需求加入自己行为，创建自己类，或者修改某些函数让其愈加合适。extend与overrideExt.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.extend(Person,{getName:function(){if(this.isCoding){return'GoAway!';}else{//访问父类办法returnDeveloper.superclass.getName.call(this);}}});varp=newPerson('John','Smith');vard=newDeveloper('John','Smith');alert(p.getName());//JohnSmithalert(d.getName());//JohnSmith第42页类编程继承与重写overrideoverride办法也编辑、修改类其中一种途径，不过本办法不会创建一种新类，而是对现有类给予修改其行为，第一种参数是要覆盖类，第二个参数就是覆盖列表。override办法实际是修改类prototype属性。//我们已申明Person类Ext.override(Person,{getName:function(){//覆盖了旧行为，这次lastname排头returnthis.lastName+''+this.firstName;}});varp=newPerson('John','Smith');

alert(p.getName());//SmithJohn//覆盖了旧行为，这次lastname排头Ext入门基础第43页类编程单例(Singletons)单例另一种较常见说法是“模块设计模式”，假如某一种类静态办法较多，或者该类只须要实例化一次，那么采取单例模式就很不错了。JavaScript单例模式中，我们经常会创建私有JavaScript变量或通过高明闭包手法建立私有办法，以一段程序入口范例代码就能说明多少问题。MyApp=function(){vardata;//外部无法访问data，这是私有组员return{init:function(){//初始化程序},getData:function(){returndata;}};}();Ext.onReady(MyApp.init,MyApp);Ext入门基础第44页类编程命名空间命名空间（Namespaces）(类似于java中包)命名空间对组织代码很方便，可在两方面体现其益处：其一是用了命名空间，很大程度避免了全局空间被污染问题，污染全局组员究竟不是一种好习惯，例如Ext对象本身就是在全局空间一种对象。要养成一种良好习惯，就要把写好类放进一种命名空间中，能够用你公司名字或程序名字决定命名；其二是有助规范好你代码，把相类似或相依赖类都放在同一种名命空间中，也方便向其他开发者指明代码其意图。//两种方式都是同样，后者为佳。Espace('MyCompany','MyCompany.Application','MyCompany.Application.Reports');Espace('MyCompany.Application.Reports');Ext入门基础第45页AJAXExt.Ajax对象继承自Ext.data.Connection，定义为单例提供了一种既统一又高度灵活Ajax通迅服务。利用这个单例对象，就能够处理全体Ajax祈求，并执行有关办法、事件和参数。Ext.Ajax事件每次祈求都触发事件，这是全局要求。beforerequest(conn,opts)任何Ajax祈求发送之前触发。requestcomplete(conn,response,opts)任何Ajax成功祈求后触发。requestexception(conn,response,opts)服务端返回一种错误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入门基础第46页AJAXExt.Ajax属性由于Ext.Ajax是单例，因此你能够在发起祈求时候才覆盖Ext.Ajax属性。这些是最常见属性：method：用于祈求默认办法，注意这里大小写有关系，应为是所有大写（默以为undefined，如不设置参数就是“POST”，不然是“GET”）。extraParams：搜集各属性对象，每次发起祈求就会把该对象身上各属性作为参数发送出去（默以为undefined）需要与Session信息和其他数据交互就要在这里设置。url：祈求目标服务器地址（默以为undefined），假如服务端都用一种url来接收祈求，那么在这里设置过一次就足够了。defaultHeaders：对祈求头部设置对象（默以为undefined）。//每次祈求都将这字段与信息注入到头部中去。Ext.Ajax.defaultHeaders={'Powered-By':'ExtCore'};Ext入门基础第47页AJAXExt.Ajax.requestExt.Ajax.request就是发送与接收服务端函数函数。服务端返用response以决定执行success或failure函数。注意这种success/failure函数是异步，即就是服务端有响应后客户端这边回头调用（回调函数），期用客户端Web页面还能够进行其他任务操作。Ext.Ajax.request({

url:‘login.do’,

//祈求地址

//提交参数组

params:{

LoginName:Ext.get('LoginName').dom.value,

LoginPassword:Ext.get('LoginPassword').dom.value

},

//成功时回调

success:function(response,options){

//获取响应json字符串

varresponseArray=Ext.util.JSON.decode(response.responseText);

if(responseArray.success==true){

Ext.Msg.alert('恭喜','您已成功登录！');

}else{

Ext.Msg.alert('失败','登录失败，请重新登录');

}

}//失败时回调,一般很少写

failure:function(response,opts){ console.log('服务端失效状态代码：'+response.status);}

});Ext入门基础第48页Ext2.0对整个框架进行了重构，最为出色是推出了一个以Component类为基础组件体系，在Component类基础上，使用面向对象方法，设计了一系列组件及控件。因此，要能游刃有余地使用Ext，熟悉Ext组件体系是最基本。

通过组件结构图我们可以一目了然看出整个Ext组件继承及组成体系，当使用一个组件时间，了解他继承体系，这样可方便于我们掌握组件各种特性Ext组件介绍第49页Ext组件介绍第50页Ext组件介绍第51页Ext组件介绍第52页

Ext.FormPanelEXT关键组件应用Ext.tree.TreePanelExt.WindowtoolBarandMenusExt界面中布局Ext.grid.GridPanelRecord

、Store、

DataProxy、DataReader辅助函数第53页Ext组件应用组件能够直接通过new

关键子来创建，例如控件一种窗口，使用newExt.Window()，创建一种表格则使用newExt.GridPanel()。当然，除了某些一般组件以外，一般都会在构造函数中通过传递构造参数来创建组件。组件构造函数中一般都能够包括一种对象，这个对象包括创建组件所需要配备属性及值，组件根据构造函数中参数属性值来初始化组件。第54页Ext.FormPanel一种简单FormPanel效果图第55页Ext.FormPanel一种简单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:false},

{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'}]});第56页Ext.FormPanelExt.FormPanel中数据控件Ext.form.Checkbox,Ext.form.CheckboxGroupExt.form.ComboBoxExt.form.DateFieldExt.form.HtmlEditorExt.form.NumberFieldExt.form.Radio,Ext.form.RadioGroupExt.form.TextAreaExt.form.TextFieldExt.form.TimeFieldExt.form.VTypes第57页toolBarandMenustoolBar是用来寄存功能按钮容器toolBar中能够放置所有FormPanel中控件toolBar能够放置在formPanel,panel,gridPanel,treePanel等容器中示例效果图第58页Ext.tree.TreePanelTree是用来显示树形数据，效果图如下第59页Ext.tree.TreePanel代码实现—定义根节点Varroot=newExt.tree.AsyncTreeNode({ id:'0', text:'未分派权限', expanded:true});第60页Ext.tree.TreePanel代码实现—定义树数据源Varstore=newExt.tree.TreeLoader({ dataUrl:‘loadTreeNode.do’});第61页Ext.tree.TreePanel代码实现—定义树vartree=newExt.tree.TreePanel({ rootVisible:true, autoScroll:true, loader:store, enableDD:true, containerScroll:true, dropConfig:{appendOnly:true}, root:root});vartree=newExt.tree.TreePanel({rootVisible:true,autoScroll:true,loader:new Ext.tree.TreeLoader({ dataUrl:‘loadTreeNode.do’}),enableDD:true,containerScroll:true,dropConfig:{appendOnly:true},root:newExt.tree.AsyncTreeNode({id:'0',text:'未分派权限',expanded:true})});第62页Ext.Window其本身也是一种容器，能够放置所有EXT控件主要是用来处理弹出式窗口varwin=newExt.Window({id:'w',title:‘lyr:新窗口',//窗口显示名称

width:300,height:140,collapsible:true,//是否可折叠

layout:‘column’,//布局方式

model:true,items:[]//窗口需要增加内容}).show();//让窗口显示出来第63页Ext.grid.GridPanelGridPanel是用来显示数据，并且支持分页效果图第64页Ext.grid.GridPanel数据显示非常简单：

HTML文献：

<divid='grid'></div>

JS：

vargrid=newExt.grid.GridPanel({

el:‘grid’,//renderTo:‘myPanel’

ds:ds,//Stroe数据源

cm:cm//columnModle大家能够理解为表头

});

grid.render();第65页首先，一种表格应当有列定义，即定义表头ColumnModel：

//定义一种ColumnModel，表头中有四列

varcm=newExt.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第66页Ext.grid.GridPanel目前就来看看这个Ext.data.Store是如何转换数据。1.二维数组：

//ArrayData

vardata=[

['1','male','name1','descn1'],

['2','male','name1','descn2'],

['3','male','name3','descn3'],

['4','male','name4','descn4'],

['5','male','name5','descn5']

];

//ArrayReader

vards=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告诉我们如何解析这个数据。

目前用是Ext.data.MemoryProxy，它将内存中数据data作为参数传递。Ext.data.ArrayReader专门用来解析数组，并且告诉我们它会按照定义规范进行解析，每行按次序读取四个数据，第一种叫id，第二个叫sex，第三个叫name，第四个descn。这些是跟cm定义中dataIndex对应。这样cm就懂得哪列应当显示那条数据了。

mapping属性用于标识data中读取后数据与标头映射关系，一般是不用设置。但假如我们想让sex数据中name栏中出现，能够设置mapping值。即sexmapping为2,后者为1。

记得要执行一次ds.load()，对数据进行初始化。第67页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:'grid3',

ds:ds,

cm:cm,

sm:sm,//添加地方

title:'HelloWorld'

});第68页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’

,text:“新增”

,handler:function(){alert(“YouclickedButtonA”);}

}

,

newExt.Toolbar.SplitButton({})