2008年12月29日

EXT核心API詳解(七)-Ext.KeyNav/KeyMap/JSON/Format/

Ext.KeyNav

Ext的keyNav類能為Ext.Element元素提供簡單的按鍵處理方法
例:
var el=Ext.get("textarea");
new Ext.KeyNav(el, {
"left" : function(e){
alert("left key down");
},
scope : el
}
);
它的行為與KeyMap類似,但功能比KeyMap要弱小的多,只能處理以下已定義鍵
enter/left/right/up/down/tab/esc/pageUp/pageDown/del/home/end
同情一下KeyNav

方法只有三個,不用多解釋
KeyNav( Mixed el, Object config )
disable() : void
enable() : void

Ext.KeyMap類
則強悍的多,其中最重要的當然是對按鍵的定義更靈活
例:上例用KeyMap來寫可能是
var el=Ext.get("textarea");
new Ext.KeyMap(el, {
key:Ext.EventObject.LEFT,
fn: function(e){
alert("left key down");
},
scope : el
}
);

方法
KeyMap( Mixed el, Object config, [String eventName] )
構造,與KeyNav也相似,但更靈活
它是{
key: String/Array, //可以是數字,字符,也可以是Ext.EventObject.LEFT這樣的助記符,還能是他們組成的數組
shift: Boolean, //ctrl鍵按下?
ctrl: Boolean,
alt : Boolean,
fn : Function, //回叫方法
scope: Object //範圍
}這樣的對象或它們組成的數組
比如{key: 10},{key: [10,13]},{key:'\t'},{key:'abcd'},{key:Ext.EventObject.LEFT}都是合法的定義

addBinding( Object/Array config ) : void
增加新的綁定動作 config參見構造

disable() : void
enable() : void
isEnabled() : Boolean
允許,靜止和狀態查詢

on( Number/Array/Object key, Function fn, [Object scope] ) : void
只添加一個處理時addBinding的快捷方式,但個人感覺並沒有簡單到哪兒去。


Ext.util.JSON
輪到大名鼎鼎的JSON了,可惜Ext提供的JSON對象功能好弱小,只有encode主decode兩個方法
而且只能編碼String/Array/Date,至少也要搞個 xml2json/json2xml方法呀

Ext.util.Format
主要提供了一些格式化方法

capitalize( String value ) : String
首字母大寫

date( Mixed value, [String format] ) : String
格式化日期輸出,還是Date.format方法好用

dateRenderer( String format ) : Function
返回一個利用指定format格式化日期的方法

defaultValue( Mixed value, String defaultValue ) : String
如果value未定義或為空字符串則返回defaultValue

ellipsis( String value, Number length ) : String
如果value的長度超過length的,取前length-3個並用...替代,對中國人來說還是垃圾功能,用的字符串長度不是字節長度

fileSize( Number/String size ) : String
簡單的格式化文件長度為 xxxbytes xxxKB xxxMB,沒有GB喲

htmlEncode( String value ) : String
htmlDecode( String value ) : String
HTML編碼解碼,將& < > 「替換為&<>"

lowercase( String value ) : String
將value轉換為全小寫

stripScripts( Mixed value ) : String
去除腳本標籤

stripTags( Mixed value ) : String
去除HTML標籤

substr( String value, Number start, Number length ) : String
取子字符串

trim( String value ) : String
去除開頭和結尾的空格

undef( Mixed value ) : Mixed
如果value未定義,返回空字符串,反之返回value本身

uppercase( String value ) : String
轉為全大寫

usMoney( Number/String value ) : String
轉為美元表示

Ext.util.DelayedTask
提供一個setTimeout的簡單替代方法

公開的方法也只有三個
DelayedTask( [Function fn], [Object scope], [Array args] )
delay( Number delay, [Function newFn], [Object newScope], [Array newArgs] ) :
cancel() : void
簡單的示例用法如果
var task=new Ext.util.DelayedTask(Ext.emptuFn);
task.delay(1000);
task.cancel();

Ext.util.TaskRunner
增強版的DelayedTask,能提供多線程的定時服務,
例:
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);

四個方法都很簡單
TaskRunner( [Number interval] )
start( [Object task] ) : Object
stop( Object task ) : Object
stopAll() : void


Ext.util.TextMetrics
這個類主要是為了準備的得到塊狀化文本正確的高度和寬度
例:
var metrics=Ext.util.TextMetrics.createInstance('div');
metrics.setFixedWidth(100);
var size=metrics.getSize("中華人民共和國中華人民共和國中華人民共和國中華人民共和國");
Ext.MessageBox.alert("getsize",String.format("width:{0}px\theight:{1}px",size.width,size.height))

方法
bind( String/HTMLElement el ) : void
綁定到el

createInstance( String/HTMLElement el, [Number fixedWidth] ) : Ext.util.TextMetrics.Instance
為el創建TextMetrics實例

getHeight( String text ) : Number
getSize( String text ) : Object
getWidth( String text ) : Number
得到尺寸

measure( String/HTMLElement el, String text, [Number fixedWidth] ) : Object
測算文本text在el中將要佔用的尺寸

setFixedWidth( Number width ) : void
設置指定的寬度

Ext.XTemplate
增強型模板,支持更多功能了,雖然方法不多,但用起來來還真的很麻煩,但並不建議大家學習這樣的自定義語法,不如用xslt
另外這個Xtemplate雖然命名空間在Ext之下,但源文件卻是放在util目錄中的
XTemplate( String/Array html )
XTemplate.from( String/HTMLElement el ) : Ext.XTemplate
apply() : void
applyTemplate( Object values ) : String
compile() : Function
這些方法Ext.Template中都有說明,