ExtJs 核心函数简介
1.ExtJs提供的常用函数
2.get、fly、getCmp、getDom、getBody、getDoc
3.query函数和select函数
4.encode函数和decode函数
5.Ext.each函数
6.Ext.util.Format对数据进行格式化
7.Ext.util.TaskRunner
8.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，
代码如下：<div id=“oa">myoffice</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：<div id="hello">tttt</div>
在上面的代码中，Ext.getDom("hello")、Ext.getDom(e)、Ext.getDom(e.dom)等三个语句返回都是同一个DOM节点对象。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的简写
<link href="extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="extjs/ext-base.js" type="text/javascript"></script>
<script src="extjs/ext-all.js" type="text/javascript"></script>
<script type="text/javascript">
function ready() {
//先使用decode方法，这个方法是将json字符串转换成对象的
//第一步：先定义一个json字符串吧
var 刘天王 = "{姓名:'刘德华',性别:'男',老家:'香港'}";
//第二步：现在我们要把刘天王转换成对象了
var who = Ext.decode(刘天王);
//第三步：who成了对象后就相当于是类的对象了，里面的姓名，性别，老家都成了who的属性了，现在知道怎么通过对象访问属性了吧
var name = who.姓名; //获取who对象的[姓名]属性
var sex = who.性别; //获取who对象的[性别]属性
var home = who.老家; //获取who对象的[老家]属性
//第四步：下面将获取的信息组合起来
var result = "刘天王资料的信息：姓名是--" + name + "；性别--" + sex + "；老家--" + home;
//第五步：我们把获取的who对象的信息用弹出消息的方式显示出来吧
Ext.Msg.alert("刘天王的资料信息", result);
//以上就是将一个json字符串转换成对象后，再逐个访问对象的属性的示例
//下面使用encode方法
//encode方法很简单了，就是将上面生成的who对象再转换成第一步定义的json字符串
//定义一个到时间执行的函数
var getJson = function() {
//你完全可以把这段写在函数外面，之所以包含在里面纯属是为了在显示第一个消息框后再隔3秒显示下面这个消息窗口
var jsonStr = Ext.encode(who);
//我们还是通过弹出消息的方式把这个json字符串显示出来吧
Ext.Msg.alert("jsonStr信息内容", jsonStr);
};
//下面这个方法意思是：在3秒之后会调用函数getJson执行里面包含的脚本
setTimeout(getJson, 3000);
//Ext.decode()和Ext.encode()分别是是 Ext.util.JSON.decode()和Ext.util.JSON.encode的简写
}
Ext.onReady(ready);
6.Ext.each函数
语法：Ext.each( Array/NodeList/Mixed array, Function fn, Object scope ) : void
遍历array并对每项分别调用fn函数。如果array不是数组则只执行一次。
如果某项fn执行结果返回false（必须是false，undefined无效），遍历退出，后面的array项将不被遍历。
遍历过程中每次为fn传入参数分别为[当前数组项]，[当前索引]和[数组array]三个参数。 Scope用于设定fn函数中的this指针。
Ext.onReady(function () {
//1.数组 2.元素 2.索引 3.数组
Ext.each([1, 3, 5, 7], function(item, index, arry) {
alert("item:" + item + " index:" + index + " arry.length=" + arry.length);
});7.Ext.util.Format对数据进行格式化
ellipsis( String value, Number length, Boolean word ) : String 对大于指定长度部分的字符串，进行裁剪，增加省略号（“...”）的显示。
对大于指定长度部分的字符串，进行裁剪，增加省略号（“...”）的显示。 参数项：
value : String 要裁剪的字符串
length : Number 允许的最大长度
word : Boolean True表示尝试以一个单词来结束
返回值：
String 转换后的文本
var str = "this";
var oStr = Ext.util.Format.ellipsis(str, 5,true);
alert(oStr);
var money = "1000";
var newmoney = Ext.util.Format.usMoney(money);
alert(newmoney);
var oDate = Ext.util.Format.date(new Date(), "Y-m-d H:i:s");
alert(oDate);
8、defaultValue( Mixed value, String defaultValue ) : String 检查一个引用值是否为空，若是则转换到缺省值。
检查一个引用值是否为空，若是则转换到缺省值。 参数项：
value : Mixed 要检查的引用值
defaultValue : String 默认赋予的值（默认为""）
返回值：
String
9、trim( String value ) : String 裁剪一段文本的前后多余的空格。
裁剪一段文本的前后多余的空格。
参数项：
value : String 要裁剪的文本
返回值：
String 裁剪后的文本
10.usMoney( Number/String value ) : String 格式化数字到美元货币
格式化数字到美元货币 参数项：
value : Number/String 要格式化的数字
返回值：
String 已格式化的货币
var money = 10009.9;
var newmoney = Ext.util.Format.number(money, "0,000.00");
alert(newmoney);
11.date( Mixed value, String format ) : Function 将某个值解析成为一个特定格式的日期。
将某个值解析成为一个特定格式的日期。
参数项：
value : Mixed 要格式化的值
format : String （可选的）任何有效的日期字符串（默认为“月/日/年”）
返回值：
Function 日期格式函数
如：Ext.util.Format.date(new Date(), "Y-m-d H:i:s");
12.dateRenderer( String format ) : Function 返回一个函数，该函数的作用是渲染日期格式，便于复用。
返回一个函数，该函数的作用是渲染日期格式，便于复用。 参数项：
format : String 任何有效的日期字符串
返回值：
Function 日期格式函数
如：renderer: Ext.util.Format.dateRenderer('Y年m月d日')
13.stripTags( Mixed value ) : String 剥去所有HTML标签。
剥去所有HTML标签。 参数项：
value : Mixed 要剥去的文本
14.number( Number v, String format ) : String 依据某种（字符串）格式来转换数字。例子 (123456.789): ...
依据某种（字符串）格式来转换数字。 例子 (123456.789): 0 - (123456) 只显示整数，没有小数位0.00 - (123456.78) 显示整数，保留两位小数位0.0000 - (123456.7890) 显示整数，保留四位小数位0,000 - (123,456) 只显示整数，用逗号分开0,000.00 - (123,456.78) 显示整数，用逗号分开，保留两位小数位0,0.00 - (123,456.78) 快捷方法，显示整数，用逗号分开，保留两位小数位在一些国际化的场合需要反转分组（,）和小数位（.），那么就在后面加上/i 例如： 0.000,00/i
参数项：
v : Number 要转换的数字。
format : String 格式化数字的“模”。
返回值：
String 已转换的数字。@public
15.undef( Mixed value ) : Mixed 检查一个引用值是否为underfined，若是的话转换其为空值。
检查一个引用值是否为underfined，若是的话转换其为空值。 参数项：
value : Mixed 要检查的值
返回值：
Mixed 转换成功为空白字符串，否则为原来的值
16.defaultValue( Mixed value, String defaultValue ) : String 检查一个引用值是否为空，若是则转换到缺省值。
检查一个引用值是否为空，若是则转换到缺省值。 参数项：
value : Mixed 要检查的引用值
defaultValue : String 默认赋予的值（默认为""）
返回值：
String
返回值：
String 剥去后的HTML标签
17.Ext.util.TaskRunner
执行一个连续的计划任务
Eg:// Start a simple clock task that updates a div once per second
var task = {
run: function(){
Ext.fly('clock').update(new Date().format('g:i:s A'));
},
interval: 1000
}
var runner = new Ext.util.TaskRunner();
runner.start(task);
18.
<script type="text/javascript">
Ext.onReady(function() {
var task = {
run: function() {
Ext.get('clock').update(new Date().format('g:i:s A'));
},
interval: 1000
}
var runner = new Ext.util.TaskRunner();
runner.start(task);
});
</script>
19.update方法局部更新网页内容
<script type="text/javascript">
Ext.onReady(function() {
Ext.get('updatePlain').on('click', function() {
Ext.get('result').getUpdater().update({
url: '07-02.html'
});
});
Ext.get('updateJavascript').on('click', function() {
Ext.get('result').getUpdater().update({
url: '07-03.html',
scripts: true
});
});
});
前台页面：
<script type="text/javascript" src="../shared/examples.js"></script>
<div style="align:center; width:300px; margin:50px;">
<button id="updatePlain"><b>变化成静态页面</b></button>
<button id="updateJavascript"><b>变化成带javascript的页面</b></button>
</div>
<div id="result"> </div>
</body>
</html>
<script type='text/javascript'>
Ext.get('div').setWidth(100, {
duration: 2,
callback: this.highlight,
scope: this
});
</script>
