该系列文章不側重全方位的去介绍ExtJs的使用，仅仅是側重于解决ExtJs问题的思考方法。写的人不用长篇大论，学的人则可以自立更生。l
  学习的人仅仅要有一些CSS的javascript的基础知识而且对于英文不至于很蹩脚（以辅助词霸能看懂ExtJs的API为准），都可以參考本教程进行修行。

《一》 一切从API開始

  非常多学ExtJs的朋友在初学ExtJs的时候认为ExtJs的非常easy效果非常好，几行代码就把效果搞定了。可是用得多了，抱怨就開始了：ExtJs的布局怎么这么麻烦啊。那些參数哪里来的呀？我想弄个效果怎么就弄不出来啦，然后风风火火的在论坛发一大堆帖子。发现没几个人睬，就得出结论了：ExtJs不好用。可是可以非常顺利的用ExtJs解决这个问题的人却大有人在，所以，不要抱怨酸葡萄了，想提高，还是得安安心心坐下来看帖子：）

  在学习前，首先得明确一个道理：所谓开发高手，解决这个问题自然比一般的常人要快。除了经验以外，当中能力最大的一方面，就是查找资料比一般常人要迅速。好比一本武林秘籍，落到常人手里一般是没多大用处的，得“高人”点拨，先学点“内功心法”。对于ExtJs来说，“武林秘籍“就是ExtJs的API文档。所以，学习ExtJs，首先得学会如何去看API。因此，第一步，就是学习如何看ExtJs的API文档

下载ExtJs 2.0.2(ExtJs的最后一个免费版本号)的开发包，解压缩后，可以看到有下面几个文件夹：

adapter Extjs和其他JS开发包之间兼容使用的适配器，jquery,prototype和yui，还一个是ExtJs自己的
air 和adobe air整合用的
build jsBuild出来的文件夹
docs 武林秘籍就这本了
examples 养眼的一些ExtJs官方样例，可供依葫芦画些瓢
source JSBuild用的源，里面有个jsb项目文件，能够build出自己的Ext-all.js
resources ExtJs执行须要的资源文件，包含图标和CSS这些

假设你下载的ExtJs有这些非空文件夹，恭喜你，至少有80%可能证明你下载的这个ExtJs不是山寨版或阉割版。能够进一步学习了 ExtJs API的查看须要HTTP环境，这里推荐LiteServe。绿色软件个头小，功能也足。当然你也能够用apache或IIS，然后把WEB根文件夹指向ExtJs的解压文件夹，比如：d:/ext-2.0.2，port在80执行。然后在server敲入地址：，loading完成后你就能够看到ExtJs API的界面例如以下



左边的树点击后，右边的标签页能加入该类的标签，并在页内显示该类的信息。以panel为比例如以下：



  如图你能够看到ExtJs的包，原始定义文件(build的src里相应的那个文件) ，相关类，继承的子类，父类以及一颗直观的继承树。然后接下来的区域“panel is..”是该类的说明，该区域非常重要，通常类的该区域可能给了该类的使用演示样例以及须要注意的地方。

  接下来是配置，属性，方法和事件4部分。从上面图片能够看到，具体信息顶部给了到这4部分的链接："Properties" "Methods" "Events" "Config Options"。
滚动鼠标便能够依次浏览该4部分：

首先出场的是Config Options，这些參数是创建类时构造方法的參数。例如以下：


你能够看到内容分3列：

  第一列是一个小三角箭头。能够折叠和展开该參数说明。

  第二列是參数说明，假设说明区域还有内容未显示完，内容末尾会显示成“...”。如上图animCollapse 的部分，点第一列的箭头能够展开。activeItem參数那行就是展开后的效果。展开后显示该參数的说明，注意Config Options里有非常多參数都是有default属性的，也就是说。在new的时候的參数Objects不传入该參数，该參数默认就是使用default的值，这样能够大大降低了使用时构造參数的数量。比如new一个panel，除了指定渲染的对象外，能够仅配置html的属性，比如：new Ext.Panel({renderTo:‘panelDiv‘,html:‘内容‘});
有一点特别要注意，就是传入config对象时，千万不要多了或漏了逗号。IE的对象定义格式要求非常严格，对象最后一个成员不能以逗号结尾，否则JS加载时就出错了。比如：new Ext.Panel({renderTo:‘panelDiv‘,html:‘内容‘,}); 在FireFox3下能够通过，可是在IE6下会导致一个无法编译的错误。

  第三列是定义类，，因为javascript也是OO的语法，因此子类也继承了父类的属性和方法。前面带有一个向上箭头的是继承的属性或方法，通常假设看某个类的特有功能（比如Panel类的折叠collapse相关的方法），就须要找Difined By为当前类的说明行，这样就非常方便。

  对于Config Options的使用，另一个比較方便的地方，就是当指定Config Options的xtype后，在ExtJs生成容器的子对象时，能够不用去new一个对象，而仅仅须要传入配置对象，在对象里指定xtype就可以。有些容器的items有默认xtype，比如Ext.Panel的items传入配置对象默认的xtype就是‘panel‘，Ext.Panel的buttons传入的配置对象默认的xtype就是button。比如，下面3种写法是等效的：

new Ext.Panel({ renderTo: ‘panelDiv‘, items:[{ html: ‘内容1‘ },{ html: ‘内容2‘ }], buttons:[{ text: ‘測试button‘ }] }); 你也能够写成 new Ext.Panel({ renderTo: ‘panelDiv‘, items:[{ xtype: ‘panel‘, html: ‘内容1‘ },{ xtype: ‘panel‘, html: ‘内容2‘ }], buttons:[{ xtype: ‘button‘, text: ‘測试button‘ }] }); 或者用new的方式 new Ext.Panel({ renderTo: ‘panelDiv‘, items:[ new Ext.Panel({ html: ‘内容1‘ }), new Ext.Panel({ html: ‘内容2‘ }) ], buttons: [new Ext.Button({ text: ‘測试button‘ })] });