Extjs的简单使用手册.ppt

《Extjs的简单使用手册.ppt》由会员分享，可在线阅读，更多相关《Extjs的简单使用手册.ppt（12页珍藏版）》请在第壹文秘上搜索。

1、Extjs的简单使用手册Extjs的概述 Extjs是一个多功能的轻型javascript库。 Extjs对DOM操作，Ajax，事件，动画，模版，00机制的操作等任务都有相应的支持。引用Extjs Extjs分两个包： base包 core包(product版、debug版) 引用顺序 DOM元素获取- 简单选择符 Ext.get() 接受参数：String(ID)、HtmlElement、Ext.Element，返回一个新的实例。 Ext.get(ID值)；/类似getElementById(); Ext.get(el1);/el1是已经获取的元素变量 Ext.get(el1.dom);/

2、表示el1的指定Dom Ext.fly() 接受参数与返回值与Ext.get()一致 Ext.fly(ID值)；/不缓存取得的值 Ext.getDom() 接收参数：String(ID)、DOM节点、Ext.Element,返回一个节点 Ext.getDom(el1); Ext.getDom(ID值)选择符（一）元素选择符 * 表示任意元素 Ext.select(*)/表示任意元素 E 表示搜索E元素 Ext.select(div)/搜索所有div元素 Ext.select(div span)/搜索所有div下的所有span元素 Ext.select(divspan)/搜索所有div下直系子元

3、素的span元素 Ext.select(div+span)/搜索紧随div之后的span元素 Ext.select(div-span)/搜索在div两侧出现的span元素选择符（二）属性选择符EF 表示搜索所有拥有命名为F的属性的E元素 Ext.select(trref);/DOM搜索含有ref属性的所有tr元素Ef=test 表示搜索所有拥有f的属性并且属性值为test的E元素，在jQuery中test两侧必须带或“” Ext.select(trref=Myfield/货物清单)；Ef=test表示搜索所有拥有f的属性并且属性值是以test开头的E元素 Ext.select(trref=My

4、field/货物清单)；Ef$=test表示搜索所有拥有f的属性并且属性值是以test结尾的E元素 Ext.select(trref$=Myfield/货物清单)；Ef*=test表示搜索所有拥有f的属性并且属性值包含test的E元素 Ext.select(trref*=Myfield/货物清单)；Ef%=2表示搜索所有拥有f的属性并且属性值能被2整除的E元素 Ext.select(trref%=2)；Ef!=test表示搜索所有拥有f的属性并且属性值不为test的E元素 Ext.select(trref!=Myfield/货物清单)；选择符（三）伪类选择符-1E:first-child E元

5、素的第一个子元素 Ext.select(div.abc:first-child)/表示查找类为abc的div元素的第一个子元素E:last-child E元素的最后一个子元素 Ext.select(div.abc:last-child)/表示查找类为abc的div元素的最后一个子元素E:nth-child(n) E元素的第n个子元素(从1开始) Ext.select(div.abc:last-child)/表示查找类为abc的div元素的最后一个子元素E:nth-child(odd) E元素的奇数子元素(从1开始) Ext.select(div.abc:odd)/表示查找类为abc的div元素

6、的奇数子元素E:nth-child(even) E元素的偶数子元素(从1开始) Ext.select(div.abc:even)/表示查找类为abc的div元素的偶数子元素E:only-child E元素为其父元素的唯一元素E:checked E元素中拥有一个属性为checked=true的元素E:first E元素结果集中的第一个元素选择符（三）伪类选择符-2E:last E元素结果集中的最后一个元素E:nth(n) E元素结果集中的第n个元素E:odd E元素结果集的奇数元素集合E:even E元素结果集的偶数元素集合E:contains(abc) E元素中包含了值为abc的字符串E:no

7、deValue(abc) E元素包含一个textnode节点，并且节点值为abcE:not(S) S表示一个简单选择符，E元素集合为其中不包含与S匹配的所有元素集合 Ext.select(div:not(div.test);/摒除样式类为test的所有div元素集合E:has(S) E元素集合为包含与S匹配的所有元素的集合E:next(S) 下一个侧边元素与S匹配相符合的元素E:prev(S) 上一个侧边元素与S匹配相符合的元素选择符（四）Css值选择符 Edisplay=none表示Css的display属性等于none的所有E元素集合 Eref=Myfield表示Css的ref属性以Myf

8、ield开始的所有E元素集合 Eref$=Myfield表示Css的ref属性以Myfield结尾的所有E元素集合 Eref*=Myfield表示Css的ref属性包含Myfield的所有E元素集合 Eref%=2表示Css的ref属性值能被2整除的所有E元素集合 Eref!=Myfield/货物清单表示Css的ref属性值不等于Myfield/货物清单的所有E元素集合Css的处理(一)Ext.addClass() 元素添加样式class Ext.fly(test1).addClass(test);Ext.radioClass() 元素两侧不出现与其相同的样式class Ext.fly(tes

9、t1).select(ul:nth-child(2).radioClass(test1);/第二个ul子元素附近的所有子元素如果class是test1则会被取消。Ext.removeClass() 取消元素的样式class Ext.fly(test1).select(li:first).removeClass();Ext.toggleClass() 两种class轮换,添加或移除样式 Ext.fly(test1).select(li:last).toggleClass(test1); Ext.fly(test1).select(li:last).toggleClass(test2); Ext.

10、fly(test1).select(li:last).toggleClass(test1);Ext.hasClass() 是否存在某class样式 Ext.fly(test1).hasClass(test)返回一个boolean值Ext.replaceClass() 替换样式class Ext.fyl(test1).replaceClass(t1,t2);Css的处理(二)Ext.getStyle() 获取元素样式 var t = Ext.fly(test1).getStyle(border);Ext.setStyle() 设置元素样式 Ext.fly(test1).setStyle(colo

11、r,red); Ext.fly(test1).setStyle(display:none,overflow:hidden); Ext.fly(test1).setStyle(color,red,duration:0.5);/附带500毫秒的动画Ext.getColor() 获取颜色（包括前景、背景、边框等） Ext.fly(test1).getColor(border-color);Ext.setOpacity() 设置透明度 Ext.fly(test1).setOpacity(.5); Ext.fly(test1).setOpacity(.5,duration:0.5);Ext.clearO

12、pacity() 清楚透明度设置 Ext.fly(test1).clearOpacity();DOM的游历Ext.is() 传入参数与当前是否一致 Ext.fly(test1).is(div.abc)。Ext.findParent() 从当前节点为起点，查找外围节点，并返回该节点。Ext.findParentNode() 从当前节点的父节点为起点，查找外围节点，并返回该节点。Ext.up() 从当前节点开始，向上寻找“父父”节点Ext.fly(test1).up(div,4)/查找test1的4层内的父父节点中为div元素的节点集合Ext.select() 找寻匹配相应选择符的对应元素集合，返回Ext.CompositeElement类型的组合元素Ext.query() 进行一次Query的查询，返回一个DOM节点的数组，第二个可选参数可以选择查询的起点Ext.query(div:nth-child(2),test1);/从test1起点开始，向内查找div元素下的第二个子元素Ext.child()Ext.down()Ext.parent()Ext.next()Ext.prev()Ext.first()Ext.last()