参考ExtJS实用开发指南
1 类库
ExtJS 由一系列的类库组成，一旦页面成功加载了 ExtJS 库后，我们就可以在页面中通
过 javascript 调用 ExtJS 的类及控件来实现需要的功能。ExtJS 的类库由以下几部分组成：
底层 API(core)：其它控件都是建立在这些底层 api 的基础。
控件(widgets)：控件是指可以直接在页面中创建的可视化组件，比如面板、选项板、
表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控
件来实现友好、交互性强的应用程序的 UI。控件位于源代码目录的 widgets 子目录中，包含
如图 所示。
实用工具 Utils：Ext 提供了很多的实用工具，可以方便我们实现如数据内容格式化、 JSON
数据解码或反解码、对 Date、Array、发送 Ajax 请求、Cookie 管理、CSS 管理等扩展等功
能，如图所示：
2 组件
组件形成了 Ext 的控件， Ext 组件是由 Component 类定义，每一种组件都有
一个指定的 xtype 属性值，通过该值可以得到一个组件的类型或者是定义一个指定类型的组
件。
ExtJS 中的组件体系由下图所示
组件分三类：基本组件，工具栏组件，表单及元素组件
3. 如何使用组件
3.1 组件可以直接通过 new 关键子来创建：比如控件一个窗口，使用 new Ext.Window()；创建一个表格则使用 new Ext.GridPanel()。
在构造函数中通过传递构造参数来创建组件：组件的构造函数中一般都可以包含一个对象，这个对象包含创建组件所需要的配置属性
及值，组件根据构造函数中的参数属性值来初始化组件。比如下面的例子
var obj={title:"hello",width:300,height:200,html:‘Hello,easyjf open source‘};
var panel=new Ext.Panel(obj); panel.render("hello");
<div id="hello"> </div>
或者省去obj变量，直接这样：
var panel=new Ext.Panel({title:"hello",width:300,height:200,html:‘<h1>Hello,easyjf open source</h1>‘});
panel.render("hello");
注：render 方法后面的参数表示页面上的 div 元素 id，也可以直接在参数中通过 renderTo 参
数来省略手动谳用 render 方法，只需要在构造函数的参数中添加一个 renderTo 属性即可，
如下：
New Ext.Panel({renderTo:"hello",title:"hello",width:300,height:200,html:‘<h1>Hello,easyjf open source
</h1>‘});
3.2 对于容器中的子元素组件，都支持延迟加载的方式创建控件，此时可以直接通过在需要
父组件的构造函数中，通过给属性 items 传递数组方式实现构造。如下面的代码：
var panel=new Ext.TabPanel({width:300,height:200,items:[ {title:"面板1",height:30},{title:"面板
2",height:30},{title:"面板3",height:30}]});panel.render("hello");
这里包括三个面板。上面的代码与下面的代码等价：
var panel=new Ext.TabPanel({width:300,height:200,items:[new Ext.Panel( {title:"面板1",height:30}),new
Ext.Panel({title:"面板2",height:30}),new Ext.Panel({title:"面板3",height:30})]});panel.render("hello")；
前者不但省略掉了 new Ext.Panel 这个构造函数，最重要前者只有在初始化 TabPanel 的
时候，才会创建子面板，而第二种方式则在程序一开始就会创建子面板。也就是说，前者实
现的延迟加载。
4 组件的配置属性
在 ExtJS 中，除了一些特殊的组件或类以外，所有的组件在初始化的时候都可以在构造
函数使用一个包含属性名称及值的对象，该对象中的信息也就是指组件的配置属性。
比如创建一个按钮：
var panel=new Ext.TabPanel({width:300,height:200,items:[new Ext.Panel( {title:"面板1",height:30}),new
Ext.Panel({title:"面板2",height:30}),new Ext.Panel({title:"面板3",height:30})]});panel.render("hello");
每一个组件除了继承基类中的配置属性以外，还会根据需要增加自己的配置属性，另外
子类中有的时候还会把父类的一些配置属性的含义及用途重新定 义。学习及使用 ExtJS，
其中最关键的是掌握 ExtJS 中的各个组件的配置属性及具体的含义，由于所有的组件都继承自 Ext.Component，因此在这里我们列出组件基类 Component 中
的配置属性简单介绍
5 Extjs Extjs Extjs 组件的事件处理
ExtJS 提供了一套强大的事件处理机制，通过这些事件处理机制来响应用户的动作、监
控控件状 态变化、 更新控 件视图 信息、 与服务 器进行 交互等 等。事 件统一 由
Ext.EventManager 对象管理，与浏览器 W3C 标准事件对象 Event 相对 应，Ext 封装了一个
Ext.EventObject 事件对象。支持事件处理的类(或接口)为 Ext.util.Observable，凡是继承该类
的组 件或类都支持往对象中添加事件处理及响应功能。
首先我们来看标准 html 中的事件处理，看下面的 html 代码：
Ext.get("btnAlert")得到一个与页面中按钮 btnAlert 关联的 Ext.Element 对象，可以直接调
用该对象上的 addListener 方法来给对象添加事件，同样实现前面的效果。在调用 addListener
方法的代码中，第一个参数表示事件名称，第二个参数表示事件处理器或整个响应函数。
ExtJS 支持事件队列，可以往对象的某一个事件中添加多个事件响应函数，看下面的代码：
5.1 addLinster 方法的另外一个简写形式是 on，由于调用了两次 addListener 方法，因此当点
击按钮的时候会弹出两次信息。
在使用 Ext 的事件时，我们一般是直接在控件上事件，每一个控件包含哪些事件 ，
在什么时候触发，触发时传递的参数等，在 ExtJS 项目的文档中 都有较为详细的说明。
5.2 组件的事件监听器可以直接在组件的配置属性中直接声明