ExtJS快速入门学习指南

前言：个人理解ExtJS其实 是一个Ajax 框架，是一个用javascript 写的。与EasyUI差不多的一个框架。学习并不难，先找好一定的学习资料与文档，然后再练习几个demo，这样大概就有所了解了。具体精通，那只有等你自己在项目中多实践。

染Render 以后，才会在页面中显示。

让组件渲染及显示的方法有下面几种：

面板主区域

‘,

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:’

Hello,easyjf open source!

‘,
tbar:[{pressed:true,text:’刷新’}]
});
});
面板Panel 主要有下面几个特点：
1、面板可以理解成应用程序中的一个界面块，这个块可以大，也可以小，这一个块包
含了特定的样式信息；
2、面板Panel 继承自Container 类，因此，面板是一个可视化容器组件；也是其它大多
数可视化控件如TabPanel、Window、TreePanel 的基类；

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:”

这是Ext的面板

”
});
panel.render(“test”);
});
可以得到如下所示的效果：
当然，如果面板中的html 比较复杂，比如是说是一个动态页面的内容。此时可以通过
在配置选项中设置autoLoad 配置选项来指定自动加载指定url 中的内容作为面板中显示的内
容。比如下面的代码：
var panel=new Ext.Panel({

title:”面板”,

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(”

这是Ext 的面板

“,true,function(){});
update 的第一个参数表示要更新的html 字符串，第二个参数表示是否执行字符串中的
脚本，第三个参数是指当内容已经更新完成后执行的回调函数。
面板与DOM节点DIV
面板与DIV 的关系，面板是一个抽象的界面块，面板当转换成页面的时候会变成一个
DIV 节点，这个DIV 含了具体的位置及信息。面板中的每一个部份都是一个DIV。当然，
面板并不是只能渲染到DIV 中，SPAN 也是可以的。还有其它的html 节点包括a、h1 之类
的标签也是允许的，但我们一段不会把他渲染到那些包含特定内容的节点上。看下面把面板
渲染到链接标签a 中的例子：

可以在面板渲染以后，通过面板的元素对应的DOM 节点来查看整个面板的HTML 代
码信息。代码如下：
alert(panel.el.dom.innerHTML);
alert(panel.el.dom.outerHTML);
alert(document.body.innerHTML);
通过renderTo 可以把面板渲染到指定的DIV 节点，而通过applyTo 可以把面板应用于
指定的DIV 节点，另外我们这时可以通过contentEl 配置选项来把页面中的某一个DIV 的内
容作为面板的内容。

15
关于renderTo、applyTo 及contentEl 的用法及区别，请看下面的代码：

七、ViewPort
首先我们来看Viewport 控件，这是一个用来代表整个浏览器的应用程序主界面控件。
VeiwPort 表示整个浏览器显示区域，该对象渲染到页面的body 区域，并会随着浏览器显示
区域的大小自动改变，一个页面中只能有一个ViewPort 实例。看下面的代码：
Ext.onReady(function(){

new Ext.Viewport({

layout:”fit”,
items:[{title:”面板”,
html:””,
bbar:[{text:”按钮1″},
{text:”按钮2″}]
}]
});
});
运行上面的代码会得到如图3-7 所示的输出结果。

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:”

网站后台管理系统!

”
},
{title:”菜单”,
region:”west”,
width:200,
collapsible:true,
html:”菜单栏”

17
},
{x
type:”tabpanel”,
region:”center”,
items:[{title:”面板1″},
{title:”面板2″}]
}]
});
});
运行上面的程序会得如图3-8 所示的效果。
图3-8 Viewport 布局风格
八、窗口Window
下面我们来讲窗口Window 控件，他可以用来表示应用程序中的一个窗口，在窗口中可
以放置种种界面元素。窗口Ext.Window 的父类是Ext.Panel，因此窗口其实是一种特殊的面

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()来关闭窗口，从而释放窗口对象所占用的系统资源。
默认情况下，窗口的标题工具栏中会包括一个关闭按钮，点击该按钮会执行窗口的关闭

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 则是用来弹出一个信息录入对话框。下面是浏览器对话框的使用
示例：

在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”?”是”:”否”));
});

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);

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);//隐藏对话框
}

下面再来看看带有滚动条的对话框使用，示例代码如下：
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);
}

如下图所示：
在实际应用中，可以直接使用MessageBox 的show 方法来显示自定义的对话框，如下
面的代码：

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
});
}

点击“保存”按钮可显示一个自定义的“保存数据”对话框，对话框中包含yes、no、cancel
三个按钮，可以在回调函数save 中根据点击的按钮执行相应的操作，如图4-6 所示。
十、TabPanel
前面我们学习了Viewport、Window 及对话框的使用。下面我们再来看另外一种比较常
用的界面控件，也就是选项板。选项面板是一个包括一个或多个选项卡(Tab)，同一时刻只
显示一个选项卡的这种用户界面。比如下图的IE 选项设置界面中，就是一个选项板的应用，
选项板上有“常规”、“安全”、“隐私”等选项卡。

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:”

this is the first panel!

“},
{closable : true,
title:”面板2″,
html:”

this is the second panel!

“},
{closable : true,
title:”面板3″,
html:”

this is the third panel!

“}
]
});

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
});
});

得到的效果如下图示：

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:”

this is the first panel!

“},
{closable : true,
title:”面板2″,
html:”

this is the second panel!

“},
{closable : true,
title:”面板3″,
html:”

this is the third panel!

“}
]
});
});
重新运行该程序，点击选项面板下面的“添加”按钮，每点一次我们会看到在面板中
添加了一个新的Tab。当tab 的个数很多时，还会出现左右滚动条，如图3-6 所示。

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″},

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″}]
});
程序运行的效果如下：

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 所示，下面我们分别对这几种布局作简单的介绍。

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 一个简单的表格

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
});

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 的节点，如果是叶子节点的时候，则需要把返回

33
的JOSN 对象中的leaf 设置为true。如下所示：
[{

id: 1,
text: ‘子节点’,
leaf:true
}]
十四、表单Form
对于传统的b/s 应用来说，数据录入元素是放在表单