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>