网上找到的关于Ext的一些入门资料-JavaScript-WEB前端-六狼论坛-IT论坛-计算机论坛

1111111111111 发表于 2013-1-23 01:48:20

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

ExtJS入门之一类与继承
在项目中使用ExtJS已经有一段时间了，对于这个庞大的Script类库有了一定的了解，在Ext的使用上也有了一定的经验，现将这些经验做一下总结，作为一个入门材料给大家分享。对于Ext库，不要被它的庞大所吓倒，只要静下心来看SDK，多做一些练习，还是很容易上手的。
ExtJS 中的类与继承
在Ext下，定义一个JavaScript类似乎没有什么特别的，可以直接声明一个构造函数，并使用关键字new来进行初始化。有一点值得注意的是在Ext中频繁出现的Singleton类，普遍定义为：
<img width="302" height="119" border="0" alt="image_thumb6">
然后就可以直接调用Foo的方法了，其实这段代码可以理解为
<img width="305" height="123" border="0" alt="image_thumb9">
这样，就容易理解了。
谈到类和继承，有几个函数必须注意， Ext.apply、Ext.applyIf和Ext.extend：

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

页: [1]

六狼论坛's Archiver

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