在 extjs 的基礎庫中,大量使用了正規表示式的功能,使得原來很複雜的邏輯可以用很短的**表示出了。
舉個例子:
要動態獲得 元素的 width,height,top,left 等位置大小屬性:
首先一點預備知識:
extjs 是以畫素為基本單元,以畫素控制的話各個瀏覽器也比較容易控制,於是extjs 獲得上述屬性得到的都是畫素為單位的數值。
動態獲取元素上述大小屬性,首先如果css上使用者設定了內聯,那麼ie,ff可以直接style讀取,否則就要利用ff的符合標準的computedstyle 以及 ie 特有的 currentstyle 。
如 extjs 的 getstyle 函式 :
/*** normalizes currentstyle and computedstyle.
* @param property the style property whose value is returned.
* @return the current value of the style property for this element.
*/getstyle : function() :
function(prop)}}
return 1;
}prop = chkcache(prop);
return el.style[prop] || ((cs = el.currentstyle) ? cs[prop] : null);
};}(),
但是注意:
1.如果 使用者沒有顯示指明 css ,則 ie 會得到 "auto" ,ff 則可以得到現場自己根據內容計算的 css 值,為以畫素為單元,如 "20px"
2.ff 無論使用者css屬性設定了哪種單元,如pt,em ,一律返回 px單元的數值 ,如 「20px」 ,但是 ie 如果使用者沒有設定px單元 則會 返回 非px單元表示的數值,如 "12pt"
由於 extjs 一定要以 px 為單元的數值返回,則這時 ie 的 getstyle 不能採納,但是可以採納 offset 屬性,由於 offset 返回的是動態的以px為單元的數值,則可以用 offset 近似表示 width ,height ,區別有需要注意
(見: )。
3.top left 只有在 定位時才有意義,其他情況下返回0,即可。
根據上述邏輯可以得到複雜的**獲取控制邏輯,但是看一看extjs的
offsetattribute = /^((width|height)|(top|left))$/,利用正規表示式來代替跳轉判斷邏輯,很巧妙。offsetunit = /\d+(em|%|en|ex|pt|in|cm|mm|pc)$/i,
getattr: function(attr)
return (
//attr 為 width 或 height
!!(a[2]) ||
(el.getstyle('position') == 'absolute' &&
//如果 attr 為 top 或 left ,則元素必須絕對定位
!!(a[3]))) ?
//ie 下取offset得到畫素單元的數值 ,注意 a[0]==a[1] 都當前匹配項
//如:/^((width|height)|(top|left))$/.exec("width") == ["width", "width", "width", undefined]
el.dom['offset' + a[0].charat(0).touppercase() + a[0].substr(1)] : 0;
},
extjs正規表示式驗證
在ext中使用正規表示式驗證的方法 fieldlabel 員工號 name employee.empno regex w id employee.empno regextext 員工號只能由字母和數字組成!allowblank false ext.get startdt getvalue repla...
extjs正規表示式驗證
在ext中使用正規表示式驗證的方法 fieldlabel 員工號 name employee.empno regex w id employee.empno regextext 員工號只能由字母和數字組成!allowblank false ext.get startdt getvalue repla...
正規表示式應用
d 非負整數 正整數 0 0 9 1 9 0 9 正整數 d 0 非正整數 負整數 0 0 9 1 9 0 9 負整數 d 整數 d 非負浮點數 正浮點數 0 0 9 0 9 1 9 0 9 0 9 1 9 0 9 0 9 0 9 1 9 0 9 正浮點數 d 非正浮點數 負浮點數 0 0 9 0 ...