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

ExtJS 中的类与继承

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

Foo=function  (){
   return {
      init:function(){},
      destory:function(){}   
    }
}()

Foo=(function  (){
   return {
      init:function(){},
      destory:function(){}   
    }
})()

var SubClass = function() {
   SubClass.superclass.constructor.call(this);
};
Ext.extend(SubClass, BaseClass, {
   newMethod : function() {},
   overriddenMethod : function() {}
};

事件
事件是指一个特定的动作，这个动作可以针对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'); // 这里表示事件执行完毕
}

名称：265天气根据IP自动获得当地的天气情况
代码：

<iframe src="http://weather.265.com/weather.htm" width="168" height="54" frameborder="no" border="0" marginwidth="0&quoat; marginheight="0" scrolling="no"></iframe>

效果：

说明 ：直接调用

名称：QQ天气预报代码（一）
代码 ：<iframe width="145" height="130" border="0" align="center" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" src="http://minisite.qq.com/Weather/news_new.h tml" allowTransparency="true"></iframe>
效果 ：

说明 ：这种适合于在网页的边栏插入。但一个缺点是，上面的4个城市是既定的，无法改成别的。插 入时，选好网页上的位置，直接将左栏的源代码全部拷进去就行了

名称：QQ天气预报代码（二）
代码 ：<IFRAME ID='ifm2' WIDTH='189' HEIGHT='190' ALIGN='CENTER' MARGINWIDTH='0' MARGINHEIGHT='0' HSPACE='0' VSPACE='0' FRAMEBORDER='0' SCROLLING='NO' SRC='http://weather.qq.com/inc/ss258.htm'></IFRAME>
效果 ：

说明 ：这种 也适合于在网页的边栏插入。上面 的城市可以自定，比如厦门可改成别的。定制的方法是修改我代码中标红的数字，从1开始代表“香 港”开始，每个数字都代表一个城市，厦门是287，具体要哪个城市自己找一下罢。

名称：新浪天气预报代码
代码 ：<IFRAME ID='ifm2' WIDTH='260' HEIGHT='70' ALIGN='CENTER' MARGINWIDTH='0' MARGINHEIGHT='0' HSPACE='0' VSPACE='0' FRAMEBORDER='0' SCROLLING='NO' src="http://news.sina.com.cn/iframe/weather/130101.html"></iframe>
效果 ：

说明 ：这种适合于在网页的头栏插入。上面的城市可以自定，比如 石家庄可改成别的。

名称：QQ天气预报代码（三）
代码 ：<iframe width="469" height="218" border="0" align="center" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" src="http://appnews.qq.com/cgi-bin/news_weather_search?city=厦门" allowTransparency="true"></iframe>
效果 ：

说明 ：这种适合于在网页的正栏插入。上面的城市可以自定，比如厦门可改成别的。定制的方法是修改我代码中标红的 名称。这里比较简单，直接用汉字改就行了。比如是福州的，你就直接把“厦门”改成福州就行。

名称：QQ天气预报代码（四）
代码 ：<iframe width=160 height=230 frameborder=0 scrolling=NO src=http://appnews.qq.com/cgi-bin/news_qq_search?city=南昌></iframe>
效果 ：

说明 ：直接调用

名称：QQ天气预报代码（五）
代码 ：<iframe src="http://appnews.qq.com/cgi-bin/news_qq_search?city=南昌" frameborder="0" width="160" scrolling="no" height="230"></iframe>
效果 ：

说明 ：这种适合于在网页的边栏插入。上面的城市可以自定，比如南昌可改成别的。定制的方法是修改我代码中标红的名称。这里比较简单，直接用汉字改就行了。比如是福州的，你就直接把“厦门”改成福州就行
http://www.4aqq.com/viewthread.php?tid=602

HTML selector

HTML selector 就是 HTML 的 tags, 比如 P, DIV, TD 等. 如你用 CSS 定义了它们, 在整页中, 这个 Tag 的性质就按照你的定义来显示了. HTML selector 的语法如下

tag {property:value}

Class selector

Class selector 有两种, 一种叫相关 class selector, 它跟一个 HTML 的 tag 有关系. 它的语法是

tag.Classname {property:value}

Classname {property:value}

ID selector

ID selector 其实跟独立 class selector 的功能一样. 而区别在于它们的语法和用法不同, 以及对于 Javascript 操纵 HTML
元素有帮助. 它的语法如下

#IDname {property:value}

假如我们有下面的定义#yelowone {color: yellow}我们可以运用这个定义到任何的有同样 ID 名字的 tag, 比如 <SPAN ID="yellowone">text here</SPAN>你可能觉得既然 ID selector 和独立 class selector 功能一样, 为什么两者都存在呢. 如果你知道用 CSS-P 来定位的话, 你就明白它们的区别了. 有 ID 的 HTML 元素可以被 CSS-P和 JavaScript 来操纵。

包含选择符

可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，语法如下：

outerTag  innerTag {property:value}

样式表的层叠性

层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。例如在DIV标记中嵌套P标记：

div { color: red; font-size:9pt}
……
<div>
<p>
这个段落的文字为红色9号字
</p>
</div>

ID选择符>类选择符>HTML标记选择符

p { color: #FF0000!important }
.blue { color: #0000FF}
#id1 { color: #FFFF00}