Extjs的简单使用手册.ppt

1、Extjs的简单使用手册,开发部：李炬宏 2009-9-29,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是已经获取的元素

2、变量 Ext.get(el1.dom);/表示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

3、(divspan)/搜索所有div下直系子元素的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

4、开头的E元素 Ext.select(trref=Myfield/货物清单)； 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/货物清单)

5、；,选择符（三）伪类选择符-1,E:first-child E元素的第一个子元素 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.

6、select(div.abc:odd)/表示查找类为abc的div元素的奇数子元素 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元素结果集中的第一个元素,选择符（三）伪类选择符-2,E:last E元素结果集中的最后一个元素 E:nth(n) E元素结果集中的第n个元素 E:odd E元素结果集的奇数元素集合 E:even E元素结果

7、集的偶数元素集合 E:contains(abc) E元素中包含了值为abc的字符串 E:nodeValue(abc) E元素包含一个textnode节点，并且节点值为abc E: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的

8、display属性等于none的所有E元素集合 Eref=Myfield表示Css的ref属性以Myfield开始的所有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(t

9、est); Ext.radioClass() 元素两侧不出现与其相同的样式class Ext.fly(test1).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);

10、 Ext.fly(test1).select(li:last).toggleClass(test2); Ext.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).getStyl

11、e(border); Ext.setStyle() 设置元素样式 Ext.fly(test1).setStyle(color,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).setOpa

12、city(.5); Ext.fly(test1).setOpacity(.5,duration:0.5); Ext.clearOpacity() 清楚透明度设置 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.q