ExtJS快速入门指南

1
ExtJS快速入门指南
一、ExtJS 框架简介.......................................................................................................................... 2
二、如何使用Ext............................................................................................................................. 2
三、Ext 组件..................................................................................................................................... 3
1、组件简介...............................................................................................................................3
2、组件XType..........................................................................................................................4
3、组件应用...............................................................................................................................4
4、组件配置选项.......................................................................................................................5
5、组件属性...............................................................................................................................6
6、组件方法...............................................................................................................................7
四、事件及事件响应.........................................................................................................................7
五、Component 及Container 简介................................................................................................. 11
1、Ext.Component....................................................................................................................11
2、Ext.Comtainer..................................................................................................................... 11
六、面板Ext.Panel.......................................................................................................................... 11
面板Panel 简介........................................................................................................................ 11
面板内容..................................................................................................................................13
面板与DOM 节点DIV........................................................................................................... 14
七、ViewPort...................................................................................................................................15
八、窗口Window........................................................................................................................... 17
九、对话框......................................................................................................................................19
十、TabPanel................................................................................................................................... 23
十一、布局......................................................................................................................................27
十二、表格Grid............................................................................................................................. 30
十三、TreePanel..............................................................................................................................31
十四、表单Form............................................................................................................................ 33
十五、理解Html DOM、Ext Element 及Component.................................................................. 35
十六、Ext 类中的get 方法简介..................................................................................................... 36
十七、如何学习及掌握Ext............................................................................................................ 38
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
2
一、ExtJS框架简介
ExtJS 也就是Ext 框架，官方网址为www.extjs.com，ExtJS 是一个Ajax 框架，是一个用
javascript 写的，用于在客户端创建丰富多彩的web 应用程序界面。ExtJS 可以用来开发
RIA(Rich Internet Application，富互联网应用系统)的开源AJAX 应用框架，使用的开源协
议是GPL。
ExtJS 是一个用javascript 写的，主要用于创建前端用户界面，是一个与后台技术无关的
前端ajax 框架。因此，可以把ExtJS 用在.Net、Java、Php 等各种开发语言开发的应用中。
ExtJs 最开始基于UI 技术，由开发人员Jack Slocum 开发，通过参考Java Swing 等机制来组
织可视化组件，无论从UI 界面上CSS 样式的应用，到数据解析上的异常处理，都可算是一
款不可多得的JavaScript 客户端技术的精品。
二、如何使用Ext
首先从ext 官方网站下载ext 的sdk，把sdk 拷到web 应用程序目录，然后即可在web
页面中直接通过<script>标签引入ext 的库文件，就可以使用javascript 调用ext 的各种控件。
下面是使用Ext 的应用骨架代码：
<link rel="stylesheet" type="text/css" href="plugins/extjs/ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="plugins/extjs/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="plugins/extjs/ext-2.2/ext-all.js"></script>
<script>
Ext.BLANK_IMAGE_URL = 'plugins/extjs/ext-2.2/resources/images/default/s.gif';
Ext.QuickTips.init();
Ext.onReady(function(){
…///在这里面创建及使用ext 控件。
});
</script>
大多数时候，用户的js 文件放在一个单独的页面中，比如app.js，因此一个ext 应用就
可以改成由一个页面文件及一个或多个js 文件组成，如下：
app.html 内容
<link rel="stylesheet" type="text/css" href="plugins/extjs/ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="plugins/extjs/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="plugins/extjs/ext-2.2/ext-all.js"></script>
<script type="text/javascript" src="app.js"></script>
app.js 的内容
Ext.BLANK_IMAGE_URL = 'plugins/extjs/ext-2.2/resources/images/default/s.gif';
Ext.QuickTips.init();
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
3
Ext.onReady(function(){
var win=new Ext.Window({
title:"窗口",
width:500,
height:300,
html:"测试窗口"
});
win.show();
});
Ext.onReady 可能是你接触的第一个也可能是在每个页面都要使用的方法。这个方法会
在DOM 加载全部完毕后，保证页面内的所有元素能被Script 引用（reference）之后调用。
三、Ext组件
1、组件简介
所谓组件，简单来说，就是指可以复用的应用程序组成部件。Ext 最大特点，就是拥有
一个庞大、功能齐全、结构及层次分明的组件体系，并在组件的基础上进一步封装出各种实
用的控件。我们在开发的时候，只需要直接使用这些组件及控件，就可以创建出丰富多彩的
应用程序界面。比如说窗口、树、表格、选项板、工具栏、菜单等都是可以直接复用的组件
及控件。
Ext 组件是由Component 其及子类定义，每一种组件都有一个指定的xtype 属性值，通
过该值可以得到一个组件的类型或者是定义一个指定类型的组件。我们学习及使用Ext，其
实也就是学习Ext 组件/控件的各种功能及使用方法。
ExtJS 中的组件体系由图2-4 所示。
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
4
图2-4 ExtJs2.0 组件继承结构图
2、组件XType
在Ext 中，每一个组件都有一个类来定义，比如说按钮组件的类是Ext.Button 类，窗
口控件的类是Ext.Window，树控件的类是Ext.tree.TreePanel。除了可以通过类名来标识某一
种组件以外，Ext 还提出了一个xtype 的概念，我们可以理解为组件类名的缩写，比如说
Ext.tree.TreePanel 类对应的类缩写名称为treepanel。当一个组件创建了以后，我们可以通过
组件的getXType()方法来得到这个组件的xtype 值，还可以通过getXTypes()方法来得到这个
组件所属的所有类名，比如：component/box/field/textfield。
xtype 的主要作用是通过在配置选项中指定xtype 方的组件使用法，来实现组件的延迟
初始化
3、组件应用
在我们知道一个组件后，我们应该如何使用呢？现在我们就来看看组件的基本应用。组
件的使用方法大同小异，一般情况可以归纳为下面两种。
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
5
第一种就是前面我们已经接触到的使用new 操作符来创建一个组件对象实例，然后通
过这个对象实例就能使用这个组件了。
第二种方法是当在定义父容器中的子元素时（这里的子元素也是组件），比如窗口中放
按钮、放树等。可以通过xtype 这个属性来指定使用一个组件。下面拿Ext.Panel 这一个组
件来说，我们要创建一个面板，可以直接使用new Ext.Panel({})来进行创建。面板是一个容
器对象，他下面还可以包含很多其它的组件对象，这时可以通过调用他的add 方法来往里面
加入面板中的子元素。来看代码：
var panel=new Ext.Panel({title:"面板",width:500,height:300});
panel.add(new Ext.Button({text:"按钮一"}));
panel.add(new Ext.Panel({title:"子面板"}));
在上面的三句代码中，通过三个new操作符，很明显可以看出我们一共使用到了三个Ext
组件，也就是创建了两个Panel对象及一个按钮对象，这是非常容易理解的。
如果通过xtype的方式来使用组件，上面的代码可以改下如下的形式：
var panel=new Ext.Panel({title:"面板",width:500,height:300});
panel.add({xtype:"button",text:"按钮一"});
panel.add({title:"子面板"});
第一个Panel 的new 操作符是不能省略的，因为在这里他是父容器。第二条语句，通过在
大括号中指定xtype 值为button，来表示添加一个按钮到面板里面，第三行语句连xtype 都
没有指定，因为默认情况下xtype 就是指panel。
当然，我们可以在创建父容器的时候，在构造函数中通过items 这个属性来指定他下面的
子元素，因此上面的代码可以连起来写成下面的形式(这也是常见的形式)：
var panel=new Ext.Panel({title:"面板",width:500,height:300,
items:[{xtype:"button",text:"按钮一"},{title:"子面板"}]
});
我们把前面通过add 方法添加的组件直接写在了items 中，items 的值在这里是一个数组。
那么，使用new 操作符与使用xtype 指定组件的方式最大的区别在哪儿呢？最主要的一
点是使用new 操作符的话会立即创建对象，而使用xtype 则不会立即创建对象，他会在特定
的时刻，需要的时候(也就是当父容器渲染的时候)才会创建对象，也就说是使用xtype 可以
实现组件对象的延迟创建，这对于节约内存、提升性能来说是比较关键的。
4、组件配置选项
接下来看一看Ext 组件的另外一特性，也就是配置选项。配置选项是Ext 组件非常重要
的特性，在大多数Ext 组件中，都支持在构造函数中传递一个对象作为参数，在这个对象中
包含组件的详细描述信息，比如多高、多宽、有多少子元素等等，Ext 就是根据这些参数来
创建组件对象的。前面也讲了，在指定子元素时，可以不使用new 操作符，而是直接使用
配置选项来指定要使用的组件特性，并在配置选项中通过xtype 这个属性来指定组件的类型。
一个组件具体有哪些配置选项，以及这些配置选项的作用是什么呢？这时我们就需要查询
Ext 组件的API，API 中最前面的一节Config Options 就是介绍组件的详细配置选项。
当一个组建创建以后，他会在何时，在页面的哪个位置进行显示呢？比如说刚才的面板
Panel 的示例，在页面上并没有看见这个面板。虽然我们使用了new 操作符来初始化了这个
组件对象，但他并不会在页面中显示。组件要显示的前提是要渲染(Render)，组件只有在渲
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
6
染Render 以后，才会在页面中显示。让组件渲染及显示的方法有下面几种：
1、在组件创建以后直接调用组件的render( [Mixed container], [String/Number position] )
方法，这里的参数是一个复合参数，可以强制指定把组件渲染到页面中的某一个节
点；比如panel.render("test")。
2、直接在配置选项中通过renderTo 属性来指定把组件渲染到页面中的某一个节点。
3、直接在配置选项中通过applyTo 属性来指定组件渲染到某一个节点的父节点。
4、通过在配置选项中指定el 参数，然后直接调用render 方法来渲染组件。
5、使用show()方法显示组件，每一个组件只渲染一次，渲染后的组件就能通过DOM
在页面中找到，一般情况下组件渲染后就会显示出来，如果在配置选项中指定了
hidden 属性为true 则不会显示（或者是调用了组件对象的hide 方法），此时需要通
过调show()方法来显示组件。
下面是这
var panel=new Ext.Panel({title:"面板",width:500,height:300});
panel.render("test");
var panel=new Ext.Panel({title:"面板",width:500,height:300,renderTo:"test"});
var panel=new Ext.Panel({title:"面板",width:500,height:300,applyTo:"test1"});
var panel=new Ext.Panel({title:"面板",width:500,height:300,el:"test"});
panel.render();
var panel=new Ext.Panel({title:"面板",width:500,height:300,el:"test"});
panel.show();
5、组件属性
下面我们讲组件的属性。所属就是指组件对象的一些内在特性，从面向对象的角度来说，
属性就是用来描述对象的具体状态的。一个对象最基本就是属性与方法。当我们创建并初始
化了一个组件以后，他在内存里面就表现为一个对象，这个对象也就具有了自己特定的属性
信息。
我们可以在程序中直接访问这些属性来得到这个组件对象的特定信息。比如说，我们要
判断一个组件是否处隐藏，可以通过下面的的代码：
if(panel.hidden){
//doSomething
}
这里panel.hidden 的hidden 就是panel 对象的属性。
属性从是否可以改变其值这一点来看，可以分为只读属性以及可读写的属性两种。由于
可以通过方法（也就是动作）来直接改变对象的状态信息，因此，Ext 组件中的大多数属性
都是只读的，在API 中通过Read-only 来进行标注，这一点一定要注意。
由于是动态语言，因此即使是只读属性，你仍然可以使用panel.hidden=true 这样的语句
来改变他的值，但是却达不到把组件隐藏的效果，而且会造成组件工作的不正常，因此我们
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
7
不能随便改写标注为只读属性的值。比如，我们要隐藏一个组件对象，应该通过panel.hide()
方法来进行。
在查看API 的时候，每一个组件都有Public Properties 这一节，这里面就会列出了这个
组件所具有各种公开属性。
不同的组件还会有自己特定的属性，这个需要根据API 来查看。
除了API 上写明的属性以外，我们还可以通过Ext 的源代码来了解到组件在特定的生命
周期中还会有特定的属性（因为是动态语言嘛）。其中一个比较有用的就是el 属性，这是在
组件渲染render 后都会有的属性，我们可以通过这个属性来得到一个组件下面Element 元素
信息。
比如，在panel 渲染以后，可以使用alert(panel.el.dom.innerHTML)输出这个面板对应的
HTML 信息，这对于我们调试程序或理解ext 的生成的页面代码是非常有用的。
6、组件方法
下面，我们看看组件的另外一个重要特性：方法，也就是对象的动作。大部分的类都有
自己的的方法，方法主要用来改变或读取组件的状态，让组件执行指定的动作等。我们在使
用Ext 的时候，经常需要进行控件的交互，动态改变组件的相关信息，这时就需要调用组件
的相关方法。
组件的方法在API 方法中的Public Method 一节只进行了详细的介绍。下面我们来看看
每一个组件所共有的部分方法：
在编写Ext 应用的过程中，我们经常需要查询API，看看这个组件有哪些方法，需要传
递什么样的参数，返回什么样的结果等等。因此，大家对API 一定要熟悉才行。
四、事件及事件响应
事件及事件处理其实就是当用户执行某一个状态，或者是对象执行某一个操作时，会给
哪些关心这个动作的其它对象发送一个通知，那些对象（监听者）接受到通知后，会作具体
的响应。比如说，当用户移动或点击一下鼠标、者按下键盘，或者是当某一个组件隐藏时，
或者某一个动作执行之前或执行完后等，都可以产生事件通知，并让事件监听者作相应的处
理。
对于Ext 这种用于处理用户UI 的框架来说，事件的处理及响应就显得更加的重要了，
那些ExtJS 提供了一套强大的事件处理机制，通过这些事件处理机制来响应用户的动作、监
控控件状态变化、更新控件视图信息、与服务器进行交互等等。
下面我们先来看一个传统的html 页面中事件处理的例子：
<script>
function a(e){
alert('some thing'+e.getX());
}<
/script>
<input type="button" value="alert 框" id="btnAlert"
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
8
οnclick="a();">
当然，上面的代码可以改成另外一种更直接的形式：
<script>
function a(e){
alert('some thing'+e.getX());
}w
indow.οnlοad=function(){
document.getElementById("btnAlert").οnclick=a;
}<
/script>
<input type="button" value="alert 框" id="btnAlert">
对于Ext 来说，他在传统事件的基础上提供了更多丰富多彩的事件处理机制，我们可以
使用他的事件处理机制，通过事件响应及处理，编写出交互性非常灵活的Web 应用程序。
Ext 的事件支持体现在两个方面，首先是对浏览器默认事件进行了进一步的扩展及封装，
比如在Event 对象的基础上提供了一个EventObject，提供了全局的事件管理器，灵活多变
的事件响应方法，比如说在事件发生后几秒才响应事件，或者事件队列等功能。
可以使用Element 元素或组件Component 对象上的addListener 或on 方法来添加事件响
应函数，并可以指定事件响应的各种特定方式（比如是否只执行一次响应函数、延迟多少时
间执行响应函数等），支持事件队列。也可以使用removeListener 或un 方法来删除事件响应
函数。
使用Ext 的事件处理机制，前面的事件处理可以变成如下的形式：
<script>
function a(e{
alert('some thing'+e.getX())
}E
xt.onReady(function(){
Ext.get("btnAlert").addListener("click",a);
});
</script>
<input type="button" value="alert 框" id="btnAlert">
在调用addListener 方法的代码中，第一个参数表示事件名称，第二个参数表示事件处
理器或事件响应函数。ExtJS 支持事件队列，可以往对象的某一个事件中添加多个事件响应
函数，比如下面的代码：
Ext.onReady(function(){
Ext.get("btnAlert").on("click",a);
Ext.get("btnAlert").on("click",a);
});
由于调用了两次addListener 或on 方法，因此当点击按钮的时候会弹出两次信息。
当然，ExtJS 还支持事件延迟处理或事件处理缓存等功能，比如下面的代码：
Ext.onReady(function(){
Ext.get("btnAlert").on("click",a,this,{delay:2000});
});
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
9
由于在调用addListener 的时候传递指定的delay 为2000，因此当用户点击按钮的时候，
不会马上执行事件响应函数，而是在2000 毫秒(也就是两秒)后才会弹出提示信息框。
另外，Ext 对事件响应还提供了更多其它的特性支持，主要包括下面这些内容：
监听器缓冲，可以实现在指定的缓冲时间周期内，事件响应函数只执行一次，代码如下：
el.on('click', this.onClick, this, {buffer: 100});
还可以使用options 选项来指定事件的响应及处理机制，比如是否阻止事件的进一步传
播或响应等。"Handler" Listeners ：
// prevent default
el.on('click', this.onClick, this, {preventDefault: true});
// only stop propagation
el.on('click', this.onClick, this, {stopPropagation: true});
// prevent default and stop propagation
el.on('click', this.onClick, this, {stopEvent: true});
当然，还可以包含其它的选项，比如下面的代码：
el.on('click', this.onClick, this, {
single: true, // 在事件响应函数触发后自动删除监听器
delegate: 'li.some-class' //自动事件代理Automatic event delegation!
});
还可以在options 参数中包括自定义的参数信息，比如下面的代码：
function onClick(ev, target, options){
alert(options.someProperty); // alerts 'someValue'
}
var el = Ext.get('somelink');
el.on('click', onClick, null, {someProperty: 'someValue'});
可以一次性给某一个元素添加多个事件响应函数，比如下面的代码给元素添加了click、
mouseover 及mouseout 等事件的事件响应函数。
el.on({
'click' : {
fn: this.onClick,
scope: this,
delay: 100
},
'mouseover' : {
fn: this.onMouseOver,
scope: this
},
'mouseout' : {
fn: this.onMouseOut,
scope: this
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
10
}
});
下面，我们再来看看Ext 组件的事件。Ext 的中有一个Ext.util.Observable 类，他提供了
对象的事件观察监听及消息通知、事件触发等一系列的事件及响应相关功能，而Ext 组件的
基类Component 就是继承自这个类。因此，Ext 为其组件提供了非常丰富的事件模型，比如
组件生命周期变化、组件某一状态改变等，都提供了特定的事件支持。
比如说，所以有的组件都有一个render 事件，而这个事件是在组件渲染完以后会触发，
这时我们就可以通过监听这个事件来实现在组件渲染后执行特定的操作。看下面的代码：
function showHtml(p){
alert(p.el.dom.innerHTML);
}v
var panel=new Ext.Panel({title:"面板",width:500,height:300});
panel.addListener("render",showHtml);
panel.render("test")
那么一旦panel 渲染(调用了render 方法)以后，就会马上执行showHtml 这个方法，并把
panel 对象作为参数传递给showHtml 方法，因此我们可以看到这个panel 的HTML 代码片
段。当然，如果Panel 没有渲染，比如我们不调用render 方法，则不会执行showHtml 中的
内容。
有一些事件的响应函数会返回特定值，Ext 或根据这个响应函数的返回来判断是否执行
相应的操作。比如说所有组件都有一个beforehide 事件，这个事件是在组件变成隐藏之前触
发，如果事件响应函数返回了一个false 的值，那么他就会停止执行隐藏组件这个动作。
比如说来看下面的代码：
function confirmHide(){
return confirm("是否真要隐藏这个组件");
}v
var panel=new Ext.Panel({title:"面板",width:500,height:300});
panel.on("beforehide",confirmHide);
panel.render("test");
panel.hide();
那么这个当谳用panel.hide()这个方法时候，他就会隐藏这个组件，但是由于前面注册了
一个beforehide 事件，因此他就会在隐藏组件之前先调用confirmHide 方法，这个方法通过
一个confirm 函数来让用户选择是否隐藏，如果我们们选择“是“则会返回true,那么这个组
件就被隐藏，如果选择“否”则返回false，那么hide 方法就会停止执行隐藏的操作。
那么一个组件究竟支持哪些事件，这些事件在触发时会给响应函数传递什么样的参数，
以及事件响应函数是否会对组件的下一步操作产生影响，这就需要我们通过组件的API 中
的Events 部分来了解具体的信息了。
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
11
五、Component及Container简介
1、Ext.Component
前面我们讲到，Component 类是所有Ext 组件的父类，这个类也是ext 组件的核心类，
他定义了组件的基本属性、构造函数、生命周期处理流程及相关方法，组件公开属性、方法
及事件。因此，学习Ext 组件的功能及特性，需要从Component 这个类入手，下面我们来
重点看看这个类。
Component 类的的基本情况如下，该类位于Ext 命名究竟中，在Component.js 文件中定
义，该类的父类是Observable，使得组件具有事件通知及响应处理等特性，该类的子类包括
BoxComponent, Button, ColorPalette, DatePicker, Editor, BaseItem 等
2、Ext.Comtainer
容器，是指能容纳其它东西的物件。对于控件来说，也就是能容纳其它子元素的控件。
比如，表单里面即可以包含表单字段，也可以包含其它的文本、图片等元素；树里面包含树
节点；而窗口中可以放置表单、树及选项板等各种各样的部件。因此，表单、树、窗口等等
控件，都是容器组件。容器是用得最多的一种组件之一，因此Ext 专门定义了一个容器组件
类，在该类中包含了与容器相关的各种各样操作，包括如何管理(添加删除、查找)容器中的
子元素，容器的渲染模式等，大多数控件都是Container 的子类。
容器最重要的特性就是能放置其它元素，容器里面的元素可以是容器，也可以是其它非
容器组件；Ext 容器有一个布局属性，Ext 通过与容器关联的布局对象来处理容器中子元素
的排列及显示信息。
在应用程序中可以直接使用Container 类，一般更多的时候是使用他的子类，有两大类
型的容器，一个是代表整个浏览器窗口的Viewport，另外一种是面板Panel。面板panel 是
使用得非常多的容器，很多控件都是继承自Panel。
六、面板Ext.Panel
面板Panel简介
面板Panel 是ExtJS 控件的基础，很多高级控件都是在面板的基础上扩展的，还有其它
大多数控件也都直接或间接与它有关系。应用程序的界面一般情况下是由一个一个的面板通
过不同组织方式来形成。
面板由以下几个部分组成，一个顶部工具栏(tbar)、一个底部工具栏(bbar)、面板头部
(header)、面板尾部(bottom)、面板主区域(body)几个部分组成。面板类中还内置了面板展开、
关闭等功能，并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为，面板可
以放入其它任何容器中，面板本身是一个容器，他里面又可以包含各种其它组件。
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
12
面板的类名为Ext.Panel，其xtype 为panel，下面的代码可以显示出面板的各个组成部
分：
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"面板头部header",
width:300,
height:200,
html:'<h1>面板主区域</h1>',
tbar:[{text:'顶部工具栏topToolbar'}],
bbar:[{text:'底部工具栏bottomToolbar'}],
buttons:[{text:"按钮位于footer"}]
});
});
运行该代码，可以得到如图3-1 所示的输出结果，清楚的表示出了面板的各个组成部分。
图3-1 面板的各个组成部分
一般情况下，顶部工具栏或底部工具栏只需要一个，而面板中一般也很少直接包含按
钮，一般会把面板上的按钮直接放到工具栏上面。比如下面的代码：
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"hello",
width:300,
height:200,
html:'<h1>Hello,easyjf open source!</h1>',
tbar:[{pressed:true,text:'刷新'}]
});
});
面板Panel 主要有下面几个特点：
1、面板可以理解成应用程序中的一个界面块，这个块可以大，也可以小，这一个块包
含了特定的样式信息；
2、面板Panel 继承自Container 类，因此，面板是一个可视化容器组件；也是其它大多
数可视化控件如TabPanel、Window、TreePanel 的基类；
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
13
3、面板中即可包括其它元素组件，也可以包含特定html 代码片段，可以在程序中动态
更新面板中的内容；
4、面板由固定的5 个部分组成，除了body 部份以外，其它部分都不是必须的。
面板内容
面板的不同区域，可以放置不同的内容。在标题栏，除了用来显示标题以外，还可以用
来放置一些快捷操作图标。而面板的顶部及尾部工具栏则可以用来放置各种各样的工具对
象。面板的底部主要用来放置buttons 中指定的按钮。而面板的body 区域，也就是面板的主
区域。这个部分是则可以用来放置各种各样的内容。下面，我们重点对面板body 部分放置
的内容作介绍。
body 区域是一个面板中不可缺少的区域，我们大多数时候说面板中包含什么内容，其
实也是指body 区域中的内容。面板body 区域可以包括两种类型的内容：第一种是其它Ext
组件或控件元素，第二种是指定的html 代码片段。
如果要在面板中放置Ext 组件或控件元素，则可以通过面板的items 属性来指定，这个
属性的值可以是一个数组，表示面板中有很多子元素，也可以是一个对象，表示面板中只定
义一个子元素。当面板对象创建以后，可以通过面板容器的add、insert 来动态往面板中增
加子元素，用remove 方法来在面板动态删除子元素。
面板中的内容也可以是指定的html 片段，此时可以通过配置选项中html 属性来指定。
比如下面的代码：
Ext.onReady(function(){
var panel=new Ext.Panel({
title:"面板",
width:500,
height:300,
html:"<h1><font color='blue'>这是Ext的面板</font></h1>"
});
panel.render("test");
});
可以得到如下所示的效果：
当然，如果面板中的html 比较复杂，比如是说是一个动态页面的内容。此时可以通过
在配置选项中设置autoLoad 配置选项来指定自动加载指定url 中的内容作为面板中显示的内
容。比如下面的代码：
var panel=new Ext.Panel({
title:"面板",
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
14
width:500,
height:300,
autoLoad:{url:"index.html"}
});
也可以在对象初始化以后，动态更新面板中的html 内容，可以通过调用面板的load 方
法实现，load 方法中的参数与autoLoad 配置选项中所代表的一样，代码如下：
panel.load({
url:"index.ejf",
params:{name:"daxia",pwd:"123"},
scope: this,
discardUrl: false,
nocache: false,
text: "正在加载，请稍候...",
timeout: 30,
scripts: true
});
这时候直接通过面板的body 元素来实现面板的内容的更新。比如下面的代码：
panel.body.update("<h1><font color='blue'> 这是Ext 的面板
</font></h1>",true,function(){});
update 的第一个参数表示要更新的html 字符串，第二个参数表示是否执行字符串中的
脚本，第三个参数是指当内容已经更新完成后执行的回调函数。
面板与DOM节点DIV
面板与DIV 的关系，面板是一个抽象的界面块，面板当转换成页面的时候会变成一个
DIV 节点，这个DIV 含了具体的位置及信息。面板中的每一个部份都是一个DIV。当然，
面板并不是只能渲染到DIV 中，SPAN 也是可以的。还有其它的html 节点包括a、h1 之类
的标签也是允许的，但我们一段不会把他渲染到那些包含特定内容的节点上。看下面把面板
渲染到链接标签a 中的例子：
<div id="test" ><a id="c" href="kdfjdsfk" >dfkdsf</a></div>
可以在面板渲染以后，通过面板的元素对应的DOM 节点来查看整个面板的HTML 代
码信息。代码如下：
alert(panel.el.dom.innerHTML);
alert(panel.el.dom.outerHTML);
alert(document.body.innerHTML);
通过renderTo 可以把面板渲染到指定的DIV 节点，而通过applyTo 可以把面板应用于
指定的DIV 节点，另外我们这时可以通过contentEl 配置选项来把页面中的某一个DIV 的内
容作为面板的内容。
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
15
关于renderTo、applyTo 及contentEl 的用法及区别，请看下面的代码：
<script>
Ext.onReady(function(){
var panel=new Ext.Panel({
title:"面板",
width:500,
height:300,
renderTo:"c",
contentEl:"tt"
});
//panel.render("test");
alert(document.body.innerHTML);
});
</script>
</head>
<body>
<div id="tt">kdjskdfjsdkfjdskl</div>
<div id="test" ><div id="c"></div></div>
</body>
</html>
七、ViewPort
首先我们来看Viewport 控件，这是一个用来代表整个浏览器的应用程序主界面控件。
VeiwPort 表示整个浏览器显示区域，该对象渲染到页面的body 区域，并会随着浏览器显示
区域的大小自动改变，一个页面中只能有一个ViewPort 实例。看下面的代码：
Ext.onReady(function(){
new Ext.Viewport({
layout:"fit",
items:[{title:"面板",
html:"",
bbar:[{text:"按钮1"},
{text:"按钮2"}]
}]
});
});
运行上面的代码会得到如图3-7 所示的输出结果。
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
16
图3-7 VeiwPort 输出结果
Viewport 不需要再指定renderTo，而我们也看到Viewport 确实填充了整个浏览器显示
区域，并会随着浏览器显示区域大小的改变而改改。他有两个特点：
1、创建即可使用。不需要渲染，当组件在创建时会自动渲染到document.body 节点。
2、不能使用程序改变该控件的大小，也没有滚动条。
2、只是作为容器组件，没有额外的属性、方法及事件
下面再来看看Viewport 的应用场景：
Viewport 主要用于应用程序的主界面，可以通过使用不同的布局来搭建出不同风格的应
用程序主界面。在Viewport 上常用的布局有fit、border 等，当然在需要的时候其它布局也
可以使用。看下面的代码：
Ext.onReady(function(){
new Ext.Viewport({
enableTabScroll:true,
layout:"border",
items:[{title:"面板",
region:"north",
height:50,
html:"<h1>网站后台管理系统!</h1>"
},
{title:"菜单",
region:"west",
width:200,
collapsible:true,
html:"菜单栏"
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
17
},
{x
type:"tabpanel",
region:"center",
items:[{title:"面板1"},
{title:"面板2"}]
}]
});
});
运行上面的程序会得如图3-8 所示的效果。
图3-8 Viewport 布局风格
八、窗口Window
下面我们来讲窗口Window 控件，他可以用来表示应用程序中的一个窗口，在窗口中可
以放置种种界面元素。窗口Ext.Window 的父类是Ext.Panel，因此窗口其实是一种特殊的面
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
18
板Panel。窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性。下面的图中就包括
了三个窗口：
由于窗口是总是顶级容器，因此一般情况下我都是直接使用new 操作符来创建一个
Ext.Window 对象来使用窗口。窗口中的内容与面板一样，可以是各种各样的Ext 组件或控
件元素，也可以是html 片段或指定url 中的html 内容。由于窗口是一种特殊的面板，因此
面板的能用特性对窗口仍然适用。相对于面板Ext.Panel 来说，他不需要指定渲染目标，也
就是不需要指定渲染到页面中的某一个节点。当调用窗口的show 方法的时候，他会自动把
窗口渲染(render)到当前文档的body 节点中，并使该面板浮动在页面中，使得窗口不依赖于
其它的父容器而存在。看下面的代码：
Ext.onReady(function(){
var win=new Ext.Window({
title:"窗口",
width:500,
height:300,
contentEl:"test"
});
win.show();
});
下面来看看窗口的隐藏及关闭。在程序中我们可以直接调用窗口对象的相关方法来实现
窗口的隐藏及关闭操作。其中hide()方法用来隐藏窗口，而close()方法则用来直接关闭并销
毁窗口。如果程序窗口在后面的程序中不需要重新显示，则应该使用hide()方法，这样可以
节省再次初始化这个窗口所产生的资源消耗；如果窗口在后面的程序中不需要重新显示，则
应该调用close()来关闭窗口，从而释放窗口对象所占用的系统资源。
默认情况下，窗口的标题工具栏中会包括一个关闭按钮，点击该按钮会执行窗口的关闭
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
19
或隐藏操作。
窗口可以分为模态窗口及非模态窗口两种类型，所谓模态窗口就是指当该窗口打开时，
除了本窗口中的内容可以操作以外，窗口以外的控件、界面元素及内容都处于不可用状态，
只有当关闭该窗口后，这些变成不可用状态的元素及内容才能恢复成为可用状态；而非模态
窗口打开时，不影响窗口以外的其它元素的可操作及可用状态。
在配置选项中通过modal 选项来指定窗口是否属于模式窗口。默认情况下的窗口都是非
模态窗口，当把modal 属性设置为true 时，窗口就会变成一个模态窗口。
窗口的应用场景是比较广泛的，在传统的页面中，我们经常需要使用window.open 来打
开一个浏览器窗口来进行相关的交互操作，使用Ext 框架，在需要使用window.open 的地方
就可以改成使用Ext 的窗口控件，从而让用户可以得到非常漂亮的窗口操作界面。
下面我们来看看窗口的组成部分及内容，由于窗口的父类是面板Panel，也就是说上一
讲中讲到的面板的特性仍然适用于窗口。窗口同样是由个顶部工具栏(tbar)、一个底部工具
栏(bbar)、面板头部(header)、面板尾部(bottom)、面板主区域(body)等五个部分组成，各个部
份的内容及管理方式与面板中的完全一样。
与面板不同的是，窗口默认多了一个菜单栏的工具图标close，用来关闭窗口，还可以
通过配置选项来指定是否自动出现最大化及最小化图标，并且窗口是渲染成浮动层的形式显
示在页面中。
窗口中的内容即可以是Ext 组件或控件元素，也可以是html 片段或指定url 中的内容。
可以通过配置选项中使用items 来定义窗口的子元素，也可通过html 或autoLoad 配置选项
来定义窗口的内容。在程序运行过程中，可以使用容器类中提供的add、insert、remove 及
findById 等方法来管理或查找窗口中的元素，同样可以通过load()、el.update()等方法来动态
更新窗口中的内容。
九、对话框
接下来，我们来看看Ext 中提供的对话框功能。所谓对话框，就是在程序执行的过程，
出现在用户界面中的一个需要用户进行确认、选择或录入相关信息的微型窗口。
在传统的html 页面中，浏览器提供了三种默认的对话框函数。也就是alert、confirm 及
prompt 等。其中alert 用来弹出一个提示信息，并让用户确认，而confirm 是让用户进行某
一种操作的选择，prompt 则是用来弹出一个信息录入对话框。下面是浏览器对话框的使用
示例：
<script>
function alertDialog(){
alert("这是浏览器定义的信息提示框");
}
function confirmDialog(){
var ret=confirm("是否要删除该记录?");
alert("选择结果:"+(ret?"是":"否"));
}
function inputDialog(){
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
20
var ret=prompt("请输入你的姓名:","");
alert("你输入的是:"+ret);
}
</script>
</head>
<body>
<input type="button" onClick="alertDialog();" value="信息提示框" />
<input type="button" onClick="confirmDialog();" value="选择对话框"/>
<input type="button" onClick="inputDialog();" value="录入对话框"/>
</body>
在IE 中的效果如下图所示：
由于传统使用alert、confirm 等方法产生的对话框非常古板，对话框的很多部份内容都
已经固定，很难增加自定义的内容，并且UI 很不好看。因此，ExtJS 提供了一套非常漂亮
的对话框，可以使用这些对话框代替传统的alert、confirm 等，实现华丽的应用程序界面。
Ext 的对话框都封装在Ext.MessageBox 类，该类还有一个简写形式即Ext.Msg，可以直
接通过Ext.MessageBox 或Ext.Msg 类直接调用相应的对话框方法来显示漂亮的Ext 对话框。
使用Ext 的对话框功能，上面例子中的三个方法可以改写成如何的形式：
function alertDialog(){
Ext.MessageBox.alert("友情提示","这是浏览器定义的信息提示框");
}
function confirmDialog(){
var ret=Ext.Msg.confirm("删除确认","是否真的要删除该记录?",function(btuuon){
alert("选择结果:"+(btuuon=="yes"?"是":"否"));
});
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
21
}
function inputDialog(){
Ext.MessageBox.prompt("姓名输入","请输入你的姓名:",function(button,text){
if(button=="ok"){
alert("你输入的是:"+text);
}
else alert("你放弃了录入!");
});
}
程序运行的效果如下图所示：
Ext 提供的这些显示普通对话框的方法一般包括四个参数，比如confirm 的方法签名为
confirm ( String title, String msg, [Function fn], [Object scope] ) ，参数title 表示对话框的标题，
参数msg 表示对话框中的提示信息，这两个参数是必须的；可选的参数fn 表示当关闭对话
框后执行的回调函数，参数scope 表示回调函数执行的作用域。回调函数可以包含两个参数，
即button 与text,button 表示被点击的按钮，text 表示对话框中(比如prompt)有输入选项时用
户输入的内容。我们可以在回调函数中通过button 参数来判断用户作了什么选择，可以通
过text 来读取在对话框中输入的内容。
Ext 对话框的特定主要有两个方面。首先，Ext 的对话框是包含特定内容的Ext 窗口控
件，由于Ext 的窗口本质上是页面中的DIV 标签，因此，Ext 对话框中的内容支持各种HTML
元素；其次，与浏览对话框可以直接使用赋值语句得到对话框的用户选项及输入内容不同，
Ext 对话框只能通过回调函数来处理用户的选项及输入的内容。回调函数中对话框显示的时
候作为参数传递给相应的对话框显示方法；要注意的一点是，浏览器对话框只有在对话框关
闭后才会执行后面的javascript 语句，而Ext 对话框在显示后会立即执行其后面的语句，而
不管对话框是否关闭。
下面使用Ext 对话框的方式是不对的：
function inputDialog(){
var ret=Ext.MessageBox.prompt("姓名输入","请输入你的姓名:");
alert("你输入的内容是："+ret);
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
22
}
除了alert、confirm、prompt 等代替传统浏览器相应的对话框以外，Ext 还提供了progress、
wait 等实用对话框，另外我们可以根据需要显示自定义的对话框。
MessageBox 对象的wait 方法用来在页面中显示一个信息等待框，当一个wait 信息框显
示以后，在应用程序执行了一系列处理操作完成后需要，需要通过调用MessageBox 对象的
hide()方法来隐藏当前对话框。下面是显示wait 对话框的示例代码：
function wait(){
var msgbox=Ext.Msg.wait("请稍候","正在保存数据， 请稍候。。。。。。");//显示等待对
话框
//执行大数据的处理或网络请求等操作
msgbox.hide.defer(5000,msgbox);//隐藏对话框
}
<input type="button" onClick="wait();" value="等待对话框"/>
下面再来看看带有滚动条的对话框使用，示例代码如下：
var t=0;
function progress(){
t=0;
var msgbox=Ext.Msg.progress("请稍候","保存数据","正在保存数据， 请稍候。。。。。。
");//显示等待对话框
//执行大数据的处理或网络请求等操作
updateProgress();
}
function updateProgress(){
t+=0.1;
Ext.Msg.updateProgress(t);
if(t>1)Ext.Msg.hide();
else updateProgress.defer(1000);
}
<input type="button" onClick="progress();" value="滚动条对话框"/>
如下图所示：
在实际应用中，可以直接使用MessageBox 的show 方法来显示自定义的对话框，如下
面的代码：
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
23
function doSave(button,text){
if(button=="yes")
{
//执行数据保存操作
}
else if(button=="no")
{
//不保存数据
}
else
{
//取消当前操作
}
}
function save(){
Ext.Msg.show({
title:'保存数据',
msg: '你已经作了一些数据操作，是否要保存当前内容的修改？',
buttons: Ext.Msg.YESNOCANCEL,
fn: doSave,
icon: Ext.MessageBox.QUESTION
});
}
<input type="button" onClick="save();" value="保存"/>
点击“保存”按钮可显示一个自定义的“保存数据”对话框，对话框中包含yes、no、cancel
三个按钮，可以在回调函数save 中根据点击的按钮执行相应的操作，如图4-6 所示。
十、TabPanel
前面我们学习了Viewport、Window 及对话框的使用。下面我们再来看另外一种比较常
用的界面控件，也就是选项板。选项面板是一个包括一个或多个选项卡(Tab)，同一时刻只
显示一个选项卡的这种用户界面。比如下图的IE 选项设置界面中，就是一个选项板的应用，
选项板上有“常规”、“安全”、“隐私”等选项卡。
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
24
Ext中提供了选项板控件TabPanel，由类Ext.TabPanel来定义，该类直接继承自Ext.Panel，
因此他实际上也是一个包含特定特性的面板。看下面的代码：
Ext.onReady(function(){
var tab=new Ext.TabPanel({
renderTo:"test",
width:500,
height:200,
enableTabScroll:true,
activeTab:0,
items:[{title:"面板1",
html:"<h1>this is the first panel!</h1>"},
{closable : true,
title:"面板2",
html:"<h1>this is the second panel!</h1>"},
{closable : true,
title:"面板3",
html:"<h1>this is the third panel!</h1>"}
]
});
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
25
});
上面的代码定义了一个简单的选项面板，该面板中包含三个tab，初始化时显示第一个
tab 内容，如图3-5 所示：
图3-5 简单的选项面板
P7:
与Panel 一样，选项板同样是由一个顶部工具栏(tbar)、一个底部工具栏(bbar)、面板头
部(header)、面板尾部(bottom)、面板主区域(body)等五个部分组成。除了面板主区域(body)
部分以外，其它部份的特性与Panel 完全一样。选项板body 区域中的内容只能是选项卡Tab
元素，不能是其它类型的控件。当前可以用来作为选项卡元素只能是Panel 类型控件的对象，
包括Panel 的子类，比如Ext.Panel、Ext.form.FormPanel、Ext,TabPanel、Ext.grid.GridPanel、
Ext.tree.TreePanel 等控件都可以用来作为选项板中的选项卡Tab。换一句话说，Ext 并没有针
对选项面板中的Tab 专门定义一个新的类，每一个tab 其实也就是普通的Panel 而已。同一
时刻，选项板中只能有一个选项卡Tab 处于激活状态，可以在配置选项中使用activeTab 项
来指定默认激活的Tab，也可以在程序中使用setActiveTab ()方法来把指定的Tab 变成当前
活动Tab。
当然，也可以直接把html 页面中符合特殊条件的DIV 标签转换成选项板中的选项，此
时需要在TabPanel 的配置选项中把autoTabs 项设置为true，把deferredRender 项设置为false，
然后通过applyTo 项指定把页面中包含class="x-tab"这种样式的子节点的DOM 节点应用于
选项板。看下面的例子：
Ext.onReady(function(){
var tabs = new Ext.TabPanel({
applyTo: 'test',
activeTab: 0,
deferredRender: false,
autoTabs: true
});
});
<div id="test">
<div class="x-tab" title="选项1">A simple tab</div>
<div class="x-tab" title="选项2">Another one</div>
<div title="选项3">dsfdsfd<div class="x-tab" title="选项4">Another one</div></div>
</div>
得到的效果如下图示：
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
26
由于“选项3”这个DIV 标签的class 不是x-tab 所以不会转换成选项卡Tab，而“选项
4”这个DIV 虽然与“选项1”这些节点不在同一个层次，但仍然会把他作为Tab 项来同等
处理。
选项板TabPanel 中的选项Tab 项可以在初始化的时候通过items 时候指定，也可以在
TabPanel 对象创建以后，使用add()、insert()或remove 等来动态添加或删除其中的选项卡Tab。
为了演示对面板中tab 的操作，我们可以给上面的程序简单的添加一个工具栏按钮，当点击
按钮的时候在选项面板中动态添加tab。代码如下：
Ext.onReady(function(){
var i=0;
var tab=new Ext.TabPanel({
renderTo:"test",
width:500,
height:200,
enableTabScroll:true,
activeTab:0,
bbar:[{text:"添加",handler:function(){
tab.add({title:"新面板"+i++,closable : true});
}}
],
items:[{title:"面板1",
html:"<h1>this is the first panel!</h1>"},
{closable : true,
title:"面板2",
html:"<h1>this is the second panel!</h1>"},
{closable : true,
title:"面板3",
html:"<h1>this is the third panel!</h1>"}
]
});
});
重新运行该程序，点击选项面板下面的“添加”按钮，每点一次我们会看到在面板中
添加了一个新的Tab。当tab 的个数很多时，还会出现左右滚动条，如图3-6 所示。
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
27
图3-6 动态添加Tab 的选项面板
添加按钮的事件响应函数内容如下：
tab.add({title:"新面板"+i++,closable : true});
我们直接调用选项面板的add 方法，就可以把一个面板添加到选项板中，成为一个新的
tab。closeable 表示该面板可以关闭，因此在tab 上会出现一个关闭tab 的图标，点击该图
标可以关闭该面板。
可以使用迭代功能，实现批量关闭选项板TabPanel 中的所有Tab，比如，可以在上面的
bbar 中，添加一个按钮来实现关闭所有打开的Tab，该按钮的定义代码如下：
{text:"关闭所有面板",handler:function(){
tab.items.each(function(p){
if(p.closable)tab.remove(p);
});
}}
十一、布局
首先来看看布局的基本概念及使用，所谓布局就是指容器组件中子元素的分布、排列组
合方式。Ext 的所有容器组件都支持布局操作，每一个容器都会有一个对应的布局，布局负
责管理容器组件中子元素的排列、组合及渲染方式等。
Ext2.0 的一个重大改动，就是提供了一套功能强大的布局系统，通过这些布局的应用，
可以满足应用程序中各种复杂的用户界面布局处理，下面我们将对ExtJS 中的布局作介绍。
Ext 中的每一个布局类都有一个简短的布局名称，在使用布局的时候直接使用布局名称即可。
布局主要应用于容器组件，在Container 类中，提供了一个layout 配置选项，该项可以
是一个预定义布局名称（字符串），也可以是一个布局对象。比如下面是两种使用布局的方
式：
new Ext.Panel({
renderTo:"test",
width:400,
height:100,
layout:new Ext.layout.ColumnLayout(),
items:[{columnWidth:.5, title:"面板1"},
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
28
{columnWidth:.5, title:"面板2"}]
});
new Ext.Panel({
renderTo:"test",
width:400,
height:100,
layout:"column",
items:[{columnWidth:.5, title:"面板1"},
{columnWidth:.5, title:"面板2"}]
});
ExtJS 的布局基类为Ext.layout.ContainerLayout，其它布局都是继承该类。ExtJS 的容器
组件包含一个layout 及layoutConfig 配置属性，这两个属性用来指定容器使用的布局及布局
的详细配置信息。如果没有指定容器组件的layout 则默认会使用ContainerLayout 作为布局，
该布局只是简单的把元素放到容器中，有的布局需要layoutConfig 配置，有的则不需要
layoutConfig 配置。
上面的代码我们创建了一个面板Panel，Panle 是一个容器组件，我们使用layout 指定该
面板使用Column 布局。该面板的子元素是两个面板，这两个面板都包含了一个与列布局相
关的配置参数属性columnWidth，他们的值都是0.5，也就是每一个面板占一半的宽度。
如果不使用布局，代码如下：
new Ext.Panel({
renderTo:"test",
width:400,
height:100,
items:[{columnWidth:.5,
title:"面板1"},
{columnWidth:.5,
title:"面板2"}]
});
程序运行的效果如下：
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
29
在使用布局的时候，可以通过layutConfig 属性来指定布局的相关配置信息，比如默认
的布局有一个renderHidden 属性，如果该属性值为true，则在执行布局相关操作时，会把其
子元素都渲染成隐藏状态。比如下面的代码：
new Ext.Panel({
renderTo:"test",
width:400,
height:100,
layout:"column",
layoutConfig:{renderHidden:true},
items:[{columnWidth:.5, title:"面板1"},
{columnWidth:.5, title:"面板2"}]
});
这样在执行布局操作的时候，就不会显示容器中的子元素，如下图所示：
Ext 中的一些容器组件都已经指定所使用的布局，比如TabPanel 使用card 布局、
FormPanel 使用form 布局，GridPanel 中的表格使用column 布局等，我们在使用这些组件的
时候，不能给这些容器组件再指定另外的布局。
ExtJS2.0 一共包含十种布局，常用的布局有border、column、fit、form、card、tabel 等
布局，十种布局的类结构如图5-2 所示，下面我们分别对这几种布局作简单的介绍。
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
30
图5-2 Ext 2.0 中的十种布局
十二、表格Grid
ExtJS 中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、
列汇总、单元格编辑等实用功能。表格由类Ext.grid.GridPanel 定义，继承自Panel，其xtype
为grid。ExtJS 中，表格Grid 必须包含列定义信息，并指定表格的数据存储器Store。表格
的列信息由类Ext.grid.ColumnModel 定义、而表格的数据存储器由Ext.data.Store 定义，数据
存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore 等。
我们首先来看最简单的使用表格的代码：
Ext.onReady(function(){
var data=[ [1, 'EasyJWeb', 'EasyJF','www.easyjf.com'],
[2, 'jfox', 'huihoo','www.huihoo.org'],
[3, 'jdon', 'jdon','www.jdon.com'],
[4, 'springside',
'springside','www.springside.org.cn'] ];
var store=new
Ext.data.SimpleStore({data:data,fields:["id","name","organization
","homepage"]});
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中国Java 开源产品及团队",
height:150,
width:600,
columns:[{header:"项目名称",dataIndex:"name"},
{header:"开发团队",dataIndex:"organization"},
{header:"网址",dataIndex:"homepage"}],
store:store,
autoExpandColumn:2
});
});
执行上面的代码，可以得到一个简单的表格，如图6-1 所示。
图6-1 一个简单的表格
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
31
十三、TreePanel
树控件由Ext.tree.TreePanel 类定义，控件的名称为treepanel，TreePanel 类继承自Panel
面板。在ExtJS 中使用树控件其实非常简单，我们先来看下面的代码：
Ext.onReady(function(){
var root=new Ext.tree.TreeNode({
id:"root",
text:"树的根"});
root.appendChild(new Ext.tree.TreeNode({
id:"c1",
text:"子节点"
}));
var tree=new Ext.tree.TreePanel({
renderTo:"hello",
root:root,
width:100
});
});
代码的第一句使用new Ext.tree.TreeNode 类来创建一个树节点，第二句使用树节点root
的appendChild 方法来往该节点中加入一个子节点，最后直接使用new Ext.tree.TreePanel 来
创建一个树面板，在树面板的初始化参数中指定树的root 属性值为前面创建的root 节点，
也就是树根节点。上面的程序执行效果如图8-1 所示。
图8-1 树
当然，在很多时候，树的节点是动态产生的，也就是需要从服务器端的一个url 中获得
树的节点信息。ExtJS 的树控件提供了对这种功能的支持，你只需要在创建树控件的时候，
通过给树指定一个节点加载器，就可以从服务器端动态加载树的节点信息。我们来看下面的
代码：
var root=new Ext.tree.AsyncTreeNode({
id:"root",
text:"树的根"});
var tree=new Ext.tree.TreePanel({
renderTo:"hello",
root:root,
loader: new Ext.tree.TreeLoader({url:"treedata.js"}),
width:100
});
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
32
treedata.js这个url返回的内容如下：
[{
id: 1,
text: '子节点1',
leaf: true
},{
id: 2,
text: '儿子节点2',
children: [{
id: 3,
text: '孙子节点',
leaf: true
}]
}]
执行上面的程序，可以得到一棵异步加载子节点的树，点击“根节点”会到服务器端加
载子节点，如图8-2 所示。
图8-2 异步加载子节点的树
当然上面的程序是一次性加载完了树的所有节点信息，我们也可以实现让每一个节点都
支持动态加载的树，只需要在通过服务器请求数据的时候，每次服务器端返回的数据只包含
子节点，而不用把孙子节点也返回即可。比如把上面treedata.js 中的内容改为下面的内容：
[{
id: 1,
text: '子节点',
leaf: false
}]
也就是节点树中只包含一个子节点，而该子节点通过指定leaf 值为false (默认情况该值
为false)，表示该节点不是一个叶子节点，其下面还有子节点。再执行前面的程序，不断点
击“子节点”可以得到如图8-3 所示的效果。
图8-3 无限节点的树
当然这是一个无限循环的树，在实际应用中我们服务器端返回的数据是程序动态产生
的，因此不可能每一次都产生leaf 为false 的节点，如果是叶子节点的时候，则需要把返回
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
33
的JOSN 对象中的leaf 设置为true。如下所示：
[{
id: 1,
text: '子节点',
leaf:true
}]
十四、表单Form
对于传统的b/s 应用来说，数据录入元素是放在表单<form>标签里面的。而对于ExtJS
应用来说，则可以直接使用FormPanel 控件来存放表单中的元素。FormPanel 继承自Panel，
在Panel 的基础上提供与表单相关的各种特性，比如可以指定表单提交的url、指定表单提
交方式、是否是二进制提交等；另外FormPanel 固定使用form 布局，前面关于布局一节中
的内容我们说过，form 布局也就是专门用于组织包含输入元素的布局。看下面的代码：
Ext.onReady(function(){
var form=new Ext.form.FormPanel({
renderTo:"hello",
title:"用户信息录入框",
height:200,
width:300,
labelWidth:60,
labelAlign:"right",
frame:true,
defaults:{xtype:"textfield",width:180},
items:[
{name:"username",fieldLabel:"姓名"},
{name:"password",fieldLabel:"密码",inputType:"password"},
{name:"email",fieldLabel:"电子邮件"},
{xtype:"textarea",name:"intro",fieldLabel:"简介"}
],
buttons:[{text:"提交"},{text:"取消"}]
})
});
在上面的代码中，使用new Ext.form.FormPanel 来创建表单面板，通过labelWidth 来指
定表单中字段标签的宽度，labelAlign 来指定字段标签的对齐方式，在defaults 中指定该容
器中所有子元素默认类型都是textfield，也就是录入文本框。在items 定义的子元素中，一
共包含三个textfield 元素以及一个textarea 元素，这些元素都包含一个name 属性，相当于
传统<input>标签中的name 属性，fieldLabel 属性用来指定字段标签。通过执行上面的代码，
可以得到一个表单信息录入框，如图9-1 所示。
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
34
图9-1 表单信息录入框
表单面板FormPanel 包含一个form 属性，该属性是一个Ext.form.BasicForm 类型的对
象，可以直接访问，也可以通过getForm()方法得到。BasicForm 表示基本的表单，包含了
submit、load、reset 等方法，用来取代传统表单<form>中的submit、reset 等方法，通过调用
这些方法可以实现提交表单、表单信息重置等操作。下面的代码实现了表单的提交操作：
Ext.onReady(function(){
var f=new Ext.form.FormPanel({
renderTo:"hello",
title:"用户信息录入框",
url:"person.ejf",
height:200,
width:300,
labelWidth:60,
labelAlign:"right",
frame:true,
defaults:{xtype:"textfield",width:180},
items:[
{name:"username",fieldLabel:"姓名"},
{name:"password",fieldLabel:"密码",inputType:"password"},
{name:"email",fieldLabel:"电子邮件"},
{xtype:"textarea",name:"intro",fieldLabel:"简介"}
],
buttons:[{text:"提交",
handler:function(){
f.form.submit({
waitTitle:"请稍候",
waitMsg:"正在提交表单数据， 请稍候。。。。。。"
});
}},{text:"重置",
handler:function(){
f.form.reset();
}}
]
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
35
})
});
在上面的代码中，当用户点击“提交”按钮的时候，f.form.submit({..})这一句代码用来
提交表单，由于默认情况下ExtJS 的表单都是使用Ajax 的方式提交，因此在提交的过程中
可以通过waitMsg 来指定提交的时候在页面上显示一个等待对话框；当点击“重置”按钮的
时候，可以重置表单中的各项数据，如图9-2 所示。
图9-2 提交等待对话框
十五、理解Html DOM、Ext Element 及
Component
要学习及应用好Ext 框架，需要理解Html DOM、Ext Element 及Component 三者的区
别。
Ext 是基于Web 的富客户端框架，其完全是基于标准W3C 技术构建设的，使用到的都
是HTML、CSS、DIV 等相关技术。Ext 最杰出之处，是开发了一系列非常简单易用的控件
及组件，我们只需要使用这些组件就能实现各种丰富多彩的UI 的开发。
无论组件有多少配置属性、还是事件、方法等等，其最终都会转化为HTML 在浏览器
上显示出来，而每一个HTML 页面都有一个层次分明的DOM 树模型，浏览器中的所有内
容都有相应的DOM 对象，动态改变页面的内容，正是通过使用脚本语言来操作DOM 对象
实现。
仅仅有DOM 是不够的，比如要把页面中的某一个节点移到其它位置，要给某一个节点
添加阴影效果，要隐藏或显示某一个节点等，我们都需要通过几句javascript 才能完成。因
此，Ext 在DOM 的基础上，创建了Ext Element，可以使用Element 来包装任何DOM，Element
对象中添加了一系列快捷、简便的实用方法。
对于终端用户来说，仅仅有Element 是不够的，比如用户要显示一个表格、要显示一棵
树、要显示一个弹出窗口等。因此，除了Element 以外，Ext 还建立了一系列的客户端界面
组件Component，我们在编程时，只要使用这些组件Componet 即可实现相关数据展示及交
互等，而Component 是较高层次的抽象，每一个组件在渲染render 的时候，都会依次通过
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
36
Element、DOM 来生成最终的页面效果。
在使用Ext 开发的应用程序中，组件Component 是最高层次的抽象，是直接给用户使
用的，Ext Element 是Ext 的底层API，主要是由Ext 或自定义组件调用的，而DOM 是W3C
标准定义的原始API，Ext 的Element 通过操作DOM 来实现页面的效果显示。
在Ext 中，组件渲染以后可以通过访问组件的el 属性来得到组件对应的Element，通过
访问Element 的dom 属性可以得到其下面的DOM 对象。另外，我们可以通过通过Ext 类的
快捷方法getCmp、get、getDom 等方法来得组件Component、Ext 元素Element 及DOM 节
点。比如：
var view=new Ext.Viewport();//创建了一个组件Component
view.el.setOpacity(.5);//调用Element 的setOpacity 方法
view.el.dom.innerHTML="Hello Ext";//通过Element 的dom 属性操作DOM 对象
再看下面的代码：
var win=new Ext.Window({id:"win1",title:"我的窗口
",width:200,height:200});
win.show();
var c=Ext.getCmp("win1");//得到组件win
var e=Ext.get("win1");//根据id得到组件win相应的Element
var dom=Ext.getDom("win1");//得到id为win1的DOM节点
十六、Ext类中的get方法简介
Ext 中包含了几个以get 开头的方法，这些方法可以用来得到文档中DOM、得到当前文
档中的组件、得到Ext 元素等，在使用中要注意区别使用。
1、get方法
get 方法用来得到一个Ext 元素，也就是类型为Ext.Element 的对象，Ext.Element 类是Ext
对DOM 的封装，代表DOM 的元素，可以为每一个DOM 创建一个对应的Element 对象，
可以通过Element 对象上的方法来实现对DOM 指定的操作，比如用hide 方法可以隐藏元素、
initDD 方法可以让指定的DOM 具有拖放特性等。get 方法其实是Ext.Element.get 的简写形
式。
get 方法中只有一个参数，这个参数是混合参数，可以是DOM 节点的id、也可以是一
个Element、或者是一个DOM 节点对象等。看下面的示例代码：
Ext.onReady(function(){
var e=new Ext.Element("hello");
alert(Ext.get("hello"));
alert(Ext.get(document.getElementById("hello")));
alert(Ext.get(e));
});
Html 页面中包含一个id 为hello 的div，代码如下：
<div id="hello">tttt</div>
Ext.get("hello")、Ext.get(document.getElementById("hello"))、Ext.get(e)等三个方法都可
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
37
以得到一个与DOM 节点hello 对应的Ext 元素。
2、getCmp方法－获得Ext组件。
getCmp 方法用来获得一个Ext 组件，也就是一个已经在页面中初始化了的Component
或其子类的对象，getCmp 方法其实是Ext.ComponentMgr.get 方法的简写形式。getCmp 方法
中只有一个参数，也就是组件的id。比如下面的代码：
Ext.onReady(function(){
var h=new Ext.Panel({
id:"h2",
title:" ",
renderTo:"hello",
width:300,
height:200});
Ext.getCmp("h2").setTitle("新的标题");
});
在代码中，我们使用Ext.getCmp("h2").来得到id 为h2 的组件，并调用其setTitle 方法来
设置该面板的标题。
3、getDom方法－获得DOM节点
getDom 方法能够得到文档中的DOM 节点，该方法中包含一个参数，该参数可以是DOM
节点的id、DOM 节点对象或DOM 节点对应的Ext 元素(Element)等。比如下面的代码：
Ext.onReady(function(){
var e=new Ext.Element("hello");
Ext.getDom("hello");
Ext.getDom(e);
Ext.getDom(e.dom);
});
Html：
<div id="hello">tttt</div>
在上面的代码中，Ext.getDom("hello")、Ext.getDom(e)、Ext.getDom(e.dom)等三个语句
返回都是同一个DOM 节点对象。
4、getBody方法－得到文档的body节点元素(Element)。
该方法直接得到文档中与document.body 这个DOM 节点对应的ExtJS 元素（Element），
实质就是把document.body 对象封装成ExtJS 元素对象返回，该方法不带任何参数。比如下
面的代码把面板h 直接渲染到文档的body 元素中。
Ext.onReady(function(){
var h=new Ext.Panel({title:"测试",width:300,height:200});
h.render(Ext.getBody());
});
5、getDoc方法－获得与document对应的Ext元素(Element)
getDoc 方法实质上就是把当前html 文档对象，也就是把document 对象封装成ExtJS 的
Element 对象返回，该方法不带任何参数。
Ext 技术咨询及培训JavaScript 面向对象编程技术(参考资料)
主办单位：成都蓝源信息技术有限公司网址:www.lanyotech.com 联系电话：028- 86272612
38
十七、如何学习及掌握Ext
对于学习一门新技术来说，学习方法是非常关键的，在这里我来给大家分享一下“如何
学习及掌握Ext”，其实也是我的一些学习及应用心得，希望对大家有所帮助。
首先，来谈一谈基本内功心法。我们知道学武功，内功非常重要，天龙八部里面神仙姐
姐精通各门各派的武功与招式，但自己却使不出来，最主要的原因就是缺少内功，对吧？Ext
是一个应用层的Ajax 框架，要用好他，内功的修练非常重要。如果内功修不好，你就能只
变成一个神仙姐姐，在工作中只能扮演一个辅助性的角色，程序员不写程序这是非常遗憾的。
Ext 的内功心法有哪些呢？其实也就是与Ajax 相关的W3C 技术，按重要程度排列，依次是
javascript 及面向对象、超文本协议html、文档对象模型DOM、样式CSS、XML、JSON、
Ajax 等等。
接着，我来谈谈捷径，学习任何东西都得有捷劲，你看看小杨过的武功为什么提升得那
么快主？这是有窍门的，其中一项就是借助小龙女提供的寒冰床。寒冰床的效果就是让你睡
觉也在练武，而且据说一天抵别人数月。在我看来，Ext 的入门捷径就是要看一些国内Ext
先驱们推出的系统教学资料。比如冷雨他们的《ExtJS 实用开发指南》、土豆他们的掏钱学ext
系列、丫梨以及vifir 提供的一些相关视频，通过这些资料其实是可以快速就能上手的，而
且可以起到立杆见影的效果。这些资料编得都非常不错，关键在于我们得细心去逐嚰。就拿
《ExtJS 实用开指南》来说，这是非常适合ExtJS 快速入门的，300 多页，看快一点，一两
天就可以翻遍了，而且保证能够入门。另外他里面对API 的讲解比较细，这个API 就是在
应用开发过程中在需要随时翻出来研究。当然，如果你内功深厚，那么我说的入门捷径对你
可能就没那么立杆见影了，英语好一点，直接看官方的示例及文档也能会。
很多人入门过后，还是觉得自己不会写Ext 应用，特别是实际的应用。不知道如何跟后
台以及传统的技术结合起来，这时就表示你需要进一步提高了。关于提高我推荐大家通过
“Wlr 单用户Blog 系统及技术开发文档”来，这个应用是一个综合的Ext 应用，包含了前
后台，包括了很多Ext 常用控件的应用，组件的扩展等，最主要的还是有相应的后台。这个
程序的源代码大家可以直接通过vifir.com 或者其它下载站点下载，分别有Java 的、.Net、PHP
等几个版本。另外还有详细的开发文档，当然这个文档是要收费的，这个应该理解，毕竟别
人写这个文档也不容易。
最后是深入，也就是能达到对Ext 掌握得游刃有余，能解决各种Ext 疑难杂症，能在Ext
的基础上扩展出更加适合自己的控件。这就需要深入分析Ext 项目的源码，并编大量的使用
Ext，在运用中多编写各种自定义的控件来达到了。深入之路是需要一个过程的，需要时间
的，我当前也走在这个路上，欢迎大家一起来研究。