喜欢上ext是因为那个强大的grid控件,(和Developer Express的xtraGrid功能很相象)让我着实兴奋了N天。但ext不同于rototype,ext不光提供了优雅的底层库,更丰富的是他那些迷人的widgets。今天我就说说这段时间以来使用ext底层库开发的一此心得吧(本人接触ext也没多久,文中难免有错误之处,还请大家提出)。
1:Ext.get;
Ext.get实际上是Ext.Element.get,静态方法,作用是获取元素对象,如果是相同的对象的话,只是从缓存中提取。参数@param{String/HTMLElement/Element} el 节点的id,一个DOM节点或是已存在的元素,返回Ext.Element对象。关于Ext.Element属性大家可以去查看他的文档,他的主要属性包括获取或设置Style, dom操作(添加或移除对象),事件侦听,动画等其它。下面例子是一些常见的操作
var body = Ext.get(document.body);
body.on("click", function(e){
//你自已的事件处理代码
}, this);
Element.on是Element.addListener的缩写(与Element.on对应的还有Element.un,removeListener), Element.addListener则是 调用Ext.EventManager.on方法(Ext.EventManager位于core\下的EventManager.js文件中),作用是在指定的Element上侦听事件,
/**
* 加入一个事件处理器(event handler)
* @param {String} eventName 加入事件的类型
* @param {Function} fn 事件涉及的方法
* @param {Object} scope (可选的)函数之作用域 (这个对象)
* @param {Object} options (可选的)标准EventManager配置项之对象
*/
比如上例中则是对body元素侦听click事件,function(e){//你自已的事件处理代码}中的e是经过包装的一个对象,也就是Ext.EventObject(位于core\下的EventManager.js文件中),EventObject丰富了原来的event对象,并且还提供一些额外方法用于兼容不同的浏览器。常用的有stopEvent用上停上事件上报, getCharCode获取事件的键盘代码, getTarget获取事件的目标对象, getWheelDelta常规化鼠标滚轮的有限增量, getPoint获取页面坐标等。
2:Ext.extend;
/**
* 继承,并由传递的值决定是否覆盖原对象的属性
* 返回的对象中也增加了override()函数,用于覆盖实例的成员
* @param {Object} subclass 子类,用于继承(该类继承了父类所有属性,并最终返回该对象)
* @param {Object} superclass 父类,被继承
* @param {Object} overrides (该参数可选) 一个对象,将它本身携带的属性对子类进行覆盖
* @method extend
*/
在ext要实现继承也很简单,请看
var a = function(id){
this.id = id;
}
a.prototype = {
tostring : function(){
return this.id;
}
};
b = function(id){
b.superclass.constructor.call(this, id);
}
Ext.extend(b, a, {
tostring : function(){
return String.format("b:{0}", this.id);
}
});
//测试一下
var obj1 = new a("obj1");
alert(obj1.tostring());
var obj2 = new b("obj2");
alert(obj2.tostring());
3:Ext.util.Observable
一个抽象基类,为事件机制的管理提供一个公共接口,如果你希望的类可以有事件,就继承它吧。
Employee = function(name){
this.name = name;
this.addEvents(
"fired",
"quit"
);
}
Ext.extend(Employee, Ext.util.Observable, {
onQuit : function(){
this.fireEvent("quit", this.name, new Date);
},
quit : function(){
this.onQuit();
}
});
var employee = new Employee("hjw");
employee.on("quit",
function(name, date){
alert(String.format("{0}在{1}时退出了", name, date));
}
);
employee.quit();
this.addEvents声明Employee有哪些事件,(就象我们在C#里的开头写的public event System.EventHandler quit;一样)
this.fireEvent则是引发事件
/**
* 触发指定的参数,并将参数传入(至少要有事件名称)。
* @param {String} eventName
* @param {Object...} args 传入句柄(handlers)的参数
* @return {Boolean} returns false:如果有句柄返回false而返回false,否则返回true
*/
通过Ext.util.Observable继承的子类则都有on和un方法,作用相当于C#里的this.Load += new EventHandler(MainForm_Load);
this.Load -= new EventHandler(MainForm_Load);
上面代码的功能是先声明一个Employee对象,然后添加fired和quit事件,接着继承Ext.util.Observable类,并添加onQuit和quit用于触发quit事件
呵,好了,今天就讲这些吧,快元旦了,先祝大家元旦快乐。
待续。。
