Extjs的简单使用手册.ppt

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);/表示el1的指定DomExt.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下直系子元素的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=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/货物清单)；,选择符（三）伪类选择符-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.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元素结果集的偶数元素集合E:contains(abc)E元素中包含了值为abc的字符串E:nodeValue(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属性以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()元素添加样式classExt.fly(test1).addClass(test);Ext.radioClass()元素两侧不出现与其相同的样式classExt.fly(test1).select(ul:nth-child(2).radioClass(test1);/第二个ul子元素附近的所有子元素如果class是test1则会被取消。Ext.removeClass()取消元素的样式classExt.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.fly(test1).select(li:last).toggleClass(test1);Ext.hasClass()是否存在某class样式Ext.fly(test1).hasClass(test)返回一个boolean值Ext.replaceClass()替换样式classExt.fyl(test1).replaceClass(t1,t2);,Css的处理(二),Ext.getStyle()获取元素样式var t=Ext.fly(test1).getStyle(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).setOpacity(.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.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(),