网下找到的关于Ext的一些入门资料 _Web前端

网上找到的关于Ext的一些入门资料

ExtJS入门之一类与继承

在项目中使用ExtJS 已经有一段时间了，对于这个庞大的Script 类库有了一定的了解，在Ext 的使用上也有了一定的经验，现将这些经验做一下总结，作为一个入门材料给大家分享。对于Ext 库，不要被它的庞大所吓倒，只要静下心来看SDK ，多做一些练习，还是很容易上手的。

ExtJS 中的类与继承

? 在Ext 下，定义一个JavaScript 类似乎没有什么特别的，可以直接声明一个构造函数，并使用关键字new 来进行初始化。有一点值得注意的是在Ext 中频繁出现的Singleton 类，普遍定义为：

然后就可以直接调用Foo 的方法了，其实这段代码可以理解为

?

这样，就容易理解了。

谈到类和继承，有几个函数必须注意， Ext.apply 、 Ext.applyIf 和Ext.extend ：

Ext.apply(obj, config, [defaults]) 将config 对象的所有属性都复制到另一个对象obj 上，第三个参数defaults 可以用来提供默认值，不过通常指用前两个参数就够了。这个函数主要用在构造函数中，用来将配置复制到对象上。
Ext.applyIf(obj, config) 和Ext.apply 的功能类似，唯一不同的是，这个函数只会将config 对象中有，而obj 对象中没有的属性复制到obj 上。
Ext.extend(subclass, superclass, [overrides]) 用来继承已有的类，通常的使用方法是

4.?????????? var SubClass = function () {

5.?????????? ??? SubClass.superclass.constructor .call(this );

6.?????????? };

7.?????????? Ext.extend(SubClass, BaseClass, {

8.?????????? ??? newMethod : function () {},

9.?????????? ??? overriddenMethod : function () {}

};

在上面的代码中， SubClass 继承自BaseClass ，? 添加了新的方法newMethod ，重写了overriddenMethod 方法。

个人认为，要扎实的掌握ExtJS ，并且能够对原有类库进行扩展，掌握以上的方法是必须的，也是入门的必经之路。

ExtJS入门之二事件

事件是指一个特定的动作，这个动作可以针对HTML 元素的，如keydown,keyup,mouseover, mouseout 等，也可以是对于其它自定义的动作，如对Ajax 异步请求的响应等。在ExtJS 中，该如何处理呢？

1. 处理HTML 元素的标准事件

HTML 元素的标准事件是指mouseover 、mousedown 、click 、blur 、focus 、change 等能够直接对HTML 元素发生的事件。在ExtJS 中，这些事件的处理可以用如下的代码：

注册一个事件处理函数使用： Ext.get('myElement' ).on ('click' , myHandler, myScope) myElement 是要注册的元素的 ID ， click 是事件的名称（注意，和 HTML 元素中的声明 onXXX 不同，这里不需要 on ）， myHandler 是处理函数的函数名称， myScope 是一个可选的参数，指定处理函数绑定的对象，也就是处理函数的作用域，如果不提供这个参数，则是默认的 window 。
撤销一个事件处理函数： Ext.get('myElement' ).un ('click' , myHandler, myScope) 参数的意义同上。

ExtJS 会根据不同的浏览器进行相应的处理，根本不需要理会用户用的是什么浏览器。根据事件的不同，传给处理函数的参数也会不同，这个只能参考ExtJS 的文档了，必要时还得参考源代码。

2. 处理自定义事件

在ExtJS 中使用自定义事件，需要从Ext.util.Observable 继承，示例代码如下：

Employee = function

(name

){

?? 



this

.name

 = name

;

?? 

this

.addEvents({

????? 

"fired

" : true

,

????? 

"quit

" : true

?? 

});

Ext.extend(Employee, Ext.util.Observable, { ... });

在这段代码中，定义了一个Employee 类，定义了fired 和quit 两个事件。如何触发这两个事件呢，基类 Ext.util.Observable 提供了触发自定义事件的方法fireEvent(eventName, arg1, arg2, ... argn), eventName 是要触发的时间的名称（不区分大小写），后面的参数arg1 ，arg2 等是要传给事件处理函数的参数。用上面的Employee 类做示例，触发quit 事件：

this

.fireEvent('quit', this

);

这行代码将触发quit 事件，并将Empolyee 类的实例传给quit 事件的处理函数，quit 事件的订阅可以采用如下代码：

function

 myHandler1(empolyee){ ... }

function

 myHandler2(empolyee){ ... }

var

 emp = new

 Empolyee('tom');

emp.on('quit', myHandler1);

emp.on('quit', myHandler2);

在上面的代码中，为quit 事件注册了两个处理函数（myHandler1 与myHandler ），当quit 事件被激发时，将会依次调用myHandler1 和myHandler2 两个函数。

值得注意的是，不管是HTML 元素的标准事件还是自定义事件，如果为某个时间注册了多个处理函数，如前面的例子，如果myHandler1 返回 false 的话，则会取消在myHandler1 之后注册的处理函数的执行，即该事件被取消，从而停止继续执行该事件的处理函数，而这个返回值false 会作为事件激发的结果，返回给empolyee ，即：

var

 result = this

.fireEvent('quit', this

);

if

 (result === false

) {

?? 

alert

('event canceled'); //



这里表示事件被某个处理函数取消

else

 {

?? 

alert

('event complete'); // 



这里表示事件执行完毕

通过Ext 的自定义事件的机制，可以实现一对多的观察者模式，也可以实现一对一的绑定模式，这一点，在ExtJS 的开发中是很重要的。

网下找到的关于Ext的一些入门资料

ExtJS入门之二 事件

ExtJS入门之二事件