Ext.Js核心函数( 三)
Ext.js核心函数( 三)
ExtJs 核心函数简介
1.ExtJs提供的常用函数2.get、fly、getCmp、getDom、getBody、getDoc3.query函数和select函数4.encode函数和decode函数5.Ext.each函数6.Ext.util.Format对数据进行格式化7.Ext.util.TaskRunner8.update方法局部更新网页内容
Ext中包含了几个以get开头的方法，这些方法可以用来得到文档中DOM、得到当前文档中的组件、得到Ext元素等，在使用中要注意区别使用 1、get方法 get方法用来得到一个Ext元素，也就是类型为Ext.Element的对象，
Ext.Element类是Ext对DOM的封装，代表DOM的元素，可以为每一个DOM创建一个对应的Element对象，
可以通过Element对象上的方法来实现对DOM指定的操作，比如用hide方法可以隐藏元素
initDD方法可以让指定的DOM具有拖放特性等。get方法其实是Ext.Element.get的简写形式。 get方法中只有一个参数，这个参数是混合参数，可以是DOM节点的id、也可以是一个Element、或者是一个DOM节点对象等。看下面的示例代码：
Ext.onReady(function(){var e=new Ext.Element(“oa");alert(Ext.get(“oa"));alert(Ext.get(document.getElementById(“oa")));alert(Ext.get(e));});Html页面中包含一个id为oa的div，代码如下：
Ext.get(“oa")、Ext.get(document.getElementById(“oa"))、Ext.get(e)等三个方法都可以得到一个与DOM节点hello对应的Ext元素。
二： 1. Ext.fly和Ext.get
Ext.fly在参数方面与Ext.get的完全相同，但其内置控制返回Ext.Element的方法就完全不同，
Ext.fly从不保存享元对象的引用，每次调用方法都返回独立的享元对象。
其实区别在于“缓存”中，因为缓存的缘故，Ext.get需要为每个元素保存其引用，就形成了缓存，
如果有相同的调用就返回，但Ext.fly没有所谓的缓存机制，得到什么就返回什么，
不是多次使用的情况下“一次性地”使用该元素就应该使用Ext.fly（例如执行单项的任务）。 使用Ext.fly的例子： // 引用该元素一次即可，搞掂了就完工 Ext.fly('elId').hide();2、getCmp方法－获得Ext组件。 getCmp方法用来获得一个Ext组件，也就是一个已经在页面中初始化了的Component或其子类的对象，
getCmp方法其实是Ext.ComponentMgr.get方法的简写形式。getCmp方法中只有一个参数，也就是组件的id。比如下面的代码：
Ext.onReady(function(){var h=new Ext.Panel({id:"h2",title:" ",renderTo:"hello",width:300,height:200});Ext.getCmp("h2").setTitle("新的标题");}); 在代码中，我们使用Ext.getCmp("h2").来得到id为h2的组件，并调用其setTitle方法来设置该面板的标题。
3、getDom方法－获得DOM节点
getDom方法能够得到文档中的DOM节点，该方法中包含一个参数，该参数可以是DOM节点的id、DOM节点对象或DOM节点对应的Ext元素(Element)等。比如下面的代码：
Ext.onReady(function(){var e=new Ext.Element("hello");Ext.getDom("hello");Ext.getDom(e);Ext.getDom(e.dom);});Html：
4、getBody方法－得到文档的body节点元素(Element)。
该方法直接得到文档中与document.body这个DOM节点对应的ExtJS元素（Element），实质就是把document.body对象封装成ExtJS元素对象返回，该方法不带任何参数。比如下面的代码把面板h直接渲染到文档的body元素中。
Ext.onReady(function(){var h=new Ext.Panel({title:"测试",width:300,height:200});h.render(Ext.getBody());});
5、getDoc方法－获得与document对应的Ext元素(Element)
getDoc方法实质上就是把当前html文档对象，也就是把document对象封装成ExtJS的Element对象返回，该方法不带任何参数。6.Ext.query函数和Ext.select函数批量获取元素
语法：query( String path, Node root ) : Array 选定一个通过CSS/XPath选择符获取的DOM节点组成的数组。选定一个通过CSS/XPath选择符获取的DOM节点组成的数组。Ext.DomQueryselect的简写方式。 参数项： path : String 查询时使用的 XPath 或选择符 root : Node （可选）查询的起点（默认为 document）。 返回值： Array @member Ext
7.select( String selector, Node root ) : Array 选择一组元素。 选择一组元素。 参数项： selector : String 选择符 / xpath 查询（可以是以逗号分隔的选择符列表） root : Node （可选）查询的起点（默认为：document）。 返回值： Array 匹配选择符而形成的DOM元素数组，如果没有匹配的结果，返回一个空的数组两者的区别：Ext.query返回搜索到的元素数组，Ext.select返回的是一个Ext.CompositeElement类型的对象。
对于query返回的数组，只能循环迭代处理；而对于select返回的对象，可以调用它提供的各种函数执行特殊操作。如：
function selectP() { var array = Ext.query('p'); for (var i = 0; i < array.length; i++) { Ext.get(array[i]).highlight(); } } function selectDiv() { var array = Ext.query('div.red'); for (var i = 0; i < array.length; i++) { Ext.get(array[i]).highlight(); } }
在query和select函数中，可以通过css元素选择符来批量获取HTML页面中的元素1、元素选择符： 任意元素 E 一个标签为 E 的元素 E F 所有 E 元素的分支元素中含有标签为 F 的元素 E > F 或 E/F 所有 E 元素的直系子元素中含有标签为 F 的元素 E + F 所有标签为 F 并紧随着标签为 E 的元素之后的元素 E ~ F 所有标签为 F 并与标签为 E 的元素是侧边的元素
2、属性选择符： @ 与引号的使用是可选的。例如：div[@foo='bar'] 也是一个有效的属性选择符。 E[foo] 拥有一个名为 “foo” 的属性 E[foo=bar] 拥有一个名为 “foo” 且值为 “bar” 的属性 E[foo^=bar] 拥有一个名为 “foo” 且值以 “bar” 开头的属性 E[foo$=bar] 拥有一个名为 “foo” 且值以 “bar” 结尾的属性 =bar] 拥有一个名为 “foo” 且值包含字串 “bar” 的属性 E[foo%=2] 拥有一个名为 “foo” 且值能够被2整除的属性 E[foo!=bar] 拥有一个名为 “foo” 且值不为 “bar” 的属性
3、CSS 值选择符： E{display=none} css 的“display”属性等于“none” E{display^=none} css 的“display”属性以“none”开始 E{display$=none} css 的“display”属性以“none”结尾 =none} css 的“display”属性包含字串“none” E{display%=2} css 的“display”属性能够被2整除 E{display!=none} css 的“display”属性不等于“none”
4、伪类： E:first-child E 元素为其父元素的第一个子元素 E:last-child E 元素为其父元素的最后一个子元素 E:nth-child(n) E 元素为其父元素的第 n 个子元素（由1开始的个数） E:nth-child(odd) E 元素为其父元素的奇数个数的子元素 E:nth-child(even) E 元素为其父元素的偶数个数的子元素 E:only-child E 元素为其父元素的唯一子元素 E:checked E 元素为拥有一个名为“checked”且值为“true”的元素（例如：单选框或复选框）
E:first 结果集中第一个 E 元素 E:last 结果集中最后一个 E 元素 E:nth(n) 结果集中第 n 个 E 元素（由1开始的个数） E:odd :nth-child(odd) 的简写 E:even :nth-child(even) 的简写 E:contains(foo) E 元素的 innerHTML 属性中包含“foo”字串 E:nodeValue(foo) E 元素包含一个 textNode 节点且 nodeValue 等于“foo” E:not(S) 一个与简单选择符 S 不匹配的 E 元素 E:has(S) 一个包含与简单选择符 S 相匹配的分支元素的 E 元素 E:next(S) 下一个侧边元素为与简单选择符 S 相匹配的 E 元素 E:prev(S) 上一个侧边元素为与简单选择符 S 相匹配的 E 元素
5.encode函数和decode函数
Ext中有两个很重要的方法,一个是decode;一个是encode.顾名思义,一个是编码,一个是解码,你难道真的这么想吗? 严格的说,
一个是将json字符串转换成对象;一个是将对象转换成json字符串. 注： Ext.decode()和Ext.encode()分别是是 Ext.util.JSON.decode()和Ext.util.JSON.encode的简写
19.update方法局部更新网页内容