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

 

ExtJS入门之一 类与继承

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

ExtJS 中的类与继承

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

<!-- [if gte vml 1]><v:shapetype id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f"> <v:stroke joinstyle="miter"/> <v:formulas> <v:f eqn="if lineDrawn pixelLineWidth 0"/> <v:f eqn="sum @0 1 0"/> <v:f eqn="sum 0 0 @1"/> <v:f eqn="prod @2 1 2"/> <v:f eqn="prod @3 21600 pixelWidth"/> <v:f eqn="prod @3 21600 pixelHeight"/> <v:f eqn="sum @0 0 1"/> <v:f eqn="prod @6 1 2"/> <v:f eqn="prod @7 21600 pixelWidth"/> <v:f eqn="sum @8 21600 0"/> <v:f eqn="prod @7 21600 pixelHeight"/> <v:f eqn="sum @10 21600 0"/> </v:formulas> <v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/> <o:lock v:ext="edit" aspectratio="t"/> </v:shapetype><v:shape id="_x0000_i1025" type="#_x0000_t75" alt="image_thumb6" style='width:226.5pt;height:89.25pt'> <v:imagedata src="file:///C:\DOCUME~1\ADMINI~1\LOCALS~1\Temp\msohtml1\01\clip_image001.png" o:href="http://images.cnblogs.com/cnblogs_com/beginor/WindowsLiveWriter/ExtJS_819F/image_thumb6_3.png"/> </v:shape><![endif]--><!-- [if !vml]--> <!-- [endif]-->

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

<!-- [if gte vml 1]><v:shape id="_x0000_i1026" type="#_x0000_t75" alt="image_thumb9" href="http://images.cnblogs.com/cnblogs_com/beginor/WindowsLiveWriter/ExtJS_819F/image_thumb9_2.png" style='width:228.75pt;height:92.25pt' o:button="t"> <v:imagedata src="file:///C:\DOCUME~1\ADMINI~1\LOCALS~1\Temp\msohtml1\01\clip_image003.png" o:href="http://images.cnblogs.com/cnblogs_com/beginor/WindowsLiveWriter/ExtJS_819F/image_thumb9_thumb.png"/> </v:shape><![endif]--><!-- [if !vml]--> <!-- [endif]-->  

这样，就容易理解了。

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

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

<!-- [if !supportLists]-->4.           <!-- [endif]-->var SubClass = function () {

<!-- [if !supportLists]-->5.           <!-- [endif]-->    SubClass.superclass.constructor .call(this );

<!-- [if !supportLists]-->6.           <!-- [endif]-->};

<!-- [if !supportLists]-->7.           <!-- [endif]-->Ext.extend(SubClass, BaseClass, {

<!-- [if !supportLists]-->8.           <!-- [endif]-->    newMethod : function () {},

<!-- [if !supportLists]-->9.           <!-- [endif]-->    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 的开发中是很重要的。