• 1. Ext JS开发框架简介
  • 2. 框架简介、环境搭建、helloWord示例 EXT核心组件应用Ext框架 EXT框架基础
  • 3. Ext框架简介 怎样搭建EXT运行环境及开发环境 helloWord示例程序 框架简介、环境搭建及HelloWord
  • 4. Ext框架简介什么是ext? Ext是一个Ajax框架,可以用来开发带有华丽外观的富客户端应用,使得我们的b/s应用更加具有活力及生命力,提高用户体验。 Ext是一个用javascript编写,与后台技术无关的前端ajax框架。因此,可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中。 Ext最新版本是ext3.0
  • 5. Ext框架简介Ext提供一系列的对象类,这些基本上都是用于处理WEB页面控件的。 Ext的发布包括三个方面的内容:API参考手册、示例程序及开发包。
  • 6. Ext框架简介EXT API参考手册
  • 7. Ext框架简介示例程序 Ext示例程序包共包括十二大类近100示例程序 。
  • 8. Ext框架简介开发包
  • 9. adapter :负责将里面提供第三方底层库(包括Ext自带的底层库)映射为Ext所支持的底层库。 build :压缩后的ext全部源码(里面分类存放)。 docs : API帮助文档。 exmaples:提供使用ExtJs技术做出的小实例。 resources:Ext UI资源文件目录,如CSS、图片文件都存放在这里面。 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框架简介
  • 10. 怎样搭建EXT运行环境及开发环境开发环境 把Ext的开发包直接复制到WEB工程的目录下
  • 11. helloWord示例程序新建HTML文件并在页面中引入ExtJS的样式及ExtJS库文件 样式文件为resources/css/ext-all.css 库文件主要包含两个:adapter/ext/ext-base.js及ext-all.js 其中ext-base.js是框架基础库,ext-all.js是extjs的核心库。
  • 12. helloWord示例程序helloWord在HTML直接嵌入代码实现
  • 13. helloWord示例程序
  • 14. Ext类库简介Ext框架基础及核心简介 Ext组件简介Ext入门基础
  • 15. Ext类库简介ExtJS 由一系列的类库组成,一旦页面成功加载了ExtJS 库后,我们就可以在页面中调用ExtJS 的类及控件来实现需要的功能。ExtJS 的类库由以下几部分组成: 底层API(core) 控件(widgets) 实用工具(Utils)
  • 16. Ext类库简介 底层API(core):底层API 中提供了对DOM 操作、查询的封装、事件处理、DOM 查询器等基础的功能。其它控件都是建立在这些底层api 的基础上,底层api 位于源代码目录的core 子目录中,包括DomHelper.js、Element.js 等文件。
  • 17. Ext类库简介 控件(widgets):控件是指可以直接在页面中创建的可视化组件,比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等,在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。控件位于源代码目录的widgets 子目录中。
  • 18. Ext类库简介 实用工具Utils:Ext 提供了很多的实用工具,可以方便我们实现如数据内容格式化、JSON数据解码或反解码、对Date、Array、发送Ajax 请求、Cookie 管理、CSS 管理等扩展等功能
  • 19. Ext入门基础尺寸&大小,定位 get,getDOM,getCmp的区别 DOM的增删改查动画类编程事件AJAX
  • 20. Ext入门基础要学习及应用好Ext框架,必须需要理解Html DOM、Ext Element及Component三者之间的区别。 每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的DOM对象,动态改变页面的内容,正是通过使用脚本语言来操作DOM对象实现。(通常使用getElementById/Ext.getDOM获得DOM对象) 仅仅有DOM是不够的,比如要把页面中的某一个节点移到其它位置,要给某一个节点添加阴影效果,要隐藏或显示某一个节点等,我们都需要通过几句 javascript才能完成。因此,Ext在DOM的基础上,创建了Ext Element,可以使用Element来包装任何DOM,Element对象中添加了一系列快捷、简便的实用方法。(通常使用Ext.get获得Element对象) 对于终端用户来说,仅仅有Element是不够的,比如用户要显示一个表格、要显示一棵树、要显示一个弹出窗口等。因此,除了Element以外,Ext 还建立了一系列的客户端界面组件Component,我们在编程时,只要使用这些组件Componet即可实现相关数据展示及交互等,而 Component是较高层次的抽象,每一个组件在渲染render的时候,都会依次通过Element、DOM来生成最终的页面效果。(通常使用Ext.getCmp获得Component对象)
  • 21. Ext入门基础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,代码如下:     
    aaa
      在上面的代码中,Ext.getDom("hello")、Ext.getDom(e)、Ext.getDom(e.dom)等三个语句返回都是同一个DOM节点对象。 Ext中 get、getDom、getCmp的区别
  • 22. 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.getElementById("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的区别
  • 23. Ext入门基础getCmp方法用来获得一个Ext组件,也就是一个已经在页面中初始化了的Component或其子类的对象,getCmp方法中只有一个参数,也就是组件的id。 getCmp方法其实是Ext.ComponentMgr.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、getDom、getCmp的区别
  • 24. Ext.Element占Ext Core库的篇幅很大,其中方法就占据了大部份。因此我们将这些方法可分为下面几类: DOM查询或遍历(如query、select、findParent) CSS(如setStyle、addClass) DOM操控(如createChild、remove) 方位、尺寸(如getHeight、getWidth) Ext入门基础DOM的增删改查
  • 25. DOM查询获取下一个侧边节点,跳过文本节点。可选地可送入一个期待的选择符。 Ext.get('elId').next(); 类似的还有: Ext.get(‘elId’).prev();//上一个侧边节点 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();//高亮 }); 当然,如果你要是对获取的所有元素进行相同的操作,可以直接应用于CompositeElement对象上,如: ps.highlight();//select方法返回的结果可直接如同Element般地操作 或是: Ext.select('p').highlight(); 当然,select参数还可以更复杂一些,其中可以包括CSS选择符,基本的XPath,HTML属性等 Ext入门基础
  • 26. DOM查询----Ext.query与Ext.selectExt.query和Ext.select的作用同是根据CSS选择符,基本的XPath,HTML属性等查找出一个或多个元素。区别在于返回类型上。 分别是:query方法返回的是JavaScript标准的数组类型; select方法返回的是CompositeElement类型,试比较: 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对象上所有的接口,也就是说CompositeElement在Ext中用于表示元素的集合中不论有多少个元素,均被视为一个单独元素处理。 它的用法和单个的Element对象一样。select方法返回的结果可直接如同Element般地操作,一般比query方法常用。 Ext入门基础
  • 27. DOM查询---- DomQuery详解 DomQuery是Ext Core提供的HTML或XML文档选择器,它支持大部分的CSS 3选择器规则,同时提供了一些自定义方式. DomQuery主要有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)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下的同层元素a Ext入门基础
  • 28. 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入门基础
  • 29. 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)'); //选择所有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(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)'); //选择包含p的div (17)Ext.select('div:next(p)'); //选择与包含p的div同层的下一个div (18)Ext.select('div:prev(p)'); //选择与包含p的div同层的下一个div Ext入门基础
  • 30. 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的元素E Domquery的语法可以单独使用,也可以组合在一起使用,例如以下代码: Ext.select('div,span'); //选择所有div元素与span元素 //选择class为red,且是第1个子节点,display属性为none的div Ext.select('div.red:first-child[display=none]'); 如果没有指定选择器开始搜索的根节点,默认是从body节点开始,这就等于每次都要做全文搜索,其性能可想而知,是相当低效的,因此,建议大家在每次搜索时都指定搜索的根节点,减少搜索范围。设置搜索根节点的语法请看下面代码。 Ext.select('div',true, 'elId'); // elId为根节点id //下面这句与上面的效果是一样的 Ext.get('elid').select('div'); Ext入门基础
  • 31. 操纵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入门基础
  • 32. 操纵CSSgetStyle返回该元素的统一化当前样式和计算样式。 var color = Ext.get('elId').getStyle('color'); var zIndx = Ext.get('elId').getStyle('z-index'); var fntFmly = 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入门基础
  • 33. 操纵DOMappendChild 把送入的元素归为这个元素的子元素。 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('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: 'Hi I am the new first child' }); remove从DOM里面移除当前元素,并从缓存中删除。 Ext.get('elId').remove(); // elId在缓存和dom里面都没有 Ext入门基础
  • 34. 操纵DOM- - - -DOMHepler配置项在上面的例子中,大家可能就注意到这样的语法: .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是专用于动态生成装饰元素的实用工具,已解决大多数浏览器之间差别的问题,避免了原始操作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', '

    Hi

    '); Ext入门基础
  • 35. 尺寸&大小某个元素在页面上,我们就想获得到其尺寸大小或改变它的尺寸大小。毫无意外下,Ext Core也把这些任务抽象为清晰的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+right padding。 clip//保存当前的溢出(overflow),然后进行裁剪元素的溢出部分 使用unclip()来移除。 unclip//在调用clip()之前,返回原始的裁剪部分(溢出的)Ext入门基础
  • 36. 定位通过Ext Core定义的API能快速地采集元素位置的各方面数据,归纳为get的或set的方法,全部浏览器都可通用。类似于上一节的尺寸大小的API,多数的setter方法支持动画效果。可在第二参数中传入动画的配置参数(object-literal configuration object),或即就是以个布尔型的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定位信息的对象。有用的技巧:连同setPostioning 一起,可在更新执行之前,先做一个快照(snapshot),之后便可恢复该元素Ext入门基础
  • 37. 动画Ext Core里的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入门基础
  • 38. 事件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.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入门基础
  • 39. 高级事件事件委托、事件缓冲、事件延迟等的这些功能都是属于高级事件的控制内容, Ext Core在此方面提供了一系列的配置选项。 委托delegation 减低内存销毁和防止内存泄露的隐患是事件委托技术的两项好处,其基 本要义是: 并不是集合内的每一个元素都要登记上事件处理器,而是在集合其容器上登记 一次便可,这样产生了中央化的一个事件处理器,然后就有不断循环该事件周 期,使得逐层上报机制付诸实现,只要在容器层面定义就可以。
    我们想实现,点击不同的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入门基础
  • 40. 高级事件使用事件委托的方式代替,在容器身上登记一个事件处理器,按照依 附的逻辑选择: 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': // 处理特定元素的事件具体过程C break; } }); 基于dom各层经过逐层上报的原因,可以说,我们登记了的“actions”的div一定会被访问得到。这时就是执行我们所指定的switch指令,跳到对应匹配的元素那部分代码。这样方法具备可伸缩性,因为我们只要维护一个函数就可以控制那么多的元素的事件。 Ext入门基础
  • 41. 高级事件是否一次性触发single 在登记事件的处理器的时候可以加入配置这个选项。true代表为事件触发后加入一个下次移除本身的处理函数。 el.on('click', function(e,t) { // 执行事件具体过程 }, this, { single: true // 触发一次后不会再执行事件了 }); 延时delay 你在登记事件的处理器的时候可以加入配置这个选项。制定触发事件后 处理函数延时执行的时间。 el.on('click', function(e,t) { // 执行事件具体过程 }, this, { delay: 1000// 延迟事件,响应事件后开始计时(这里一秒) }); 缓冲buffer 将上面代码的delay换成buffer//在缓冲时间内触发事件 无效. 移除事件句柄removeAllListeners el.removeAllListeners();//在该元素身上移除所有已加入的侦听器(事件)。 Ext入门基础
  • 42. 类编程----继承与重写JavaScript本身是基于原型的,这与普通基于类的编程语言相比,在实现继承的机制上有较大的出入。JavaScript中创建一个新类那便是修改了某个对象原型(prototype)的结果。Ext提供了许多简化这方面工作的函数。 Ext支持以下类风格的编程行为:继承扩展(extend),重写(overrride)/直接覆盖。这意味着开发者可以根据需求加入自己的行为,创建自己的类,或者修改某些函数让其更加合适。 extend与override Ext.extend方法创建新一个类之定义。第一个参数是父类,第二个参数是属性/函数的列表。第二个参数加入到对象的prototype中extend过后,Ext.extend还会产生一个superclass的引用。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 Developer.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
  • 43. 类编程----继承与重写override override方法也编辑、修改类的其中一种途径,不过本方法不会创建一个新类,而是对现有类予以修改其行为,第一个参数是要覆盖的类,第二个参数就是覆盖列表。override方法实际是修改类prototype的属性。 // 我们已声明的Person类 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入门基础
  • 44. 类编程----单例(Singletons)单例另一种较常见的说法是“模块设计模式”,如果某一个类静态方法较多,或者该类只须要实例化一次,那么采用单例的模式就很不错了。JavaScript的单例模式中,我们常常会创建私有JavaScript变量或通过高明的闭包手法建立私有的方法,以一段程序入口的范例代码就能说明多少问题。 MyApp = function(){ var data; //外部无法访问data,这是的私有成员 return { init: function(){ // 初始化程序 }, getData: function(){ return data; } }; }(); Ext.onReady(MyApp.init, MyApp); Ext入门基础
  • 45. 类编程----命名空间命名空间(Namespaces)(类似于java中的包) 命名空间对组织代码很方便,可在两方面体现其益处:其一是用了命名空间,很大程度避免了全局空间被污染的问题,污染全局的成员终究不是一个好习惯,例如Ext对象本身就是在全局空间的一个对象。要养成一个良好的习惯,就要把写好的类放进一个命名空间中,可以用你公司的名字或程序的名字决定命名;其二是有助规范好你的代码,把相类似的或相依赖的类都放在同一个名命空间 中,也方便向其它开发者指明代码其意图。 // 两种方式都是一样的,后者的为佳。 Ext.namespace( 'MyCompany', 'MyCompany.Application', 'MyCompany.Application.Reports' ); Ext.namespace('MyCompany.Application.Reports'); Ext入门基础
  • 46. 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入门基础
  • 47. AJAXExt.Ajax的属性 由于Ext.Ajax是单例,所以你可以在发起请求的时候才覆盖Ext.Ajax属性。 这些是最常见的属性: method:用于请求的默认方法,注意这里大小写有关系的,应为是全部 大写(默认为undefined,如不设置参数就是“POST”,否则是“GET”)。 extraParams:收集各属性的对象,每次发起请求就会把该对象身上的各 属性作为参数发送出去(默认为undefined)需要与Session信息和其它 数据交互就要在这里设置。 url: 请求目标的服务器地址(默认为undefined),如果服务端都用 一个url来接收请求,那么在这里设置过一次就足够了。 defaultHeaders:对请求头部设置的对象(默认为undefined)。 // 每次请求都将这字段与信息注入到头部中去。 Ext.Ajax.defaultHeaders = { 'Powered-By': 'Ext Core' };Ext入门基础
  • 48. AJAXExt.Ajax.request Ext.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字符串 var responseArray =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入门基础
  • 49. Ext2.0对整个框架进行了重构,最为杰出的是推出了一个以Component类为基础的组件体系,在Component类基础上,使用面向对象的方法,设计了一系列的组件及控件。因此,要能游刃有余地使用Ext,熟悉Ext组件体系是最基本的。   通过组件结构图我们可以一目了然的看出整个Ext组件继承及组成体系,当使用一个组件的时间,了解他的继承体系,这样可以便于我们掌握组件的各种特性Ext组件简介
  • 50. Ext组件简介
  • 51. Ext组件简介
  • 52. Ext组件简介
  • 53. Ext.FormPanelEXT核心组件应用Ext.tree.TreePanelExt.WindowtoolBar and MenusExt界面中的布局Ext.grid.GridPanelRecord 、 Store 、 DataProxy、DataReader辅助函数
  • 54. Ext组件的应用组件可以直接通过new 关键子来创建,比如控件一个窗口,使用new Ext.Window(),创建一个表格则使用new Ext.GridPanel()。当然,除了一些普通的组件以外,一般都会在构造函数中通过传递构造参数来创建组件。 组件的构造函数中一般都可以包含一个对象,这个对象包含创建组件所需要的配置属性及值,组件根据构造函数中的参数属性值来初始化组件。
  • 55. Ext.FormPanel一个简单的FormPanel效果图
  • 56. 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: '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'}] });
  • 57. Ext.FormPanelExt.FormPanel中的数据控件 Ext.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
  • 58. toolBar and MenustoolBar是用来存放功能按钮的容器 toolBar中可以放置所有的FormPanel中的控件 toolBar可以放置在formPanel,panel,gridPanel,treePanel等容器中 示例效果图
  • 59. Ext.tree.TreePanelTree是用来显示树形数据的,效果图如下
  • 60. Ext.tree.TreePanel代码实现—定义根节点Var root = new Ext.tree.AsyncTreeNode({ id : '0', text : '未分配权限', expanded: true });
  • 61. Ext.tree.TreePanel代码实现—定义树的数据源Var store = new Ext.tree.TreeLoader({ dataUrl : ‘loadTreeNode.do’ });
  • 62. Ext.tree.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({ dataUrl : ‘loadTreeNode.do’ }), enableDD:true, containerScroll: true, dropConfig: {appendOnly:true}, root : new Ext.tree.AsyncTreeNode({ id : '0', text : '未分配权限', expanded: true }) });
  • 63. Ext.Window其本身也是一个容器,可以放置所有的EXT控件 主要是用来处理弹出式窗口的var win=new Ext.Window({ id:'w', title:‘lyr:新窗口',//窗口显示名称 width:300, height:140, collapsible: true,//是否可折叠 layout : ‘column’,//布局方式 model:true, items:[]//窗口需要增加的内容 }).show();//让窗口显示出来
  • 64. Ext.grid.GridPanelGridPanel是用来显示数据,并且支持分页 效果图
  • 65. Ext.grid.GridPanel数据的显示非常简单: HTML文件:
    JS: var grid = new Ext.grid.GridPanel({      el: ‘grid’, //renderTo: ‘myPanel’      ds: ds,//Stroe数据源      cm: cm//columnModle 大家可以理解为表头 }); grid.render();
  • 66. 首先,一个表格应该有列定义,即定义表头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
  • 67. Ext.grid.GridPanel现在就来看看这个Ext.data.Store是如何转换数据的。1.二维数组: // ArrayData var data = [      ['1','male','name1','descn1'],      ['2','male','name1','descn2'],      ['3','male','name3','descn3'],      ['4','male','name4','descn4'],      ['5','male','name5','descn5'] ]; // ArrayReader var ds = new Ext.data.Store({      proxy: new Ext.data.MemoryProxy(data),      reader: new Ext.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值。即sex的mapping为2,后者为1。 记得要执行一次ds.load(),对数据进行初始化。
  • 68. Ext.grid.GridPanel如何在表格中添加CheckBox呢? var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([     new Ext.grid.RowNumberer(),//自动行号     sm,//添加的地方     {header:'编号',dataIndex:'id'},     {header:'性别',dataIndex:'sex'},     {header:'名称',dataIndex:'name'},     {header:'描述',dataIndex:'descn'} ]); var grid = new Ext.grid.GridPanel({     el: 'grid3',     ds: ds,     cm: cm,     sm: sm,//添加的地方     title: 'HelloWorld' });
  • 69. Ext.grid.GridPanel分页工具栏 var grid = new Ext.grid.GridPanel({         el: ‘grid’,         ds: ds,         cm: cm,         sm: sm,         title: ‘我的Grid’,         bbar: new Ext.PagingToolbar({ //在底部添加             pageSize: 10,             store: ds,             displayInfo: true,             displayMsg: ‘显示第 {0} 条到 {1} 条记录,一共 {2} 条’,             emptyMsg: “没有记录”         }),         tbar: new Ext.Toolbar({ //在顶部添加         items:[ {                      id:‘buttonA’                      ,text:“新增”                      ,handler: function(){ alert(“You clicked Button A”); }                  } ,                 new Ext.Toolbar.SplitButton({})                 ,{                      id:‘buttonB’                      ,text:“修改"                      ,handler: function(){ alert("You clicked Button B"); }                  } , '-’ , {                     id:‘buttonc’                      ,text:“删除"                 }             ]          })      });     grid.render();
  • 70. Record首先需要明确是,ExtJS 中有一个名为Record 的类,表格等控件中使用的数据是存放在Record 对象中,一个Record 可以理解为关系数据表中的一行,也可以称为记录。Record 对象中即包含了记录(行中各列)的定义信息(也就是该记录包含哪些字段,每一个字段的数据类型等),同时又包含了记录具体的数据信息(也就是各个字段的值)。 Ext.onReady(function(){ var MyRecord = Ext.data.Record.create([//使用Record 的create 方法创建一个记录集MyRecord {name: 'title'}, {name: 'username', mapping: 'author'}, {name: 'loginTimes', type: 'int'}, {name: 'lastLoginTime', mapping: 'loginTime', type: 'date'} ]); var r=new MyRecord({//可以通过MyRecord 来创建包含字段值的Record 对象( 模拟record数据) title:"日志标题", username:"easyjf", loginTimes:100, loginTime:new Date() }); alert(MyRecord.getField("username").mapping); alert(MyRecord.getField("lastLoginTime").type); alert(r.data.username); alert(r.get("loginTimes")); });
  • 71. StoreStore 可以理解为数据存储器,可以理解为客户端的小型数据表,提供缓存等功能。在ExtJS 中,GridPanel、ComboBox、DataView 等控件一般直接与Store 打交道,直接通过Store来获得控件中需要展现的数据等。一个Store 包含多个Record,同时Store 又包含了数据来源,数据解析器等相关信息,Store 通过调用具体的数据解析器(DataReader)来解析指定类型或格式的数据(DataProxy),并转换成记录集的形式保存在Store 中,作为其它控件的数据输 入。数据存储器由Ext.data.Store 类定义,一个完整的数据存储器要知道数据源(DataProxy)及数据解析方式(DataReader)才能工作,在Ext.data.Store 类中数据源由proxy 配置属性定义、数据解析(读取)器由reader 配置属性定义,一个较为按部就班创建Store 的代码如下var MyRecord = Ext.data.Record.create([ {name: 'title'}, {name: 'username', mapping: 'author'}, {name: 'loginTimes', type: 'int'}, {name: 'lastLoginTime', mapping: 'loginTime', type: 'date'} ]); var dataProxy=new Ext.data.HttpProxy({url:“findMyData.do”}); //创建数据来源 var theReader=new Ext.data.JsonReader({//创建Json数据解析器 totalProperty: “results”, //总记录数 root: “rows”, //服务器返回的数据 id: "id" },MyRecord); var store=new Ext.data.Store({ proxy:dataProxy, //设定数据来源 reader:theReader //设定数据解析器 }); store.load(); 当然,这样按部就班的写难免代码较多,Store 中本身提供了一些快捷创建Store 的方式, 具体的参见Ext手册
  • 72. DataReaderDataReader 表示数据读取器,也就是数据解析器,其负责把从服务器或者内存数组、xml文档中获得的杂乱信息转换成ExtJS 中的记录集Record 数据对象,并存储到Store 里面的记录集数组中。 数据解析器的基类由Ext.data.DataReader定义,其它具体的数据解析器都是该类的子类,ExtJS 中提供了读取二维数组、JSon 数据及Xml 文档的三种数据解析器,分别用于把内存中的二级数组、JSON 格式的数据及XML 文档信息解析成记录集。 ArrayReader Ext.data.ArrayReader-数组解析器,用于读取二维数组中的信息,并转换成记录集Record 对象。 var MyRecord = Ext.data.Record.create([ {name: 'title', mapping:1}, {name: 'username', mapping:2}, {name: 'loginTimes', type:3} ]); var myReader = new Ext.data.ArrayReader({ id: 0 }, MyRecord); 这里定义的myReader 可以读取下面的二维数组: [ [1, '测试', '小王',3], [2, '新年好', 'williamraym',13] ]
  • 73. DataReaderJsonReader Ext.data.JsonReader-Json 数据解析器,用于读取JSON 格式的数据信息,并转换成记录集Record 对象 var MyRecord = Ext.data.Record.create([ {name: 'title'}, {name: 'username', mapping: 'author'}, {name: 'loginTimes', type: 'int'} ]); var myReader = new Ext.data.JsonReader({ totalProperty: “results”,//为2 root: “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手册
  • 74. DataReaderXmlReader Ext.data.XmlReader-XML 文档数据解析器,用于把XML 文档数据转换成记录集Record对象 var MyRecord = Ext.data.Record.create([ {name: 'title'}, {name: 'username', mapping: 'author'}, {name: 'loginTimes', type: 'int'} ]); var myReader = new Ext.data.XmlReader({ totalRecords: "results", record: "rows", id: "id" }, MyRecord); 上面的myReader 能够解析下面的xml 文档信息: 2 1 测试</ title > <author>小王</ author > <loginTimes>3</ loginTimes > </row> <row> <id>2</id> <title>新年好</ title > <author> williamraym </ author > <loginTimes>13</ loginTimes > </row> </topics></li><li data-id="75">75. DataProxyDataProxy 字面解释就是数据代理,也可以理解为数据源,也即从哪儿或如何得到需要交给DataReader 解析的数据。 数据代理(源)基类由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手册。</li><li data-id="76">76. Ext.layout.AccordionEXT页面布局 Ext.layout.FitLayoutExt.layout.CardLayoutExt.layout.ColumnLayoutExt.layout.BorderLayoutExt.layout.FormLayoutExt.layout.TableLayout</li><li data-id="77">77. Accordion布局Ext中布局的方式-- Ext.layout.Accordion 由类Ext.layout.Accordion定义,名称为accordion,表示可折叠的布局,也就是说使用该布局的容器组件中的子元素是可折叠的形式在布局中配置不同的参数,会展示出不同的效果。 如:animate为true,表示在执行展开折叠时是否应用动画效果。 activeOnTop为true,表示在点击每一个子元素的头部名称或右边的按钮,则会展开该面板,收缩其它已经展开的面板,并将点击的那个面板置于顶部显示。 具体的各个控件的动作和效果大家可以参考API</li><li data-id="78">78. BorderLayout局Ext中布局的方式-- Ext.layout.BorderLayout 由类Ext.layout.BorderLayout定义,布局名称为border。该布局把容器分成东南西北中五个区域,分别由east,south, west,north, center来表示,在往容器中添加子元素的时候,我们只需要指定这些子元素所在的位置,Border布局会自动把子元素放到布局指定的位置</li><li data-id="79">79. CardLayout布局Ext中布局的方式--Ext.layout.CardLayout (选项卡) 由Ext.layout.CardLayout类定义,名称为card,该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求 var card = new Ext.Panel({ layout : "card", activeItem : activeCard, layoutOnTabChange: true, width : 640, layoutConfig : {animate : true}, items : [ {height: 250,layout : 'fit',items : [diseaseWQZInfo]}, {height: 250,layout : 'fit',items : [diseaseYQZInfo] } ] }); </li><li data-id="80">80. ColumnLayout布局Ext中布局的方式-- Ext.layout.ColumnLayout 由Ext.layout.ColumnLayout类定义,名称为column。列布局把整个容器组件看成一列,然后往里面放入子元素的时候,可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度,而width则是使用绝对象素的方式指定列宽度,在实际应用中可以混合使用两种方式。</li><li data-id="81">81. FitLayout布局Ext中布局的方式--Ext.layout.FitLayout 由Ext.layout. FitLayout类定义,名称为fit。填充布局方式是把容器中的子元素覆盖容器的整个区域</li><li data-id="82">82. FormLayout布局Ext中布局的方式--Ext.layout.FormLayout 这种布局方式由类Ext.layout.FormLayout提供,定义的名称为form。一般情况只用于formPanel的布局,把formPanel中的各子元素按每行一列的方式进行布局显示。 </li><li data-id="83">83. TableLayout布局Ext中布局的方式--Ext.layout.TableLayout -这种布局方式由类Ext.layout. TableLayout提供,定义的名称为table。一般情况不采用这种布局方式,因为其不能自适合屏幕或其父容器的宽度和高度。</li><li data-id="84">84. Ext界面中的布局界面布局的综合应用 </li><li data-id="85">85. Ext辅助函数Ext提供了增强Javascript与JSON若干方面的函数,功能上各自不一样但目 的都是为了更方便地程序员使用好前端设施。 apply与applyIf apply 复制一个JavaScript对象的所有属性至obj,第一个参数为属性接受方 对象,第二个参数为属性源对象。注意即使目的对象都有同名属性,也会被覆盖。 var person = { name: 'John Smith', age: 30 }; Ext.apply(person, { age:20, hobby: 'Coding', city: 'London' }); // person对象age变成20,同时多了hobby与city两个属性 applyIf则不会覆盖同名属性.</li><li data-id="86">86. Ext辅助函数Url Encoding/Decoding urlEncode 把一个对象转换为一串以编码的URL字符。例如Ext.urlEncode({foo: 1, bar: 2});变为"foo=1&bar=2"。可选地,如果遇到属性的类型是数组 的话,那么该属性对应的key就是每个数组元素的key,逐一进行“结对 的”编码。 var params = { foo: 'value1', bar: 100 }; var s = Ext.encode(params); // s形如foo=value1&bar=100 urlDecode则是转回来</li><li data-id="87">87. Ext辅助函数数组 Ext core有为JavaScript数组和其他类型的collections提供方法。 each 迭代一个数组,包括Nodelists或CompositeElements,数组中每个成员 都将调用一次所传函数,直到函数返回false才停止执行。 Ext.each([1, 2, 3, 4, 5], function(num){ alert(num); }); toArray 将可以迭代的集合(collection)转换为相当的JavaScript数组。 var arr1 = Ext.toArray(1); // arr1 = [1]; // arr2 = Ext elements [] var arr2 = Ext.toArray(Ext.select('div));</li><li data-id="88">88. Ext辅助函数JSON JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 JSON和XML都是基于文本的,两者都使用Unicode编码。JSON和XML都很容易阅读。主观上,JSON更清晰,冗余更少。XML适合标记文档 (配置文件),JSON更适合数据交换 JSON的语法很简单,就是使用大括号'{}',中括号'[]',逗号',',冒号':',双引号'“”'。数据类型:嵌套对象、数组、字符串、数字、布 尔值或空值 1)对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称” 后跟一个“:”(冒号);“‘名称/值’ 对”之间使用“,”(逗号) 如:{name:”小王”,sex:”男”}  2)数组是值(value)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间使用 “,”(逗号)分隔。 如:{“FBI":[{"name":"rose","age":"25"},{"name":"jack","age":"25"}]} //引号可省略 3)值(value)可以是双引号括起来的字符串(string)、数值(number)、true、false、 null、对象(object)或者数组(array)。这些结构可以嵌套。 当与服务器交换数据的时候,就要转换为原生的JavaScript形式。有以下两种辅助方法。 encode 对一个对象,数组,或是其它值编码,转换为适合外界使用的格式。 var s = Ext.encode({ foo: 1, bar: 2 }); //s是'{foo=1,bar=2}'这样。 decode 对应着encode, decode是将JSON字符串解码(解析)成为JavaScript 对象。在接受Ajax响应的前期步骤中就会经常使用这个方法处理文本变 为JavaScript对象。 var s = '{foo=1,bar=2}'; var o = Ext.decode(s); // o现在有两个属性,foo和bar。o={foo:1,bar:2}</li><li data-id="89">89. Ext辅助函数浏览器与OS的判定 Ext带有一系列的浏览器判定的功能,以解决主流浏览器之间有差异的问题, 在JavaScript与CSS方面都有判定技术,也适应复杂的情境。 对浏览器的判定情况: Internet Explorer - Ext.isIE, Ext.isIE6, Ext.isIE7, Ext.isIE8 Firefox - Ext.isGecko, Ext.isGecko2, Ext.isGecko3 Opera - Ext.isOpera Chrome - Ext.isChrome Safari - Ext.isSafari, Ext.isSafari2, Ext.isSafari3 WebKit - Ext.isWebKit Operating Systems - Ext.isLinux, Ext.isWindows, Ext.isMac if(Ext.isIE){ // 执行该浏览器的专用代码 }</li><li data-id="90">90. Ext辅助函数CSS CSS也有类似的判定,不同的样式会根据不同的操作环境适当添加到根元素和body上,目的是更方便地解决好浏览器怪辟问题。在strict模式环境中,样 式ext-strict就会加入到root,其余这些可适当地加入到body中去。 .ext-ie, .ext-ie6, .ext-ie7, .ext-ie8 .ext-gecko, .ext-gecko2, .ext-gecko3 .ext-opera .ext-safari .ext-chrome .ext-mac, .ext-linux /* 当这是strict mode模式而且是safari的环境中,字体便有变化。*/ .ext-strict .ext-safari .sample-item{ font-size: 20px; }</li><li data-id="91">91. Ext辅助函数类型判定 JavaScript是一门弱类型语言,要搞清楚变量是什么类型自然很有必要。这 方面,Ext有若干如下的方法: isEmpty 如果传入的值是null、undefined或空字符串,则返回true。 alert(Ext.isEmpty('')); isArray 返回true表名送入的对象是JavaScript的array类型对象,否则为false。 alert(Ext.isArray([1, 2, 3])); isObject 检查传入的值是否为对象。 alert(Ext.isObject({})); isFunction 检查传入的值是否为函数。 alert(Ext.isFunction(function(){}));</li><li data-id="92">92. Ext辅助函数时控代码(定时器) Task Runner是一个以特定时间为间隔然后执行函数的类。这对进行操作是比较有用的,例如每30秒的间隔刷新内容(Ajax)。 TaskMgr对象是TaslRunner的单例,这样使用起这个Task Runner便很快了 var stop = false; var task = { run: function(){ if(!stop){ alert(new Date()); }else{ runner.stop(task); // 有需要的话这里我们也能停止任务 }}, interval: 30000 // 每30秒一周期 }; var runner = new Ext.util.TaskRunner(); runner.start(task); //使用TaskMgr Ext.TaskMgr.start({ run: function(){ alert(new Date()); }, interval: 1000 });</li><li data-id="93">93. Ext辅助函数时控代码(定时器) DelayedTask就是提供一个快捷的方式达到“缓冲”某个函数执行的目的。调用它之后,那个函数就会等待某段时间过去以后才会被执行。在此等待的期间中,如果task方法再被调用,原来的调用计时就会被取消。因此每一周期内最好只调用task方法一次。譬如在用户是否完成输入的情景,这方法可适用: var task = new Ext.util.DelayedTask(function(){ alert(Ext.getDom('myInputField').value.length); }); // 调用函数之前等待500ms,如果用户在500ms内按下其他的键,这就会等于作废,重新开始 500ms的计算。 Ext.get('myInputField').on('keypress', function(){ task.delay(500); }); 注意我们这里是为了指出DelayedTask的用途。登记事件的同时也能对addListener/on的配置项设置。</li><li data-id="94">94. Ext代码调试的一些技巧合理设置断点 合理利用alert方法来查看变量; 正确地理解fireBug提供的错误信息; 合理地利用fireBug跟踪对象的属性值的变化、查看对象的属性和方法 </li><li data-id="95">95. Thanks !</li> </ul> </div> <div role="tabpanel" class="tab-pane active" id="profile"> <img class="detail-img" src="https://sppt.open-open.com/image/e1817a7920f798af820c59a50c72c816_all"> </div> </div> </div> </div> <div class="col-md-4"> <div class="box side-box "> <div class="title"> <h3><i class="fa fa-tags" aria-hidden="true"></i> 关键词</h3> </div> <p class="tags mt10"> <a class="" href="/ppt/tag/extjs.html">ExtJS</a> <a class="" href="/ppt/tag/javascript-kuangjia.html">JavaScript框架</a> <a class="" href="/ppt/tag/shouce.html">手册</a> <a class="" href="/ppt/tag/css.html">CSS</a> <a class="" href="/ppt/tag/go.html">Go</a> </p> </div> <div class="box side-box "> <div class="title"> <h3>相关PPT</h3> </div> <div class="items"> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/def89c654bbc41008f041ca6b9115a8b.html" target="_blank"><img src="https://sppt.open-open.com/img_w/e1817a7920f798af820c59a50c72c816_0_100"></a></div><div class="content"><a href="/ppt/def89c654bbc41008f041ca6b9115a8b.html"> Ext JS 开发框架简介</a></div></div> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/72d41670c64e48189ee4593ea988aaab.html" target="_blank"><img src="https://sppt.open-open.com/img_w/2aeedeec9e6950901edc29e03b721303_0_100"></a></div><div class="content"><a href="/ppt/72d41670c64e48189ee4593ea988aaab.html"> EXT 用法简介</a></div></div> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/cd39c9ecb77d448db59bc8f4f8a0a724.html" target="_blank"><img src="https://sppt.open-open.com/img_w/5325bfd4b0d26a11620910b0a50e3f38_0_100"></a></div><div class="content"><a href="/ppt/cd39c9ecb77d448db59bc8f4f8a0a724.html"> extjs框架简介</a></div></div> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/9574590ea04b46f88311b773380f6bbf.html" target="_blank"><img src="https://sppt.open-open.com/img_w/cedae9a810d97fa937043126fa260b3c_0_100"></a></div><div class="content"><a href="/ppt/9574590ea04b46f88311b773380f6bbf.html"> Yii 框架简介</a></div></div> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/92d084cf87aa4b8181fffd8251b20624.html" target="_blank"><img src="https://sppt.open-open.com/img_w/4db80b1be9af8081d00a628cd057406a_0_100"></a></div><div class="content"><a href="/ppt/92d084cf87aa4b8181fffd8251b20624.html"> Ext开发视频教程</a></div></div> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/93f4d9a1999340f383213940b965c0ab.html" target="_blank"><img src="https://sppt.open-open.com/img_w/17fa5293d89bce83b045ca6955cdea84_0_100"></a></div><div class="content"><a href="/ppt/93f4d9a1999340f383213940b965c0ab.html"> 《Easy-Ext》第五讲Ext基础架构_操作DOM(二)</a></div></div> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/d7b8cc349e46428d95f259d4a067f03b.html" target="_blank"><img src="https://sppt.open-open.com/img_w/dced126290385aa8a5fa182af539613f_0_100"></a></div><div class="content"><a href="/ppt/d7b8cc349e46428d95f259d4a067f03b.html"> ExtJS简介</a></div></div> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/0d3120ca871f4f549c8db4a561ae916c.html" target="_blank"><img src="https://sppt.open-open.com/img_w/4473c52709085f034764a1b04b527e87_0_100"></a></div><div class="content"><a href="/ppt/0d3120ca871f4f549c8db4a561ae916c.html"> 《Easy-Ext》第四讲Ext基础架构_基本使用(一)</a></div></div> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/3d6a42d0a038490a83b31073b7200c3a.html" target="_blank"><img src="https://sppt.open-open.com/img_w/2c12819bd6306ce2b2c44614a781f9b7_0_100"></a></div><div class="content"><a href="/ppt/3d6a42d0a038490a83b31073b7200c3a.html"> OSGi 框架入门介绍</a></div></div> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/4c6f4058fcbc48f6a58779b64304f3bf.html" target="_blank"><img src="https://sppt.open-open.com/img_w/8574a5b274cd217dd6176af438988380_0_100"></a></div><div class="content"><a href="/ppt/4c6f4058fcbc48f6a58779b64304f3bf.html"> 《Easy-Ext》第七讲Ext基础架构_总结(四)</a></div></div> </div> </div> </div> </div> </div> </div> <footer > <div class="container py-5"> <div class="row"> <div class="col-md-3"> <h5>社区</h5> <div class="row"><div class="col-md-6"><a class="text-muted" href="/project/">项目</a></div><div class="col-md-6"><a class="text-muted" href="/solution/">问答</a></div><div class="col-md-6"><a class="text-muted" href="/wenku/">文库</a></div><div class="col-md-6"><a class="text-muted" href="/code/">代码</a></div><div class="col-md-6"><a class="text-muted" href="/lib/">经验</a></div><div class="col-md-6"><a class="text-muted" href="/news/">资讯</a></div></div> <ul class="list-unstyled text-small ut-mt20"><li><a class="text-muted" title=" 安卓开发专栏" target="_blank" href="http://www.open-open.com/lib/list/177">安卓开发专栏</a></li><li><a class="text-muted" href="http://www.open-open.com/lib/tag/开发者周刊" target="_blank" rel="tag">开发者周刊</a></li><li><a class="text-muted" href="http://www.open-open.com/lib/view/open1475497562965.html" target="_blank" rel="tag">Android Studio 使用推荐</a></li><li><a class="text-muted" href="http://www.open-open.com/lib/view/open1475497355674.html" target="_blank" rel="tag">Android开发推荐</a></li></ul> </div> <div class="col-md-3"> <h5>帮助中心</h5> <ul class="list-unstyled text-small"><li><a class="text-muted" href="/upload.html">文档上传须知</a></li></ul> <h5>关于我们</h5> <ul class="list-unstyled text-small"><li><a class="text-muted" href="/about.html">关于深度开源</a></li><li><a class="text-muted" href="/duty.html">免责声明</a></li><li><a class="text-muted" href="/contact.html">联系我们</a></li></ul> </div> <div class="col-md-6 text-center"><img class=center-block src="https://static.open-open.com/img/logo01.svg" width=190px alt="深度开源"><small class="d-block mb-3 text-muted ut-mt40">© 2006-2019 深度开源 —— 开源项目,开源代码,开源文档,开源新闻,开源社区  杭州精创信息技术有限公司  <br/><br/><img src="https://static.open-open.com/img/beian.png"/><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010602002439">  浙公网安备 33010602002439号</a>  <a target="_blank" href="http://www.beian.miit.gov.cn">浙ICP备09019653号-31</a></small></div> </div> </div> </footer> <div id="fTools"><span id="gotop"> <i class="fa fa-arrow-up" aria-hidden="true"></i> </span><span id="feedback" title="建议反馈"> <i class="fa fa-inbox" aria-hidden="true"></i></span></div> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script type="text/javascript" src="https://static.open-open.com/js/lib.js"></script> <script type="text/javascript" src="https://static.open-open.com/assets/jquery-confirm/jquery-confirm.js?v=4.7.0"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://static.open-open.com/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://static.open-open.com/js/base.js?v=2.002"></script> <script type="text/javascript" src="https://static.open-open.com/js/jq-plug.js?v=2.002"></script> <script> $(function () { JC.reminderPop();//弹出用户信息 $(".link-login").click(function(){ JC.lORr('login'); }); $("#topSearch").searchInit(); //用户登录状态 JC.setLogin(false); }); </script> <!-- JavaScript at the bottom for fast page loading --> <script type="text/javascript" src="https://static.open-open.com/js/playslides.js?v=2.001"></script> <script> JC.init("", "9153", "ppt", 6,false); var consume_gold_cost = 8, uId = "", cId = "9153", slug = "def89c654bbc41008f041ca6b9115a8b", title = "Ext JS 开发框架简介", summary = ""; var category_name = ""; var tagList = [{id:180, name: "ExtJS"}, {id:3757, name: "JavaScript框架"}, {id:20049, name: "手册"}, {id:94, name: "CSS"}, {id:2622, name: "Go"}]; var num_page = "1"; var jc = {}, fav = []; $(function () { window._bd_share_config = {"common": {"bdSnsKey": {}, "bdText": "", "bdMini": "2", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "32"}, "share": {}};with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'https://static.open-open.com/assets/baidushare/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)]; var images = {thumb: [], big: []}; var pages =95; var img = 'https://sppt.open-open.com/image/e1817a7920f798af820c59a50c72c816_'; for (var i = 0; i < pages; i++) { images.thumb.push(img + i + "_98_54"); images.big.push(img + i); } var slide = $('.slide-box').pss({autoSlide: false, scale: [16, 9], images: images, maxHeight: 405}); $("#article_content li").click(function () {slide.slide_goto($(this).data("id"));$('body,html').animate({scrollTop:0}, 500);}); }); </script> <script src="https://static.open-open.com/js/docshow.js?v=2.001"></script> <script> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); (function () {var src = "https://jspassport.ssl.qhimg.com/11.0.1.js?40291de101d60af5180c55eb7057c18e";document.write('<script src="' + src + '" id="sozz"><\/script>');})(); </script> <!-- end scripts --> </body> </html>