前言
關鍵字:農民伯伯,Ext. is,copyTo,flatten,unique,pluck,invoke,format,grid,Array,Function,學習,筆記,總結,技巧
接觸ExtJs的時間並不長,走了很多彎路,由於短時間內不會再使用ExtJs,所有通過這系列文章彙總、梳理和補充關於ExtJs的點滴以備忘之,系列文章大部分是收集和整理,小部分自己的心得和補充,着重實踐,提供完整代碼,: )
系列
1. ExtJs 備忘錄(1)—— Form表單(一) [ 控件使用 ]2. ExtJs 備忘錄(2)—— Form表單(二) [ 控件封裝 ]
3. ExtJs 備忘錄(3)—— Form表單(三) [ 數據驗證 ]
4. ExtJs 備忘錄(4)—— Form表單(四) [ 數據提交 ]
5. ExtJs 備忘錄(5)—— GirdPanl表格(一)[ 基本用法 ]
6. ExtJs 備忘錄(6)—— GirdPanl表格(二)[ 搜索分頁 ]
7. ExtJs 備忘錄(7)—— GirdPanl表格(三)[ 統計|查看、修改單行記錄 ]
8. ExtJs 備忘錄(8)—— 管理界面搭建和其他部分控件介紹
9. ExtJs 備忘錄(9)—— Ext常用屬性、方法小結 [系列完]
正文
一、Ext
1.1 Ext.isEmpty(v, allowBlank) //是否爲空[鏈接]
1.2 Ext.isArray(v) //是否爲數組集合
1.3 Ext.isPrimitive(v) //是否是基本數據類型String/Number/Boolean
1.4 Ext.isFunction(v) //是否是函數
1.5 Ext.isNumber(v) //是否是數字
1.6 Ext.isString(v) //是否是字符串
1.7 Ext.isBoolean(v) //是否是bool值
1.8 Ext.isIE/isIE6/isIE7/isIE8... //判斷瀏覽器
1.9 Ext.isWindows/isLinux/isMac/isAir //判斷平臺(操作系統)
1.10 Ext.isDefined //對象是否已經定義
1.11 Ext.id(el,prefix) //返回唯一的id值,el位元素Id,prefix爲前綴
1.12 Ext.urlEncode(o, pre) //將JSON數據轉換URL參數串,如{a:1,b:2} => a=1&b=2
1.13 Ext.urlDecode(string, overwrite) //將url參數列表轉換成json格式數據,overwrite如果爲true,則後面的同名參數值覆蓋前面的同名參數值(默認爲false即不覆蓋而以數組形式返回)
1.15 Ext.each(array, fn, scope) //遍歷數組,例:Ext.each([1,2,3],function(value,index,a){ //index:索引號,0開始 value:當前值 a:數組引用 });
1.16 Ext.encode(o) //將對象轉換成json字符串,詳細說明和用法:這裏
1.17 Ext.decode(o) //將json字符串轉換成對象
[Ext-more.js]
1.18 Ext.combine() //數組合並
1.19 Ext.num(value,defaultValue) //如果是數字,直接返回本身,否則返回默認值,注意"5"這裏也會返回默認值的
1.20 Ext.copyTo(dest, source, names) //拷貝source中names屬性列表至dest中
1.21 Ext.unique(arr) //剔除數組中重複的元素,讓數組每個元素保持唯一
1.22 Ext.clean(arr) //複製數組?!
1.23 Ext.flatten(arr) //將多維數組轉換成一維數組
1.24 Ext.min(arr, comp) //查找數組中最小的元素
1.25 Ext.max(arr, comp) //查找數組中最大的元素
1.26 Ext.mean(arr) //計算數組元素平均值(總和除以個數)
1.27 Ext.partition(arr, truth) //根據arr元素的bool值拆分成新的二維數組並返回 例1:Ext.partition([true, false, true, true, false]); // [[true, true, true], [false, false]] 例2:Ext.partition(arr,function(val){ return val == "class1" });
1.28 Ext.invoke(arr, methodName,/*args...*/) //執行arr數組中對象的methodName方法,args爲方法的參數,返回執行結果數組
1.29 Ext.pluck(arr, prop) //返回數組中屬性名(property name)等於prop的值的新數組 Ext.pluck(arr, "className"); => [arr1.className,arr2.className]
1.30 Ext.zip({Arrays|NodeLists},{Function}) //壓縮多個數組爲一個數組, Ext.zip([1,2,3],[4,5,6]); // [[1,4],[2,5],[3,6]],支持Function自定義合併
1.31 Ext.type(object) //返回對象的類型:string,number,boolean,function,object,array,regexp,element,nodelist,textnode,whitespace
二、Ext.util.Format
2.2 Ext.util.Format.ellipsis(value, len, word); //從字符串開始處截取len長度顯示,超過部分用...表示;word爲布爾值,爲true時在前面截取的基礎上再從' '、'.'、'!'、'?'關鍵字處截取前面(len),ellipsis("abcde.fghijkl",10,true)返回abcde
2.3 Ext.util.Format.htmlEncode(value); //HTML編碼,將& < > “替換爲&<>"
2.4 Ext.util.Format.htmlDecode(value); //HTML解碼,與上面相反
2.5 Ext.util.Format.trim(value); //截取字符串左右的空格
2.6 Ext.util.Format.substr(value, start, length); //從value指定的start位置開始截取length長度的子串返回
2.7 Ext.util.Format.lowercase(value); //轉換大寫
2.8 Ext.util.Format.uppercase(value); //轉換小寫
2.9 Ext.util.Format.stripTags(v); //去除HTML標籤:/<\/?[^>]+>/gi
2.10 Ext.util.Format.usMoney(v); //轉換到'$'符號的貨幣形式
2.11 Ext.util.Format.date(v, format); //格式化日期輸出,format默認格式"m/d/Y"
2.12 Ext.util.Format.round(value, precision); //四捨五入,precision指精確位數
2.13 Ext.util.Format.number(v, format); //格式化數字顯示
2.14 Ext.util.Format.nl2br(value); //將字符串中的'\n'替換成'<br />'
2.15 Ext.util.Format.fileSize(value); //將字節數轉成更大的單位KB和MB顯示,fileSize(1024) = 1KB
2.16 Ext.util.Format.defaultValue(value, defaultValue); //如果value未定義或爲空字符串則返回defaultValue
2.17 Ext.util.Format.stripScripts(v); //去除腳本標籤
2.18 Ext.util.Format.undef(value); //如果value未定義,返回空字符串,反之返回value本身
三、擴展JS原有對象
3.1 String
3.1.1 .format(format) //和C#裏面是一樣的用法
3.1.2 .toggle(value, other) //交換值,如果當前值等於value,則被賦值other
3.2 Array
3.2.1 .indexOf(o) //返回元素o在數組ArrayObject中的位置,找不到返回-1
3.2.2 .remove(o) //從數組ArrayObject刪除元素o
3.3 Function
3.3.1 .createInterceptor(fcn, scope) //創建阻斷方法,如果fcn返回false,原方法將不會被執行,參見這裏
3.3.2 .createCallback(/*args...*/) //創建回調,以無參的函數作爲參數,但是現有的方法已經具有了參數,如果直接寫上可以用這個來創建一個回調,類似於function(){ //實際的帶參調用 } ,見這裏1、這裏2
3.3.3 .createDelegate(obj, args, appendArgs) //創建委託,與上面相比,自己可以訪問obj中的屬性和方法,見這裏
3.3.4 .defer(millis, obj, args, appendArgs) //定時執行,隔millis毫秒後執行原方法,參見這裏
3.3.5 .createSequence(fcn, scope) //Ext-more.js中,創建組合方法,執行原方法+fcn,參見這裏
四、 其他
4.1 表單
4.1.1 一次取得表單所有的表單元素key/value集合
form1.form.getValues() //form1爲Ext.FormPanel,例如:
var conn = new Ext.data.Connection();
conn.request({
url: 'submit.aspx?method=Submit4',
//此處與params對應,如果爲POST,則服務器端從Request.Form中可以取得到數據,反之從QueryString中取數據
method: 'POST',//GET
params:form1.form.getValues(),
success: function(response, opts) {
MsgInfo(response.responseText);
}
});
form1.form.setValues(values) //form1.form.setValues({id:1,name:'aabbcc'}) 賦值
4.1.2 表單元素取值賦值一次取得
4.1.2.1 form1.form.findField('TextBox').getValue()
4.1.2.2 form1.form.getValues().TextBox
4.1.2.3 form1.form.getFieldValues().TextBox
4.2 切換皮膚
Ext.util.CSS.swapStyleSheet("theme", "resources/css/ext/xtheme-orange.css"); //注意路徑
注意:
1. 本系列Ext版本爲 3.0.0
2. 最新源代碼在系列文章第八篇有下載。
3. 關於ExtJs的優點請移步至系列文章第一篇評論中我的回答,這裏就不要再討論了 :)
文章參考和推薦
2. Google:Ext API 詳解
3. Ext研究(1)——關於Function類的一些新方法的使用
5. 《仔仔細細分析Ext》 Ext對Function類的擴展
結束語
建議多看看源碼和源碼分析的文章,歡迎交流、補充 :)