您的位置:首页 > Web前端 > JavaScript

[转载]EXT核心API详解(七)-Ext.KeyNav/KeyMap/JSON/Format/DelayedTask/TaskRunner/TextMetrics/XTemplate

2009-05-15 11:09 393 查看
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中都有说明,
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐