表单是客户端和服务器交互的一种重要方式，Ext表单控件在界面体验效果的美观度及功能的全面性上都有着首屈一指的影响力，表面上，表单控件只是添加了一些 CSS样式，但它在数据校验方面非常灵活。
实际上，Ext提供的功能远不止这些，它还可以使不同的消息对话框更加美观、容易配置、拖动等，这都是传统的页面方式无法比拟的。
此外，Ext的树形结构是Ext框架的重要组成部分，可以动态添加、删除或修改节点，实现拖拽和右键菜单等功能，而且其界面和动画十分美观。本章将分别从Ext的消息对话框、表单控件以及Ext树形结构开始，详细讲解Ext常用控件。
核心技能部分
1.1 Ext消息对话框
传统方法 （alert、confirm等）产生的对话框非常呆板，对界面的体验效果产生了负面影响。ExtJS 提供了一套非常漂亮的对话框，可以实现华丽的应用程序界面。
1.1.1 Ext.MessageBox介绍
Ext中的 MessageBox是一种特殊的窗口，配置简单，可以任意拖动、摆放，也可以实现对任何控件的使用。Ext.MessageBox 是一个用于产生不同风格提示框的实体类，它的另一种写法是 Ext.Msg。与传统浏览器的 alert 提示不同，Ext.MessageBox是异步的，在显示一个 Ext.MessageBox时并不会停止代码的运行。因此，代码需要获得用户反馈后再运行时，必须使用回调函数。Ext.MessageBox为程序员提供了弹出提示框的简单方法，使用它提供的 alert、confirm、prompt等对话框完全可以替代传统的同类对话框。此外，Ext.MessageBox还提供了进度条等功能。
1.1.2 Ext. MessageBox. alert()
Ext.MessageBox.alert（）一般包含 title、msg 和 function 这 3 个参数。其中，title 指窗口的标题，msg 指窗口的内容，function 指点击关闭按钮后执行的函数。
Alert(title，msg，function(){} ) |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<h1>消息对话框</h1>
<p>=======================</p>
<p>确认对话框</p>
<p><button id="messageBox1">Click Me</button></p>
<script language="javascript">
Ext.onReady(function(){
Ext.get('messageBox1').on('click',function(){
Ext.MessageBox.alert('状态','保存成功');
});
});
</script>
</body>
</html>
示例 3.1 实现了一个简单的 alert对话框
1.1.3 Ext. MessageBox. confirm()
Ext.MessageBox.confirm（）方法基本上与 alert（）方法相同调用该方法后，程序将生成ok和cancel两个值。
Ext.MessageBox.confirm(String title,String msg,Function fn); |
Ext.MessageBox.confirm中有值yes和no。一个是/否的对话框代码如下：
<body>
<h1>消息对话框</h1>
<p>=======================</p>
<p>"Yes/No"对话框</p>
<p><button id="messageBox1">Click Me</button></p>
<script language="javascript">
Ext.onReady(function(){
Ext.get('messageBox1').on('click',function(){
Ext.MessageBox.confirm('确认','您确定要执行此操作吗？');
});
});
</script>
</body>
示例3.2实现了一个是/ 否的对话框
提示：如果按钮的文字要显示中文，可以引入下面一个文件：
<script type="text/javascript" src="ext-3.0.0/src/locale/ext-lang-zh_CN.js"></script>
1.1.4 Ext. MessageBox. prompt()
Ext.MessageBox.prompt（）方法用于产生输入框，相当于Window.prompt（）方法。
Ext.MessageBox.prompt(String title,String msg,Function fn,Object Xope,Boolean/Number multiline); |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript" src="ext-3.0.0/src/locale/ext-lang-zh_CN.js"></script>
</head>
<body>
<center>
<h1>消息对话框</h1>
<p>------------------------</p>
<p>交互对话框</p>
<p><button id="messageBox1">click me</button></p>
</center>
</body>
<script type="text/javascript">
Ext.onReady(function(){
Ext.get('messageBox1').on('click',function(){
Ext.MessageBox.prompt('金额','请输入充值金额:'); });
});
</script>
</html>
示例 3.3 实现了一个可输入充值卡金额的对话框
修改示例 3.3，处理用户点击 “ok”与 “cancel” 的不同点击事件
<script language="javascript">
Ext.onReady(function(){
Ext.get('messageBox1').on('click',function(){
Ext.MessageBox.prompt('金额','请输入充值金额：',function(bt,text){
if(bt == 'ok'){
Ext.MessageBox.alert('状态','您输入的充值金额：' + text);
}else{
Ext.MessageBox.alert('状态','您取消了充值!');
}
});
});
});
</script>
1.1.5 Ext. MessageBox. show()
Ext.MessageBox.show（）方法功能非常强大，使用 config 配置形式比前面的方法更方便。该方法的参数很多，最常用的配置参数见表 3-1-1。
表 3-1-1 Ext.MessageBox.show() 参数
参数 | 说明 |
animal | 对话框弹出和关闭时动画效果，设置为“idName”则从idName处弹出并产生动画，收起动画则相反。 |
buttons | 弹出框按钮的设置，主要包括：Ext.Msg.OK、Ext.Msg.OKCANCEL、Ext.Msg.CANCEL、Ext.Msg.YESNO、Ext.Msg.YESNOCANCEL |
closable | 默认为true，如果为false，则不显示右上角的关闭按钮 |
msg | 消息的内容 |
title | 标题 |
fn | 关闭弹出框后执行的函数 |
icon | 弹出框内容前面的图标，取值为：Ext.MessageBox.INFO、Ext.MessageBox.ERROR、Ext.MessageBox.WARNING、Ext.MessageBox.QUESTION |
width | 弹出框的宽度，不带单位 |
prompt | 设为true，则弹出框带有输入框 |
multiline | 设为true，则弹出框带有多行输入框 |
progress | 设为true，显示进度条 |
progressText | 在进度条上显示的文本 |
wait | 设为true，动态显示 progress |
waiting | 配置参数，以控制 progress 的显示 |
使用 Ext.MessageBox.show（）制作带 Yes/No/Cancel 的对话框. 代码如下：
<script type="text/javascript">
Ext.onReady(function(){
Ext.get('messageBox1').on('click',function(e){
Ext.MessageBox.show({
title:'保存?',
msg:'您正在关闭一个没有保存的表单,您要保存吗?',
buttons:Ext.MessageBox.YESNOCANCEL,
animEl:'messageBox1'
});
});
});
</script>
在实际应用中，执行十分耗时的操作时，需要使用进度条提示用户耐心等候。在Ext 中，可以使用 Ext.MessageBox.show（）制作简单的进度条。Ext.MessageBox.show（）中提供了一个默认的进度条，此进度条在progress被设置为 true后出现在对话框中，代码如下：
Ext.MessageBox.show({
title:'请稍等...',
msg:'处理中...',
width:300,
progress:true,
closable:false,
animEl:'messageBox1'
});
由图3.1.7 可知，进度条的状态不能轻易向前推进，可以使用 Ext.MessageBox.updateProgress（）函数改善进度条状态。一般情况下，进度条可以不直接关闭，而是使用 closable：false 隐藏对话框的关闭按钮。
为了使进度条变化更加形象，使用timeout定时器对进度条进行修改，使进度条的状态随时间变化，为用户显示进度的百分比。
<script language="javascript">
Ext.onReady(function(){
Ext.get('messageBox1').on('click',function(){
Ext.MessageBox.show({
title:'请稍等...',
msg:'处理中...',
width:300,
progress:true,
closable:false,
animEl:'messageBox1'
});
var fv = function(v){
return function(){
if(v == 100){ Ext.MessageBox.hide();}
else{Ext.MessageBox.updateProgress(v/100,'内容加载中，进度'+ v + ' %...');}
}
}
for(var i=1; i<101; i++){
setTimeout(fv(i),i*100);
}
});
});
</script>
1.2 Ext表单控件
表面上，Ext表单控件只是修改了 CSS 样式，但在漂亮的界面下隐藏的仍然是input控件。表单除了前面的功能外还需要数据校验、数据校验失败的提示等，这些功能在传统的表单控件中没有良好的处理方式。在Ext 中，可以通过表单和对应的输入控件，轻易地校验数据，并在校验失败后给予提示，为用户提供良好的交互体验。
1.2.1 Ext表单
使用表单控件，制作简单的Ext表单。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<div id="myForm"></div>
<script type="text/javascript">
Ext.onReady(function(){
var form = new Ext.form.FormPanel({
defaultType: 'textfield',
labelAlign: 'right',
title: 'form',
labelWidth: 60,
buttonAlign: 'center',
frame: true,
width: 220,
items: [{fieldLabel: 'userName'}],
buttons: [{text: '提交'},{text: '重置'}],
});
form.render("myForm");
});
</script>
</body>
</html>
上述代码创建的 Ext表单中，包含一个单行输入框和两个按钮 （提交、重置）
制作一个 Ext.form.FormPanel，然后设置 field。FormPanel 是 Ext.Panel 的子类，可以对其执行各种 Panel 的操作。使用 FormPanel 的最大优势是易于布局，Ext.form.FormPanel继承了 Ext.Panel。 Panel 可以将 Ext.form.FormPanel 放入 Ext.Viewport 中作为整个页面布局的一部分，同时利用items指定 Ext.form.FormPanel 内部的子组件。
1.2.2 Ext表单控件
Ext提供了许多表单控件，包括 TextField、TextArea、CheckBox、Radio、ComboBox、DateField、HtmlEditor、Hidden 和 TimeField。
1. 基本输入控件 Ext.form.Field
Ext.form.Field是所有表单输入控件的基类，其他输入控件都由它扩展而来。该控件定义了输入控件的通用属性和功能函数，这些属性和功能函数大致分为 3 类：页面显示样式、控件参数配置和数据有效性校验。
（1）页面显示样式：clearCls、cls、fieldClass、focusClass、itemCls、invalidClass、labelStyle等属性，分别用于定义不同状态下输入框采用的样式。
（2）控件参数配置：autoCreate、disabled、fieldLabel、hideLabel、inputType、labelSeparator、name、readOnly、tablndex、value等属性。
（3）数据有效性检验：invalidText、msgFx、msgTarget、validateOnBlue、validateDelay、validateEvent等属性。
以下将通过数据验证说明 Field。在默认的情况下，表单验证的输入控件会监听blur事件，数据验证失败则会根据 msgTarget的设置显示错误消息。通常，msgTarget可以被设置为 qtip、title、side或 under，根据不同的设置，错误信息将以指定的方式显示。所有的输入控件都继承 Ext.form. Field，所以任何表单输入控件都可以改变其错误消息的显示方式。用户登录的验证代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<div id="form"></div>
<script language="javascript">
Ext.onReady(function(){
var field1 = new Ext.form.Field( { fieldLabel: 'userName' , msgTarget:'qtip'} );
var field2 = new Ext.form.Field( { fieldLabel: 'password' , msgTarget:'title'} );
var form = new Ext.form.FormPanel( {
defaultType: 'textfield',
title:'form',
buttonAlign: 'center',
frame:true,
width: 320,
items: [field1,field2],
buttons:[{text: '提交'}]
} );
form.render("form");
field1.markInvalid();
field2.markInvalid();
});
</script>
</body>
</html>
上述代码使用 marklnvalid（）函数显示 field 的错误信息样式。其中，msgTarget分别设置为 qtip 和title。运行程序
2. 文本输入控件 Ext.form.TextField
Ext.form.TextField继承 自 Ext.form.Field，是专用于输人文本的输入控件。除了 Field 的功能外，此控件最主要的特性是检查输入框数据是否为空以及数据的最大、最小长度。添加 TextField功能，代码如下：
var field3 = new Ext.form.TextField({
fieldLabel: 'tel',
allowBlank: false,
emptyText: 'empty',
maxLength: 16,
minLength: 8,
msgTarget: 'title'
});
3. 多文本输入控件 Ext.form.TextArea
Ext.form.TextArea与Ext.formiTextField都是用于输人文本的输入控件，但是，TextArea可以输入多行文本。
var field4 = new Ext.form.TextArea({
width: 122,
grow: true,
preventScrollbars:true,
fieldLabel: '备注',
emptyText: '请输入备注信息',
maxLength: 100,
minLength: 10
});
var form = new Ext.form.FormPanel( {
defaultType: 'textfield',
title:'form',
buttonAlign: 'center',
frame:true,
width: 320,
items: [field1,field2,field3,field4],
buttons:[{text: '提交'}]
} );
4. 日期输入控件 Ext.form.DateField
Ext.form.DateField 是常用的日期选择控件。除了选择日期功能外，此控件还支持 Ext.form.TextField和 Ext.form.Field 中定义的功能。
var field5 = new Ext.form.DateField({
fieldLabel: '出生日期',
allowBlank: false,
emptyText: '请输入出生日期',
format: 'Y-m-d',
disabledDays:[0,6]
});
5. 时间输入控件 Ext.form.TimeField
使用日期控件后，有时应用程序还需要精确到日期的具体时间。Ext.form.TimeField是用于选择时间的输入控件，它可以通过指定一天的开始时间、结束时间以及时间间隔选择时间。
var field6 = new Ext.form.TimeField({
fieldLabel: '时间',
emptyText: '请选择',
minValue: '1:00 AM',
maxValue: '23:00 PM',
increment:60
});
6. 在线编辑器控件 Ext.form.HtmlEditor
HTML 中包含许多在线编辑器，但其使用较复杂。Ext提供了简单的在线编辑器控件 Ext.form.HtmlEditor，可以对文本进行各项设置。
var field7 = new Ext.form.HtmlEditor( {
fieldLabel: '自我介绍',
anableAlignments:true,
enableColors:true,
enableFont: true,
enableFontSize: true,
enableLinks: true,
enableFormat: true,
enableLists: true,
enableSourceEdit: true,
autoHeight: 'auto',
anchor: '90%'
});
由以上代码可知，可以通过相应的enable选项启用或禁用来设置各种功能
7. 隐藏域控件 Ext.form.Hidden
在实际应用中，修改记录信息时，信息 ID 一般不显示给用户，但该 ID 需要在页面使用时，一般必须隐藏 ID 值。在Ext 中，可以使用隐藏域控件 Ext.form.Hidden 来隐藏不需要呈现给用户的信息，该控件直接继承自 Ext.form.Field，通过Hidden的 setValue（）和 getValue（）函数赋值和取值，且值不显示在页面上。
var field8 = new Ext.form.Hidden({
fieldLabel: 'empId'
});
field8.setValue('0003');
var empId = field8.getValue();
运行上述代码，页面中将产生隐藏域 empId=0003。
1.2.3 表单提交
表单最重要的功能就是向后台提交数据，下面通过一个注册功能演示Ext表单提交，Ext代码如下所示。
Ext.onReady(function() {
var form = new Ext.form.FormPanel( {
title : '用户登陆',
bodyStyle : 'padding:15px',
frame : true,
layout : 'form',
width : 350,
defaultType : 'textfield',
defaults : {
width : 230
},
labelAlign : 'right',
buttonAlign : 'center',
labelWidth : 65,
labelPad : 13,
url:'login_action.jsp',
items : [ {
fieldLabel : '账号',
name : 'name',
allowBlank : false
}, {
fieldLabel : '密码',
inputType : 'password',
name : 'password'
} ],
buttons : [ {
text : '提交',
listeners:{
click:function(){
form.getForm().submit({
success:function(f,a){
Ext.Msg.alert("提示",a.result.msg);
},
failure:function(f,a){
Ext.Msg.alert("提示",a.result.msg);
}
});
}
}
}, {
text : '取消'
} ]
});
form.render("form");
});
上面代码中，为了提交数据，要为form设置一个url参数，表示表单数据提交到该路径。记得要给TextField加上一个name属性，这样后台程序才可以通过这个属性值获取提交的值。最后看Ext的按钮，在【提交】按钮上，使用listeners配置项处理事件，值是一个JSON对象，该JSON对象的属性是事件名称，值是事件处理函数。在本例中当点击按钮后，获取FormPanel包含的BasicForm对象，然后再调用submit()函数即可完成提交。
在本例中的提交到的后台程序login_action.jsp代码如下所示。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String name = request.getParameter("name");
String password = request.getParameter("password");
if("admin".equals(name)&&"admin".equals(password)){
out.print("{success:true,msg:'登陆成功，正在转向主页面'}");
} else {
out.print("{success:false,msg:'登陆失败，请检查账号和密码'}");
}
%>
上面代码用来处理登陆请求，首先得到提交的账号和密码，如果都是admin时登陆成功，此时响应一个JSON对象“{success:true,msg:'登陆成功，正在转向主页面'}”，其它情况登陆失败，此时响应一个JSON对象“{success:false,msg:'登陆失败，请检查账号和密码'}”，Ext控件就会根据这个对象的success属性的值来确定是成功或者失败。
如果账号和密码都输入admin运行结果如图3.1.17所示
1.3 Ext树控件
在应用程序中，经常需要显示或处理树状结构的对象信息，如部门信息、地区信息、菜单信息操作系统中的文件夹信息等。
传统的 HTML页面显示树比较因难，需要编写大量的 JavaScript代码。而且基于Ajax异步加载的树不但涉及Ajax数据加载及处理技术，还需要考虑跨浏览器支持等，处理过程繁琐。ExtJS中提供了树控件，可以在B/S应用中快速开发包含树结构信息的应用。
1.3.1 基本树结构
树控件由 Ext.tree.TreePanel类定义，TreePanel类继承自 Panel面板。简单的树代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script language="javascript">
Ext.onReady(function (){
var root = new Ext.tree.TreeNode( {id:'root', text: '根节点'} ) ;
var child = new Ext.tree.TreeNode( {id:'child', text: '子节点'} ) ;
root.appendChild(child);
var tree = new Ext.tree.TreePanel({
renderTo: 'myTree',
root: root,
width:200
});
});
</script>
</head>
<body>
<div id="myTree" style="height:300px"></div>
</body>
</html>
上述代码中，使用 new Ext.tree.TreeNode类创建树的根节点和子节点，然后使用树节点 root 的appendChild方法向该节点中添加一个子节点，最后直接使用 new Ext.tree.TreePanel创建树面板，在树面板的初始化参数中指定树的 root属性值为前面创建的 root节点，即树根节点。
1.3.2 Ext树控件TreeNode和 TreeLoader
在 Ext JS中，叶子节点、非叶子节点统一使用 TreeNode 表示树的节点。树节点包括两种类型：①普通的简单树节点，由Ext.tree.TreeNode定义；②需要异步加载子节点信息的树节点，由Ext.tree.AsyncTreeNode定义。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script language="javascript">
Ext.onReady(function (){
var root = new Ext.tree.TreeNode( {id:'root', text: '根节点'} ) ;
var child1 = new Ext.tree.TreeNode( {id:'child1', text: '子节点1'} ) ;
var child2 = new Ext.tree.AsyncTreeNode( {id:'child1', text: '子节点1'} ) ;
root.appendChild(child1);
root.appendChild(child2);
root.expanded=true;
var tree = new Ext.tree.TreePanel({
renderTo: 'myTree',
root: root,
width:200
});
});
</script>
</head>
<body>
<div id="myTree" style="height:300px"></div>
</body>
</html>
上述代码同时使用了 TreeNode 和 AsyncTreeNode
上述代码没有指定树的加载器，树一直尝试加截子节点 2。普通的 TreeNode可以通过调用节点的 appendChild、removeChild 等方法向该节点中添加子节点或删除子节点等。而树加载器TreeLoader 是一个关键的部件，由 Ext.tree.TreeLoader 类定义，只有 AsyncTreeNode 才会使用 TreeLoader。
使用 TreeLoader需要首先使用 Ext.tree.TreeLoader 初始化一个 TreeLoader 对象，构造函数中的配置参数 url 表示获得树节点信息的 url。然后，使用 AsyncTreeNode 初始化根节点，在该节点中指定节点的 loader 为前面定义的 loader。执行程序后点击“根节点”时，会从服务器踹指定 root 节点的子节点信息。
严格地说，TreeLoader 是针对树的节点定义的，可以为树中每个节点定义不同的 TreeLoader。默认情况下，如果一个 AsyncTreeNode 节点准备加载子节点，但节点上没有定义 loader 时，会使用 TreePanel 中定义的 loader作为加载器。因此，可以直接在TreePanel上指定 loader属性，避免为每个节点指定具体的 TreeLoader。
实际上，读取本地JSON是一种使用 TreeLoader 的另类方法。某些情况下，树的数据并不多，为了减少数据量而使用Ajax访问后台并不合适；每个节点都使用 New生成又过于麻烦。此时，可以使用 TreeLoader 读取本地JavaScript数据生成需要的树节点。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script language="javascript">
Ext.onReady(function (){
var tree = new Ext.tree.TreePanel({
renderTo: 'myTree', //应用到的HTML元素ID
animate:true,//以动画形式伸展，收缩子节点
title: 'EXT静态树',
collapsible:true,
rootVisible:true,//是否显示根节点
autoScroll:true,
autoHeight:true,
width: 250,
lines:true,//节点之间连接的横竖线
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
id: 'root',
text:'根节点',//节点名称
expanded:true,//展开
leaf:false,//是否为叶子节点
children:[
{id: 'child1',text: '子节点一', leaf:true},
{id: 'child2',text: '子节点二',children: [ {text:'子节点二的子节点' } ]} ]
})
});
});
</script>
</head>
<body>
<div id="myTree" style="height:300px"></div>
</body>
</html>
上述示例中，TreePanel包括许多参数设置，见表 10-1-2。
表 3-1-2 TreePanel 的配且参数
名称 | 说明 |
animate | true表示展开、收缩动画，false表示没有动画效果 |
autoHeight | true表示自动高度，默认为false |
enableDrag | true表示树的节点可以拖动Drag |
enableDD | 可以拖动以及通过Drag改变节点的层次结构 |
Lines | 节点间的虚线 |
Loader | 加载节点数据 |
root | 根节点 |
rootVisible | false表示不显示根节点，默认为true |
trackMouseOver | false表示mouseover无效果 |
useArrows | 小箭头 |
本章总结
Ø Ext中的 MessageBox是一种特殊的窗口，配置简单，可以任意拖动、摆放，也可以实现对任何控件的使用。
Ø Ext.MessageBox为程序员提供了弹出提示框的简单方法，使用它提供的 alert、confirm、prompt等对话框完全可以替代传统的同类对话框。此外，Ext.MessageBox还提供了进度条等功能。
Ø Ext.MessageBox.show（）方法功能非常强大，使用 config 配置形式比前面的方法更方便。
Ø Ext.form.FormPanel作为表单容器，然后设置 field。使用 FormPanel 的最大优势是易于布局，利用items指定 Ext.form.FormPanel 内部的子组件。
Ø Ext提供了许多表单控件，包括 TextField、TextArea、CheckBox、Radio、ComboBox、DateField、HtmlEditor、Hidden 和 TimeField。
Ø 树控件由 Ext.tree.TreePanel类定义,树中的每个节点都是一个TreeNode对象。
任务实训部分
1：应用Ext消息对话框
训练技能点
Ø Ext消息对话框
需求说明
当点击按钮后，使用Ext. MessageBox. show()方法实现一个自定义图标、按钮的对话框，效果如图3.2.1所示。
图3.2.1 自定义对话框
实现步骤
(1) 处理点击按钮事件
(2) 使用Ext. MessageBox. show()实现自定义对话框
参考代码
<!DOCTYPE HTML>
<html>
<head>
<title>ExtJS</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="extjs/resources/css/ext-all.css" type="text/css"></link>
<script type="text/javascript" src="extjs/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.get("btn").on("click", function() {
Ext.Msg.show( {
title : '提示',
msg : '请输入你的住址',
width : 300,
buttons : Ext.MessageBox.OKCANCEL,
multiline : true,
fn : function(btn, text) {
Ext.Msg.alert("结果", text);
},
animEl : 'btn',
icon : Ext.MessageBox.QUESTION
});
});
});
</script>
</head>
<body>
<input type="button" id="btn" value="ClickMe">
</body>
</html>
2：使用Ext实现注册界面
训练技能点
Ø Ext表单控件
需求说明
使用Ext表单控件实现注册页面，效果如图3.2.2所示。
图3.2.2 注册界面
实现步骤
(1) 使用FormPanel作为界面容器
(2) 在FormPanel容器中添加其它控件
参考代码
Ext.onReady(function() {
Ext.QuickTips.init();
var form = new Ext.form.FormPanel( {
labelAlign : 'right',
labelWidth : 50,
buttonAlign : 'center',
width : 450,
autoHeight : true,
title : 'form',
frame : true,
defaults : {
width : 300
},
defaultType : 'textfield',
items : [ {
fieldLabel : '账号',
name : 'name'
}, {
fieldLabel : '密码',
inputType : 'password',
name : 'password'
}, {
xtype : 'numberfield',
fieldLabel : '年龄',
name : 'age'
}, {
xtype : "combo",
fieldLabel : '性别',
hiddenName:'sex',
store : new Ext.data.SimpleStore( {
fields : [ 'value', 'text' ],
data : [ [ 'M', '男' ], [ 'F', '女' ] ]
}),
displayField : 'text',
valueField : 'value',
mode : 'local',
emptyText : '请选择'
}, {
xtype : 'datefield',
fieldLabel : '生日',
format:'Y-m-d',
name : 'birthday'
}, {
xtype : 'textarea',
fieldLabel : '简介',
name : 'controduce'
} ],
buttons : [ {
text : '注册',
listeners:{
click:function(){
form.getForm().submit({
});
}
}
}, {
text : '取消'
} ]
});
form.render("form");
});
3：使用Ext实现注册功能
训练技能点
Ø Ext表单控件
需求说明
在任务2的基础上完成注册功能，当用户点击【注册】按钮后，提交到后台程序并保存到数据库，保存成功或失败给出提示，效果如图3.2.3所示。
图3.2.3 注册功能
实现步骤
(1) 使用FormPanel的url属性指定提交路径。
(2) 处理【注册】按钮点击事件，当点击后提交请求到后台处理程序完成注册。
参考代码
核心代码如下所示。
buttons : [ {
text : '注册',
listeners:{
click:function(){
form.getForm().submit({
success:function(f,a){
Ext.Msg.alert("提示",a.result.msg);
},
failure:function(f,a){
Ext.Msg.alert("提示",a.result.msg);
}
});
}
}
}, {
text : '取消'
} ]
4：使用Ext实现树结构
训练技能点
Ø Ext树控件
需求说明
实现一个管理系统的树结构，效果如图3.2.4所示。
图3.2.4 管理系统树结构
实现步骤
(1) 使用TreePanel作为容器。
(2) 向容器中添加树节点。
参考代码
核心代码如下所示。
Ext.onReady(function() {
var tree = new Ext.tree.TreePanel( {
collapsible : true,
title : '管理菜单',
width : 200,
autoScroll : true,
split : true,
loader : new Ext.tree.TreeLoader(),
root : new Ext.tree.AsyncTreeNode( {
text : '系统管理',
expanded : true,
icon : 'img/13.png',
children : [ {
text : '用户管理',
icon : 'img/users.png',
children : [ {
text : '用户角色',
icon : 'img/user.png',
leaf : true
}, {
text : '用户权限',
icon : 'img/usericon.png',
leaf : true
} ]
}, {
text : '客户管理',
icon : 'img/60.png',
children : [ {
text : '客户维护',
icon : 'img/61.png',
leaf : true
}, {
text : '客户关系',
icon : 'img/62.png',
leaf : true
} ]
},{
text : '系统设置',
icon : 'img/90.png',
children : [ {
text : '字典设置',
icon : 'img/91.png',
leaf : true
}, {
text : '数据清除',
icon : 'img/92.png',
leaf : true
} ]
}]
})
});
tree.render("tree");
tree.expandAll();
});
巩固练习部分
一、选择题
1、 进度条一般不直接关闭，通常情况下可以使用 （ ）隐藏对话框的关闭按钮。
A. closable：false
B. closable：true
C. progress：false
D. progress：true
2. “Ext.MessageBox.confirm（"title"，"msg"，function（e）{alert（e）；}）；”中 function 的参数e是 （ ）
A. 点击的弹出框的按钮的值
B. 点击的弹出框的标题的值
C. 点击的弹出框的内容的值
D. 点击的弹出框的关闭按钮的值
3. 使用 Ext 的 （ ），可以替代传统的 alert、confirm等方法产生的对话框。
A. Ext. MessageBox
B. Ext. form
C. Ext. tree
D. Ext. Gird
4. Ext 中提供制作进度条的是 （ ）
A. Ext.MessageBox. alert（）
B. Ext.MessageBox. con finn（）
C. Ext.MessageBox. prompt（）
D. Ext.MessageBox.show（）
5. 在默认情况下，表单验证的输入控件会监听blur事件，如果数据验证失败，则根据msgTarget的设置显示错误消息。通常，msgTarget可以被设置为 （ ）
A. qtip
B. title
C. side
D. under
二、简答题
Ext.form.Field定义的输入控件包含哪些通用的属性和功能函数？
三、操作题
使用 Ext JS表单控件制作论坛中用户的注册页面，在用户提交注册信息时使用进度条。
作者：zhangchen124 发表于2017/3/21 20:30:22
原文链接