ExtJS 常用工具函數

J* 1.編解碼函數
* encode和decode函數是專門用來對JSON資料進行編碼和解碼的函數。
* Ext.encode()對應的解碼方法為Ext.decode()。
*
* encode函數的作用是對對象、數組或其他值進行編碼，將對象轉換成JSON字串的形式；
* 因為HTTP協議只能發送字串形式的參數，所以無法將JavaScript中的對象直接傳遞給後台，這就需要編碼;
* 因為HTTP規範規定，HTTP請求只能發送ISO-8859-1編碼的字元，
* 所以像中文這種無法使用ISO-8859-1編碼的字元，還需要先轉換成ISO-8859-1編碼格式才能通過HTTP協議傳輸;
*
* 所以要經過兩次編碼後獲得的最終參數綁定到url上然後傳遞給後台伺服器進行處理：
* url:"http://url.com?json=" + encodeURIComponent(Ext.encode(obj))
* decode()是將json對象解析為字串
* 被解析的字串的格式不能是任意的，它必須符合JSON要求的字串格式。　　　
eg: function successFn(response,options){
var obj = Ext.decode(response.responseText);//要把JSON資料解析成JavaScript對象,使用Ext.decode函數。
alert(obj.username);
}
function failureFn(response,options){
alert('請求失敗');
}
Ext.Ajax.request({
url:'form.jsp',
success:successFn,
failure:failure,
params:{dsname:'INSERT'}
});
　　
通過該對象的responseText或responseXML屬性獲得由伺服器端返回的資料資訊。　　
*
*2.Ext.each函數:當需要對數組中的每個元素進行同一種操作
* eg:
* var array = [1,2,3,4];
* var sum = 0;
* Ext.each(array,function(item){
* sum += item;
* });
* alert(sum);
*3.Ext.DomQueryDomQuery的select()函數將接受我們定製的查詢運算式，
* 將HTML中所有滿足條件安的標籤作為結果返回。
*4.標籤提示
*直接在HTML中為元素設定提示資訊。
<input type="button" value="標籤型提示資訊"
ext:qtitle="提示的標題"
ext:qtip="<b><i>提示的內容</i></b><p>下一行內容</p>"/>

這些配置都以ext:作為首碼，
qtitle代表提示標題，
qtip代表提示內容，
這些配置會在初始化時解析到EXT中，並在需要時顯示。

* 初始化先用Ext.QuickTips.init()函數進行初始化　　
* 註冊提示　
*
* 全域配置:
* 最簡單的辦法就是利用Ext.apply()函數重新設定QuickTips的預設屬性，如下示：
* Ext.apply(Ext.QuickTips,{
* maxWidth:200,
* minWidth:100,
* showDelay:50,
* dismissDelay:1000,
* hideDelay:500,
* trackMouse:false,
* animate:true
*});
* 下面是這些設定的含義：
* maxWidth和minWidth分別用來設定提示框的最大寬度和最小寬度，這可能會導致提示內容自動換行。
* showDelay表示滑鼠移至上方多久後顯示提示資訊，預設是0.5秒，這裡的時間是以ms為單位。
* dismissDelay表示提示資訊顯示的時間，預設為5秒。如果希望提示框不消失，也可以將dismissDelay直接設定為0。
* hideDelay表示提示資訊從開始消失到完全消失所需要的時間，預設是0.2秒。
* trackMouse這個屬性如果為true，提示視窗彈出來以後還會跟隨滑鼠一起移動。
* autoHide的值一般都是true，它會根據dismissDelay和hideDelay的數值來實現逐漸消隱提示框的效果。
* 這似乎也是一條讓提示框永不消失的捷徑，不過用過以後你就會知道，autoHide:false的結果是即使滑鼠離開了DOM的範圍，提示資訊也不會消失。
* 這個提示資訊會一直掛在頁面上，再也無法去掉。
* animate表示是否使用動畫效果。
*
*個體配置:
*有兩種方式：使用register()和直接寫到HTML裡　;
*1.使用register()函數時，用到的參數和全域配置一樣
　Ext.QuickTips.register({
taget:'ql',
title:'第一種類型',
text:'從外部註冊到dom中提示資訊',
maxWidth:200,
minWidth:100,
showDelay:50,
dismissDelay:1000,
hidwDelay:500,
trackMouse:false,
autoHide:false,
animate:true
});　　

　內建提示功能的EXT組件，只需要在QuickTips之後，再為這些組件設定對應的屬性，就可以直接為它們設定對應的提示資訊。
組件名稱 配置
Ext.tree.TreeNode qtip
Ext.Button tooltip　　　
*
*6.儲存狀態:Ext.state
*Ext.state.Manager的初始化功能必須在所有代碼的最前面。
* Ext.state.Manager.setProvider(new Ext.state.CookieProvider({}));//保持cookie狀態
*
*7.Ext.util.TaskRunner執行迴圈任務,
*它提供了start()、stop()和StopAll()等方法，用來控制功能函數的啟動和停止，
*或一次性停止所有已經執行的功能函數。　
*　　Ext.onReady(function() {
* var text = '';
* var task = {
* run: function() {
* text += new Date().toLocaleString() + "<br />";
* Ext.get('result').update(text);
* },
* interval: 3000
* };
* var taskRunner = new Ext.util.TaskRunner();
* taskRunner.start(task);
* );　
*
*
* 8.使用Ext.KeyMap為對象綁定按鍵功能
*
* Ext.onReady(function() {
* var keyMap = new Ext.KeyMap('textarea', {
* key: Ext.EventObject.LEFT,
* fn: function(e) {
* keyMap.el.setWidth(keyMap.el.getWidth() - 10);
* }
* });
* Ext.get("dis").on('click', function() {
* keyMap.disable();
* Ext.get('result').update(keyMap.isEnabled());
* });
* Ext.get('en').on('click', function() {
* keyMap.enable();
* Ext.get('result').update(keyMap.isEnabled());
* });
* });
*
*
* 　　　　　　　　　　　　　　　　　　　　
*/

step1編寫如下代碼：

<div id="root1">
<span class="span1">span 1</span>
<span class="span2">span 2</span>
<span class="span1">span 3</span>
<span class="span2">span 4</span>
<span class="span1">span 5</span>
</div>
<div id="root2">
<span class="span0">span 0</span>
</div>

step2編寫如下：

Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider({}));
Ext.QuickTips.init();

var target=Ext.get('root2');
Ext.QuickTips.register({
target:target,
title:'span標籤提示',
text:'從外部註冊到DOM裡的提示資訊'
});

/* var array=[1,2,3,4];
var sum=0;
Ext.each(array,function(item){
sum+=item;
});
alert("sum:"+sum);

Ext.each(array,function(item,index,allArray){

alert("index:"+index);
alert("length:"+allArray.length);

});*/

//用DomQuery獲得頁面上所有的span標籤
var array=Ext.DomQuery.select('span');
Ext.each(array,function(elem){
elem.style.backgroundColor='red';
});

//獲得所有位於id=”root1”的div標籤內的span標籤

var array=Ext.DomQuery.select('div#root1>span');
Ext.each(array,function(elem){
elem.style.backgroundColor='yellow';
});

})