Extjs的简单使用手册开发部:李炬宏2009-9-29Extjs的概述•Extjs是一个多功能的轻型javascript库。•Extjs对DOM操作,Ajax,事件,动画,模版,0~0机制的操作等任务都有相应的支持。引用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的指定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(‘divspan’)//搜索所有div下的所有span元素–Ext.select(‘div>span’)//搜索所有div下直系子元素的span元素–Ext.select(‘div+span’)//搜索紧随div之后的span元素–Ext.select(‘div-span’)//搜索在div两侧出现的span元素选择符(二)属性选择符•E[F]表示搜索所有拥有命名为F的属性的E元素–Ext.select(‘tr[ref]’);//DOM搜索含有ref属性的所有tr元素•E[f=test]表示搜索所有拥有f的属性并且属性值为test的E元素,在jQuery中test两侧必须带‘’或“”–Ext.select(‘tr[ref=Myfield/货物清单]’);•E[f^=test]表示搜索所有拥有f的属性并且属性值是以test开头的E元素–Ext.select(‘tr[ref^=Myfield/货物清单]’);•E[f$=test]表示搜索所有拥有f的属性并且属性值是以test结尾的E元素–Ext.select(‘tr[ref$=Myfield/货物清单]’);•E[f*=test]表示搜索所有拥有f的属性并且属性值包含test的E元素–Ext.select(‘tr[ref*=Myfield/货物清单]’);•E[f%=2]表示搜索所有拥有f的属性并且属性值能被2整除的E元素–Ext.select(‘tr[ref%=2]’);•E[f!=test]表示搜索所有拥有f的属性并且属性值不为test的E元素–Ext.select(‘tr[ref!=Myfield/货物清单]’);选择符(三)伪类选择符-1•E:first-childE元素的第一个子元素–Ext.select(‘div.abc:first-child’)//表示查找类为abc的div元素的第一个子元素•E:last-childE元素的最后一个子元素–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-childE元素为其父元素的唯一元素•E:checkedE元素中拥有一个属性为checked=true的元素•E:firstE元素结果集中的第一个元素选择符(三)伪类选择符-2•E:lastE元素结果集中的最后一个元素•E:nth(n)E元素结果集中的第n个元素•E:oddE元素结果集的奇数元素集合•E:evenE元素结果集的偶数元素集合•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值选择符•E{display=none}表示Css的display属性等于none的所有E元素集合•E{ref^=Myfield}表示Css的ref属性以Myfield开始的所有E元素集合•E{ref$=Myfield}...