Ext基础

本章简介@H_301_3@

Ext JS是用于开发 RIA （富客户端）的Ajax应用，是使用JavaScript编写的、与后台技术无关的前端Ajax框架，主要用于创建前端用户界面。因此，可以将 Ext JS用于.NET、Java、PHP等各种语言开发的应用中。最初，Ext JS基于YUI技术，从UI界面中 CSS样式的应用到数据解析中的异常处理，它都是一款不可多得的 JavaScript客户端技术精品。@H_301_3@

本章将讲解Ext JS的发展及其特点，了解Ext JS的含义、熟悉 Ext JS开发环境，并在此基础上实现Ext绚丽效果。然后，详细讲解 Ext表格。在整个Ext 中，表格控件在界面和功能上都是最重要的，包括排序、缓存、拖动、隐藏列、显示行号以及编辑单元格等功能。通过Ext表格可以实现选择一条或多条记录、高亮显示选择行、显示行号、支持复选框以及支持本地和远程分页等特性。@H_301_3@

核心技能部分@H_301_3@

1.1Ext简介

1.1.1Ext发展史

Ext最早是在YUI库的基础上扩展开来的，因此Ext早期被称为 Yui-Ext。2005 年，Jack Slocum（杰克·洛克姆）选择YUI库作为底层库来维护一个Ajax项目，此后的一段时间他都围绕 YUI进行开发。但随着YUI越来越大、功能需求越来越多，他逐渐发现维护 YUI并不容易。在工作中，Jack Slocum又接触了 Swing—Java平台上的 UI库，并使用了极少的时间研究、改写YUI，使之呈现较先进的 Swing UI理念。这样，Jack Slocum在写技术博客的同时以 Yui-Ext的形式开放自己编写的 UI，包括 Grid、Tree等UI组件。在 Jack 的开发和社区氛围的营造下，Yui-Ext 已经成为一个成熟的 Ajax UI框架，且此框架是独立的，不受 YUI 的影响并兼容 JQuery、Prototype 等多种JS库。此时，Yui-Ext改名为 ExtJS。@H_301_3@

2006年初，Jack Slocum为将一套公用设施扩建为 Yahoo!User Interface（YUI）库而工作。这些扩展很快组织成一个独立的库代码并以“Yui-Ext”的名义发布。2006 年秋，Jack发行Yui-Ext 0.33 版本，此版本被证明为最终版本。在2006年年底之前，该库已大受欢迎，其名称被简化为Ext，反映了该技术作为框架的成熟性和独立性。@H_301_3@

2007 年 4月1日，Ext发布了 1.0 正式版；2007 年 2 月，Ext 获得某个新成立的公司的财务支持，增加了许多强大的功能。Ext 2.0 已经具备了很多 Swing 的特性，components、containers、layouts等概念都应用在内。Ext 2.0是一个真正成熟的框架，各方面的完善程度较高，升级到 Ext3.0 时，底层结构和配置代码均无须较大改动。Ext 3.0增加了 Ext Direct、DataWriters等强功能。@H_301_3@

2008 年 4 月 1 日，Ext JS 已经涵盖了美国、日本、法国、德国、中国等全球范围的用户，版本为 Ext-3.O。@H_301_3@

官方在2009 年 4月l4-16日的首次Ext 发布会中，发布了 Ext 3.0 RC版本。@H_301_3@

1.1.2Ext简介

Ext JS可以用于开发RIA （富客户端）的 Ajax应用，是使用 JavaScript编写的、与后台技术无关的前端Ajax框架，主要用于创建前端用户界面。因此，可以将 Ext JS用于.NET、Java、PHP 等各种语言开发的应用中。最初，Ext JS 基于 YUI技术，由 Jack Slocum开发。该框架参考 Java Swing等机制组织可视化组件，从UI界面中 CSS样式的应用到数据解析中的异常处理，它都是一款不可多得的 JavaScript客户端技术精品。Ext的 UI组件模型和开发理念脱胎成形于Yahoo组件库YUI和 Java平台上 Swing，并为开发者屏蔽了大量跨浏览器的处理。相对而言，Ext 比直接针对DOM、W3C对象模型开发 UI组件更为轻松。@H_301_3@

Ext JS初期仅是对Yahoo!UI的对话框扩展，后来逐渐形成自己的特色，深受网友的喜爱。如今，除了 YUI外，Ext还支持JQuery、Prototype 等多种JS底层库，以供用户自由选择。该框架完全基于纯HTML/CSS+JS 技术，提供丰富的跨浏览器UI组件，可以灵活地采用 JSON数据源开发，真正减轻服务端表示层的负荷，从而实现客户端的 MVC应用。Ext JS支持多平台下的主流浏览器 Internet Explorer 6+、Firefox 1.5+、Safari 2+、Opera 9+。使用该技术的厂家包括IBM、Adobe、Cisco等。@H_301_3@

JQuery、Prototype 和 YUI都属于核心的 JS 库。虽然 YUI、JQuery 各自构建了一系列 UI 器件（Widget），但没有一个真正整合良好、完整的程序开发平台。在实际开发环境中，开发者需要通过大量的工作来完善开发环境。使用 Ext可以填补这些缺陷。目前，主流开源框架中只有 DOJO与Ext在尝试提供整合的开发平台。与DOJO工具包相比，Ext可以提供粘合度更高的应用程序框架，其各个组件在设计之时就要求与其他Ext组件一起工作，进行无缝对接。这种流畅的互通性需要团队的紧密合作，并时刻强调设计和开发目标的统一。从构建每个Ext组件开始，始终都强调组件的外观、性能、互通性和可扩展性。@H_301_3@

Ext完全可以单独使用。实际上，除了特定要求外，推荐单独使用 Ext，使文件占位更小、支持和整合更加紧密。同样，Ext 支持与 JQuery、YUI 或 Prototype整合使用，作为底层库的角色出现，提供处理各种核心的服务，如 DOM和事件处理、Ajax连接和动画特效。使用整合方式的原因之一是它们已具备了一些特定的组件，而Ext并没有原生支持。例如，YUI 的 History控件便是一个典型的应用。此时，Ext需要依赖YUI库的底层实现History控件，从而免去 Ext 自身底层库，减少整个程序的内存占用。另外，使用整合方式时，许多已在使用其他底层库的程序可以逐步加入 Ext。总之，如果程序中已经存在其他库，则 Ext可以通过利用它们为用户提供各种可能性和性能上的优化。只要实现了对应的底层库接口，可以为任意一个框架添加适配器。用户可以轻松地将 DOJO、Moo、Ajax.NET或其他JS库转变为 Ext的底层。@H_301_3@

1.1.3Ext类库

使用 ExtJS需要首先获得Ext JS库文件，该框架是开源的，可以直接从官方网站 http://www.sencha.com/下载@H_301_3@

@H_301_3@

下载后的 ext-3.0.0.zip文件后解压@H_301_3@

表2-1-1 Ext 3 的目录@H_301_3@

名称@H_301_3@	说明@H_301_3@
adapter@H_301_3@	负责将提供的第三方底层库（包括 Ext 白带的底层库）映射为 Ext 支持的底层库@H_301_3@
docs@H_301_3@	API 帮助文档@H_301_3@
exmaples@H_301_3@	提供使用 Ext JS技术实现的实例@H_301_3@
pkgs@H_301_3@	新的工具包@H_301_3@
resources@H_301_3@	Ext UI资源文件目录，CSS、图片文件等都存放在此目录@H_301_3@
src@H_301_3@	无压缩 Ext 全部的源码@H_301_3@
ext-all.js@H_301_3@	压缩后的 Ext 全部源码@H_301_3@
ext-all-debug.js@H_301_3@	无压缩的 Ext 全部的源码（用于调试）@H_301_3@

Ext JS由一系列类库组成，一旦页面成功加载了 Ext JS库，就可以在页面中通过JavaScript调用Ext JS的类及控件实现需要的功能。@H_301_3@

（1）底层 API （core）：底层API 中提供了对DOM操作、查询的封装、事件处理、DOM查询器等基础功能，如图 2.1.3 所示。@H_301_3@

图 2.1.3 Ext底层 API@H_301_3@

（2）控件（widgets）：可以直接在页面中创建的可视化组件，如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等。在应用程序中，可以直接通过应用这些控件实现友好、交互性强的应用程序的 UI@H_301_3@

@H_301_3@

（3）实用工具（util）：Ext提供了许多的实用工具，可以方便地实现数据内容格式化、JSON数据解码反解码、对 Date 和 Array 发送 Ajax请求、Cookie 管理、CSS 管理等扩展功能@H_301_3@

@H_301_3@

Ext应用需要在页面中引人Ext 的样式及 Ext库文件，样式文件为 resources/css/ext-all.css，Ext 的JS库文件主要包含 adapter/ext/ext-base.js 和 ext-all.js。其中，ext-base.js 表示框架基础库，ext-all.js是 Ext JS 的核心库。因此，使用 Ext JS框架的页面中一般包含以下代码：@H_301_3@

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">@H_301_3@

<html xmlns="http://www.w3.org/1999/xhtml">@H_301_3@

<head>@H_301_3@

<@R_404_338@ http-equiv="Content-Type" content="text/html; charset=utf-8" />@H_301_3@

<title>helloworld</title>@H_301_3@

Ext.onReady(@H_301_3@

function(){@H_301_3@

var win = new Ext.Window( {title:'hello',width:200,height:200,html:'<h1>hello my first Ext</h1>'} ); @H_301_3@

win.show();@H_301_3@

}@H_301_3@

);@H_301_3@

</script>@H_301_3@

</head>@H_301_3@

<body>@H_301_3@

</body>@H_301_3@

</html>@H_301_3@

示例 2.1 是一个简单的Ext示例，运行结果如图 2.1.6所示。@H_301_3@

图 2.1.6 Ext 的 hello 示例@H_301_3@

由示例 2.1 中的 JS 代码可知，Ext JS 一般的程序入口为“Ext.onReady();”，然后可以创建 window对象。该对象中有很多属性，具体可以查看下载包中 doc文件夹下的 API。@H_301_3@

@H_301_3@

Ext的样式及Ext库文件需要找到相应的文件，所以可以直接在Ext解压包examples下创建实例，或者从解压的目录中提取需要的文件到使用者的工程中。@H_301_3@

1.1.4Ext组件

Ext具有结构、层次分明的组件体系，这些组件形成了 Ext 的控件。Ext组件由 Component类定义，每种组件都有一个指定的 xtype 属性值，通过该值可以得到组件的类型或定义指定类型的组件。@H_301_3@

一般而言，组件可以分为 3 类，即基本组件、工具栏组件、表单及元素组件，分别见表 2-1-2、表 2-1-3、表 2-1-4。@H_301_3@

表 9-1-2 基本组件@H_301_3@

xtype@H_301_3@	Class@H_301_3@	解释@H_301_3@
Box@H_301_3@	Ext.BoxComponent@H_301_3@	具有边框属性的组件@H_301_3@
button@H_301_3@	Ext.Button@H_301_3@	按钮@H_301_3@
color palette@H_301_3@	Ext.ColorPalette@H_301_3@	调色板@H_301_3@
component@H_301_3@	Ext.Component@H_301_3@	组件@H_301_3@
container@H_301_3@	Ext.Container@H_301_3@	容器@H_301_3@
cycle@H_301_3@	Ext.CycleButton@H_301_3@	切换按钮@H_301_3@
dataview@H_301_3@	Ext.DataView@H_301_3@	数据显示视图@H_301_3@
datepicker@H_301_3@	Ext.DatePicker@H_301_3@	日期选择面板@H_301_3@
editor@H_301_3@	Ext.Editor@H_301_3@	编辑器@H_301_3@
editorgrid@H_301_3@	Ext.grid.EditorGridPanel@H_301_3@	可编辑的表格@H_301_3@
grid@H_301_3@	Ext.grid.GridPanel@H_301_3@	表格@H_301_3@
paging@H_301_3@	Ext.PagingToolbar@H_301_3@	工具栏中的间隔@H_301_3@
progress@H_301_3@	Ext.ProgressBar@H_301_3@	进度条@H_301_3@
splitbutton@H_301_3@	Ext.SplitButton@H_301_3@	可分裂的按钮@H_301_3@
tabpanel@H_301_3@	Ext.TabPanel@H_301_3@	选项面板@H_301_3@
treepanel@H_301_3@	Ext.tree.TreePanel@H_301_3@	树@H_301_3@
viewport@H_301_3@	Ext.ViewPort@H_301_3@	视图@H_301_3@
window@H_301_3@	Ext.Window@H_301_3@	窗口@H_301_3@

表 9-1-3 工具栏组件@H_301_3@

xtype@H_301_3@	Class@H_301_3@	解释@H_301_3@
toolbar@H_301_3@	Ext.Toolbar@H_301_3@	工具栏@H_301_3@
tbbutton@H_301_3@	Ext.Toolbar.Button@H_301_3@	按钮@H_301_3@
tbfill@H_301_3@	Ext.Toolbar.Fill@H_301_3@	文件@H_301_3@
tbitern@H_301_3@	Ext.Toolbar.Item@H_301_3@	工具条项目@H_301_3@
tbseparator@H_301_3@	Ext.Toolbar.Separator@H_301_3@	工具栏分隔符@H_301_3@
tbspacer@H_301_3@	Ext.Toolbar.Spacer@H_301_3@	工具栏空白@H_301_3@
tbsplit@H_301_3@	Ext.Toolbar.SplitButton@H_301_3@	工具栏分隔按钮@H_301_3@
tbtext@H_301_3@	Ext.Toolbar.TextItem@H_301_3@	工具栏文本项@H_301_3@

表 9-1-4 表单及元素组件@H_301_3@

xtype@H_301_3@	Class@H_301_3@	解释@H_301_3@
form@H_301_3@	Ext.FormPanel@H_301_3@	Form面板@H_301_3@
checkBox@H_301_3@	Ext.form.CheckBox@H_301_3@	checkBox 录入框@H_301_3@
combo@H_301_3@	Ext.form.ComboBox@H_301_3@	Combo选择项@H_301_3@
datefield@H_301_3@	Ext.form.DateField@H_301_3@	日期选择项@H_301_3@
field@H_301_3@	Ext.form.Field@H_301_3@	表单字段@H_301_3@
fieldset@H_301_3@	Ext.form.FieldSet@H_301_3@	表单字段组@H_301_3@
hidden@H_301_3@	Ext.form.Hidden@H_301_3@	表单隐藏域@H_301_3@
htmleditor@H_301_3@	Ext.form.HtmlEditor@H_301_3@	html 编辑器@H_301_3@
numberfield@H_301_3@	Ext.form.NumberField@H_301_3@	数字编辑器@H_301_3@
radio@H_301_3@	Ext.form.Radio@H_301_3@	单选按钮@H_301_3@
textarea@H_301_3@	Ext.form.Text Area@H_301_3@	区域文本框@H_301_3@
textfield@H_301_3@	Ext.form.TextField@H_301_3@	表单文本框@H_301_3@
timefield@H_301_3@	Ext.form.TimeField@H_301_3@	时间录入项@H_301_3@
trigger@H_301_3@	Ext.form.TriggerField@H_301_3@	触发录入项@H_301_3@

@H_301_3@

组件可以直接通过new关键字创建。例如，示例 2.1 使用 new Ext.Window 创建窗口，使用 new Ext.GridPanel()创建表格。除了一些普通的组件外，一般都会在构造函数中通过传递构造参数创建组件。组件的构造函数中一般都可以包含一个对象，该对象包含创建组件需要的配置属性及值，组件根据构造函数中的参数属性值进行初始化。@H_301_3@

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">@H_301_3@

<html xmlns="http://www.w3.org/1999/xhtml">@H_301_3@

<head>@H_301_3@

<@R_404_338@ http-equiv="Content-Type" content="text/html; charset=utf-8" />@H_301_3@

<title>无标题文档</title>@H_301_3@

Ext.onReady(@H_301_3@

function(){@H_301_3@

var panel = new Ext.Panel({ title:"hello",width:300,height: 150,html: "<h1>Hello</h1>" } );@H_301_3@

panel.render("hello");@H_301_3@

}@H_301_3@

);@H_301_3@

</script>@H_301_3@

</head>@H_301_3@

<body>@H_301_3@

<div id="hello"></div>@H_301_3@

</body>@H_301_3@

</html>@H_301_3@

示例 2.2 中使用了 Panel面板，运行结果如图2.1.7所示。@H_301_3@

图2.1.7 Ext 的 Panel 的构造函数@H_301_3@

1.1.5Ext事件

ExtJS提供了一套强大的事件处理机制，用于响应用户的动作、监控控件状态变化、更新控件视图信息、与服务器进行交互等。事件统一由 Ext.EventManager对象管理，与浏览器W3C 标准事件对象 Event对应。Ext封装了一个 Ext.EventObject事件对象。支持事件处理的类或接口为 Ext.util.Observable，凡是继承该类的组件或类都支持向对象中添加事件处理及响应功能。@H_301_3@

某按钮的点击事件代码如下：@H_301_3@

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">@H_301_3@

<html xmlns="http://www.w3.org/1999/xhtml">@H_301_3@

<head>@H_301_3@

<@R_404_338@ http-equiv="Content-Type" content="text/html; charset=utf-8" />@H_301_3@

<title>无标题文档</title>@H_301_3@

Ext.onReady(function(){@H_301_3@

Ext.get('myButton').on('click',function(){@H_301_3@

alert('你点击到我了');@H_301_3@

});@H_301_3@

</script>@H_301_3@

</head>@H_301_3@

<body>@H_301_3@

<input type="button" id="myButton" value="myButton"/>@H_301_3@

</body>@H_301_3@

</html>@H_301_3@

1.2Ext表格控件 Grid

1.2.1Grid特性

Ext的表格功能非常强大，包括排序、缓存、拖动、隐藏列、显示行号以及编辑单元格等。表格由类 Ext.grid.GridPanel定义，它继承自 Panel。在 Ext 中，Grid控件和其他显示数据的控件能够支持多种数据类型（二维数组、JSON数据和 XML数据等）甚至自定义的数据类型。Ext提供了一个桥梁 Ext.data.Store，通过它可以将任何格式的数据转化成 Grid能够使用的形式，不需要为每种数据格式编写一个 Grid 的实现。另外，表格控件Grid还必须包括列定义信息，表格的列信息由类Ext.grid.ColumnModel定义，而表格的数据存储器由 Ext.data.Store定义，数据存储器根据解析的数据不同分为 JsonStore、SimpleStore、GroupingStore等。@H_301_3@

Ext Grid的功能包括选择一条或多条记录、高亮显示选择行、调整列宽、显示行号、支持复选框以及支持本地和远程分页。另外，Grid可以编辑表格、添加行、删除一行或多行、拖动改变表格大小，这些功能都在Ext表格控件中实现。@H_301_3@

1.2.2简单的 Grid

查看 Ext解压包的 examples 目录中的示例制作 Grid，加深对 Grid 的了解。@H_301_3@

（1）表格是二维表格，与设计数据库的表相同，需要首先设置表的列数、列名、列的类型及显示方式，搭建表格框架。Grid的结构和数据库中的表非常相似。@H_301_3@

（2）在Ext 中，列的定义称为 ColumnModel，简称 cm。作为整个表格的列模型，列必须首先建立。创建一个 6列的 Grid，按顺序分别为编号（empId）、姓名（userName）、性别（sex）、出生日期（birthday）、地址（address）和备注（remark），代码如下：@H_301_3@

var cm = new Ext.grid.ColumnModel( [@H_301_3@

{header:'编号',dataIndex:'empId'},@H_301_3@

{header:'姓名',dataIndex:'empName'},@H_301_3@

{header:'性别',dataIndex:'sex'},@H_301_3@

{header:'出生日期',dataIndex:'birthday'},@H_301_3@

{header:'地址',dataIndex:'address'},@H_301_3@

{header:'备注',dataIndex:'remark'} @H_301_3@

]);@H_301_3@

上述代码中，var cm = new Ext.grid.ColumnModel（）用于创建表格列信息。表格包含的列由 columns配置，每列的header表示该列的名称，dataIndex表示列对应的记录集字段。另外，sortable表示是否可以排序，renderer表示列的渲染函数，width表示宽度，format表示格式化信息等。@H_301_3@

定义表格的结构后，就可以向其中添加数据。此处，数据也是二维的。直接添加静态数据的代码如下：@H_301_3@

var data = [@H_301_3@

['0001','张三','boy','9/1 12:00am','建设路','0001remark'],@H_301_3@

['0002','李四','人民路','0002remark'],@H_301_3@

['0003','王五','大学路','0003remark'],@H_301_3@

['0004','赵六','girl','南京路','0004remark']@H_301_3@

];@H_301_3@

上述代码中，“var data =…”用于定义表格中的数据，共包含4条记录，是一个二维数组，在页面上显示为4行，每行6列，分别对应 empId、userName、sex、birthday、address 和 remark。另外，在页面上显示这些数据时需要对原始数据进行转换，代码如下：@H_301_3@

var store = new Ext.data.Store({@H_301_3@

proxy:new Ext.data.MemoryProxy(data),@H_301_3@

reader:new Ext.data.ArrayReader({},[@H_301_3@

{name:'empId'},@H_301_3@

{name:'empName'},@H_301_3@

{name:'sex'},@H_301_3@

{name:'birthday'},@H_301_3@

{name:'address'},@H_301_3@

{name:'remark'}@H_301_3@

])@H_301_3@

});@H_301_3@

上述代码中，“var store = new Ext.data.Store（）” 用于创建数据的存储对象，负责将各种原始数据（如二维数组、JSON对象数组、文本等）转换成Grid可以使用的形式，避免为每种数据格式都编写对应的实现。此外，store包含 proxy和reader两个部分，前者指获取数据的方式，后者指解析数据的方式。@H_301_3@

Ext.data.MemoryProxy用于解析JavaScript变量，只要将已定义的 data作为参数传入即可。Ext.data.ArrayReader用于解析数组，说明数组将按照定义的规范进行解析。@H_301_3@

上述代码定义了名称 empId、userName、sex、birthday、address 和 remark，与表格 cm 的 dataIndex一一对应。@H_301_3@

为了使数据可以显示，需要通过“store.load()；”对数据进行初始化。@H_301_3@

定义列模型并完成原始数据和数据转换后，可以进行装配。创建Grid，代码如下：@H_301_3@

var grid = new Ext.grid.GridPanel({@H_301_3@

store:store,@H_301_3@

height:350,@H_301_3@

width:700,@H_301_3@

cm:cm@H_301_3@

});@H_301_3@

创建了 Grid之后，需要使用 grid.render（）方法使Grid开始渲染，才能显示数据。完整的 Grid实例代码如下：@H_301_3@

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">@H_301_3@

<html xmlns="http://www.w3.org/1999/xhtml">@H_301_3@

<head>@H_301_3@

<@R_404_338@ http-equiv="Content-Type" content="text/html; charset=utf-8" />@H_301_3@

<title>表格</title>@H_301_3@

</head>@H_301_3@

<body>@H_301_3@

<div id="gridCm" style="height:300px;"></div>@H_301_3@

var cm = new Ext.grid.ColumnModel( [@H_301_3@

{header:'编号',dataIndex:'remark'} @H_301_3@

]);@H_301_3@

@H_301_3@

var data = [@H_301_3@

['0001','0004remark']@H_301_3@

];@H_301_3@

@H_301_3@

var store = new Ext.data.Store({@H_301_3@

proxy:new Ext.data.MemoryProxy(data),@H_301_3@

{name:'remark'}@H_301_3@

])@H_301_3@

});@H_301_3@

var grid = new Ext.grid.GridPanel({@H_301_3@

store:store,@H_301_3@

cm:cm@H_301_3@

});@H_301_3@

store.load();@H_301_3@

grid.render('gridCm');@H_301_3@

</script>@H_301_3@

</body>@H_301_3@

</html>@H_301_3@

@H_301_3@

1.2.3Grid 常用功能

2.2.2小节中演示了如何创建简单的 Grid表格，本节将对该Grid进行完善。@H_301_3@

1. 互换列位置@H_301_3@

互换姓名和性别的位置，最直接的方法是互换两列的所有信息，但此操作比较繁琐。使用 Ext.data.AnayReader解析数组时，可以使用 mapping指定列的位置，代码变化如下：@H_301_3@

var store = new Ext.data.Store({@H_301_3@

proxy:new Ext.data.MemoryProxy(data),[@H_301_3@

{name:'empId',mapping:0},@H_301_3@

{name:'empName',mapping:2},@H_301_3@

{name:'sex',mapping:1},@H_301_3@

{name:'birthday',mapping:3},@H_301_3@

{name:'address',mapping:4},@H_301_3@

{name:'remark',mapping:5}@H_301_3@

])@H_301_3@

});@H_301_3@

@H_301_3@

mapping的索引号从0开始。@H_301_3@

2. 自定义列宽@H_301_3@

2.2.2 小节的 Grid 中，所有的列宽都相同。当列不够宽时，用户必须手动调整其宽度。cm支持设置列宽，不设置时会取默认的列宽 lOOpx。@H_301_3@

var cm = new Ext.grid.ColumnModel( [@H_301_3@

{header:'编号',dataIndex:'empId',width:40},//指定列宽@H_301_3@

{header:'姓名',dataIndex:'empName',width:60},dataIndex:'sex',dataIndex:'birthday',width:120},dataIndex:'address',width:200},dataIndex:'remark',width:200} @H_301_3@

]);@H_301_3@

上述代码对列宽进行了适当调整，运行效果如图 2.1.11 所示。@H_301_3@

@H_301_3@

使用这种方式必须在每次应用时都计算列宽，依然比较繁琐。程序需要使每列自动填满 Grid，以减少工作量。通过viewConfig的 forceFit进行配置，可以重新计算所有列宽后填充Grid表格，代码如下：@H_301_3@

viewConfig:{forceFit:true} //自适应列宽@H_301_3@

@H_301_3@

3. 支持按列排序@H_301_3@

在JSP 中，实现排序比较复杂；而在Ext中，只要添加 sortable的属性，就可以方便地进行排序。@H_301_3@

var cm = new Ext.grid.ColumnModel( [@H_301_3@

{header:'编号',sortable:true},//指定列宽,排序@H_301_3@

{header:'姓名',sortable:true} @H_301_3@

]);@H_301_3@

@H_301_3@

当为列标题添加的 sortable 属性为 true 时，标题上会出现一个向上或向下的小箭头，分别表示按标题的升序或者降序排列。@H_301_3@

标题的右侧有一个可下拉的、类似于Extl.x 的右键功能菜单@H_301_3@

除了可以按照升序或降序排序外，此功能菜单还可以隐藏或显示列。@H_301_3@

4. 格式化数据@H_301_3@

表格中的“出生日期”的值没有经过格式化，所以并不直观。在实际显示时，需要对特定列的数据进行格式化，步骤如下：@H_301_3@

（1）确定“出生日期”属于日期格式的数据。@H_301_3@

（2）在 reader 中增加配置，除了设置name属性外，还需要设置type 和 dateFormat属性。其中，type说明解析时将该列作为何种类型处理，dateFormat说明将字符串转换成相应的日期格式。在Ext 中，日期格式有相应的约定：Y表示年、m表示月、d表示日期、H表示小时、i表示分钟、S表示秒。改动后的代码如下：@H_301_3@

var cm = new Ext.grid.ColumnModel( [@H_301_3@

{header:'编号',renderer:Ext.util.Format.dateRenderer('Y-m-d H:i:s')},sortable:true} @H_301_3@

]);@H_301_3@

运行上述代码，查看运行结果，如图 2.1.17所示。@H_301_3@

图 2.1.17 日期格式化@H_301_3@

5. 自动显示行号@H_301_3@

在Ext 中，自动显示行号非常简单，只要在cm中添加RowNumberer对象即可。@H_301_3@

var cm = new Ext.grid.ColumnModel( [@H_301_3@

new Ext.grid.RowNumberer(),//自动显示行号@H_301_3@

{header:'编号',sortable:true,@H_301_3@

renderer:Ext.util.Format.dateRenderer('Y-m-d H:i:s')},//格式化@H_301_3@

{header:'地址',sortable:true} @H_301_3@

]);@H_301_3@

@H_301_3@

6. 复选框@H_301_3@

Ext的复选框通过CheckBoxSelectionModel对象实现，它在每行数据前添加一个复选框。@H_301_3@

（1）创建sm，代码如下@H_301_3@

var sm = new Ext.grid.CheckBoxSelectionModel();@H_301_3@

（2）将 sm放入cm和 grid中，代码如下：@H_301_3@

var cm = new Ext.grid.ColumnModel( [@H_301_3@

new Ext.grid.RowNumberer(),//自动显示行号@H_301_3@

sm,//添加复选框@H_301_3@

{header:'编号',sortable:true} @H_301_3@

]);@H_301_3@

@H_301_3@

7. 改变字体颜色、添加图片@H_301_3@

在定义列的时候可以指定该列的渲染函数，在函数里可以设置字体颜色、添加图片。@H_301_3@

var cm = new Ext.grid.ColumnModel( [@H_301_3@

{header:'编号',width:40,renderer:renderSex},width:200} @H_301_3@

]);@H_301_3@

function renderSex(value)@H_301_3@

{@H_301_3@

if(value == 'male')@H_301_3@

return "<span style='color:red;font-weight:bold;'>红男</span><img src='m.gif'/>";@H_301_3@

else@H_301_3@

return "<span style='color:green;font-weight:bold;'>绿女</span><img src='m.gif'/>";@H_301_3@

}@H_301_3@

本章总结@H_301_3@

ØExt JS是用于开发 RIA （富客户端）的Ajax应用，是使用JavaScript编写的、与后台技术无关的前端Ajax框架，主要用于创建前端用户界面。@H_301_3@

ØExt应用需要在页面中引人Ext 的样式及 Ext库文件。@H_301_3@

n样式文件为 resources/css/ext-all.css。@H_301_3@

nExt 的JS库文件主要包含 adapter/ext/ext-base.js 和 ext-all.js。其中，ext-base.js 表示框架基础库，ext-all.js是 Ext JS 的核心库。@H_301_3@

ØExtJS组件可以分为 3 类，即基本组件、工具栏组件、表单及元素组件。@H_301_3@

ØExt组件由 Component类定义，每种组件都有一个指定的 xtype 属性值，通过该值可以得到组件的类型或定义指定类型的组件。@H_301_3@

Ø事件统一由 Ext.EventManager对象管理，与浏览器W3C 标准事件对象 Event对应。Ext封装了一个 Ext.EventObject事件对象。@H_301_3@

ØExt的表格功能非常强大，包括排序、缓存、拖动、隐藏列、显示行号以及编辑单元格等。表格由类 Ext.grid.GridPanel定义，它继承自 Panel。@H_301_3@

n在 Ext中，Grid控件和其他显示数据的控件能够支持多种数据类型（二维数组、JSON数据和 XML数据等）甚至自定义的数据类型。而表格的数据存储器由 Ext.data.Store定义，数据存储器根据解析的数据不同分为 JsonStore、SimpleStore、GroupingStore等。@H_301_3@

n另外，表格控件Grid还必须包括列定义信息，表格的列信息由类Ext.grid.ColumnModel定义。@H_301_3@

任务实训部分@H_301_3@

1：Ext Grid 控件的显示 功能

训练技能点@H_301_3@

Ø使用 Ext Grid 控件显示后台 Servlet 查询的数据@H_301_3@

需求说明@H_301_3@

（1）使用 Servlet 查询数据。@H_301_3@

（2）使用 Ext Grid 显示后台 Servlet 查询的数据。@H_301_3@

实现步骤@H_301_3@

（1）设计数据库表及字段。@H_301_3@

（2）使用 Servlet 查询订单数据。@H_301_3@

（3）使用 Ext Grid 控件显示查询数据。@H_301_3@

参考代码@H_301_3@

创建数据库表、添加数据的代码：@H_301_3@

-- ----------------------------@H_301_3@

-- Table structure for pro_order@H_301_3@

-- ----------------------------@H_301_3@

DROP TABLE IF EXISTS `pro_order`;@H_301_3@

CREATE TABLE `pro_order` (@H_301_3@

`order_id` int(11) NOT NULL AUTO_INCREMENT,@H_301_3@

`order_no` varchar(20) DEFAULT NULL,@H_301_3@

`price` float DEFAULT NULL,@H_301_3@

`create_date` varchar(20) DEFAULT NULL,@H_301_3@

PRIMARY KEY (`order_id`)@H_301_3@

) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8;@H_301_3@

-- ----------------------------@H_301_3@

-- Records @H_301_3@

-- ----------------------------@H_301_3@

INSERT INTO `pro_order` VALUES ('1','0001','2000','2011-01-01');@H_301_3@

INSERT INTO `pro_order` VALUES ('2','0002','200','2011-01-01');@H_301_3@

INSERT INTO `pro_order` VALUES ('3','0003','3000','2011-01-01');@H_301_3@

INSERT INTO `pro_order` VALUES ('4','0004','50','2011-01-01');@H_301_3@

INSERT INTO `pro_order` VALUES ('5','0005','30','2011-01-01');@H_301_3@

INSERT INTO `pro_order` VALUES ('6','0006','2011-01-01');@H_301_3@

INSERT INTO `pro_order` VALUES ('7','0007','34','2011-01-01');@H_301_3@

INSERT INTO `pro_order` VALUES ('8','0008','57','2011-01-01');@H_301_3@

INSERT INTO `pro_order` VALUES ('9','0009','300','2011-01-05');@H_301_3@

INSERT INTO `pro_order` VALUES ('10','0010','80','2011-01-05');@H_301_3@

INSERT INTO `pro_order` VALUES ('11','0011','90','2011-01-05');@H_301_3@

INSERT INTO `pro_order` VALUES ('12','0012','3090','2011-01-05');@H_301_3@

数据库连接类：@H_301_3@

public class DBUtil {@H_301_3@

@H_301_3@

public static Connection getCon(){@H_301_3@

Connection conn=null;@H_301_3@

String url="jdbc:MysqL:///test";@H_301_3@

String userName="root";@H_301_3@

String userPwd="admin";@H_301_3@

try {@H_301_3@

conn=DriverManager.getConnection(url,userName,userPwd);@H_301_3@

} catch (Exception e) {@H_301_3@

e.printStackTrace();@H_301_3@

}@H_301_3@

return conn;@H_301_3@

}@H_301_3@

@H_301_3@

public static void closeDB(Connection conn,Statement stmt,PreparedStatement pstmt,ResultSet rs){@H_301_3@

try {@H_301_3@

if (rs!=null) {@H_301_3@

rs.close();@H_301_3@

}@H_301_3@

if (pstmt!=null) {@H_301_3@

pstmt.close();@H_301_3@

}@H_301_3@

if (stmt!=null) {@H_301_3@

stmt.close();@H_301_3@

}@H_301_3@

if (conn!=null) {@H_301_3@

conn.close();@H_301_3@

}@H_301_3@

} catch (Exception e) {@H_301_3@

e.printStackTrace();@H_301_3@

}@H_301_3@

查询订单的Servlet 方法：@H_301_3@

public void doGet(HttpServletRequest request,HttpServletResponse response)@H_301_3@

throws ServletException,IOException {@H_301_3@

response.setContentType("text/html;charset=gbk");@H_301_3@

response.setCharacterEncoding("gbk");@H_301_3@

request.setCharacterEncoding("gbk");@H_301_3@

PrintWriter out = response.getWriter();@H_301_3@

Connection conn=null;@H_301_3@

Statement stmt=null;@H_301_3@

PreparedStatement pstmt=null;@H_301_3@

ResultSet rs=null;@H_301_3@

String hqlsql="select count(*) from pro_order";@H_301_3@

String sql="select * from pro_order";@H_301_3@

String json="";@H_301_3@

int totalOrder=0;@H_301_3@

try {@H_301_3@

conn=DBUtil.getCon();@H_301_3@

stmt=conn.createStatement();@H_301_3@

rs=stmt.executeQuery(hqlsql);@H_301_3@

while (rs.next()) {@H_301_3@

totalOrder=rs.getInt(1);@H_301_3@

}@H_301_3@

json="{totalProperty:"+totalOrder+",root:[";@H_301_3@

rs=stmt.executeQuery(sql);@H_301_3@

while (rs.next()) {@H_301_3@

json+="{orderNo:'"+rs.getString("order_no")+"',price:'"+rs.getString("price")+@H_301_3@

"',createDate:'"+rs.getString("create_date")+"'},";@H_301_3@

}@H_301_3@

} catch (Exception e) {@H_301_3@

e.printStackTrace();@H_301_3@

}finally{@H_301_3@

DBUtil.closeDB(conn,stmt,pstmt,rs);@H_301_3@

}@H_301_3@

json=json.substring(0,json.length()-1);@H_301_3@

json+="]}";@H_301_3@

System.out.println(111);@H_301_3@

out.write(json.toString());@H_301_3@

}@H_301_3@

查询构造的JSON格式数据：@H_301_3@

root:[@H_301_3@

{orderNo:'0001',price:'2000',createDate:'2011-01-01'},@H_301_3@

{orderNo:'0002',price:'200',@H_301_3@

{orderNo:'0003',price:'3000',@H_301_3@

{orderNo:'0004',price:'50',@H_301_3@

{orderNo:'0005',price:'30',@H_301_3@

{orderNo:'0006',@H_301_3@

{orderNo:'0007',price:'34',@H_301_3@

{orderNo:'0008',price:'57',@H_301_3@

{orderNo:'0009',price:'300',createDate:'2011-01-05'},@H_301_3@

{orderNo:'0010',price:'80',@H_301_3@

{orderNo:'0011',price:'90',@H_301_3@

{orderNo:'0012',price:'3090',createDate:'2011-01-05'}@H_301_3@

]@H_301_3@

使用Ext 表格控件显示数据：@H_301_3@

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">@H_301_3@

<html>@H_301_3@

<head>@H_301_3@

<title>proOrderList</title>@H_301_3@

<@R_404_338@ http-equiv="keywords" content="keyword1,keyword2,keyword3">@H_301_3@

<@R_404_338@ http-equiv="description" content="this is my page">@H_301_3@

<@R_404_338@ http-equiv="content-type" content="text/html; charset=gbk">@H_301_3@

@H_301_3@

@H_301_3@

</head>@H_301_3@

<body>@H_301_3@

<div id="grid"></div>@H_301_3@

Ext.onReady(function() {@H_301_3@

var cm = new Ext.grid.ColumnModel([ @H_301_3@

{header : "订单编号",dataIndex : 'orderNo'},@H_301_3@

{header : "订单价格",dataIndex : 'price' },@H_301_3@

{header : "创建日期",dataIndex : 'createDate'}]);@H_301_3@

@H_301_3@

var store=new Ext.data.Store({@H_301_3@

proxy:new Ext.data.HttpProxy({url:'Pro_orderServlet'}),@H_301_3@

reader:new Ext.data.JsonReader({totalProperty:'totalProperty',root:'root'},@H_301_3@

[{name:'orderNo'},{name:'price'},{name:'createDate'}])@H_301_3@

});@H_301_3@

@H_301_3@

var grid=new Ext.grid.EditorGridPanel({@H_301_3@

renderTo:'grid',@H_301_3@

store:store,@H_301_3@

cm:cm,@H_301_3@

loadMask:true,@H_301_3@

width:600,@H_301_3@

height:300@H_301_3@

});@H_301_3@

store.load({params:{start:0,limit:10}});@H_301_3@

});@H_301_3@

</script>@H_301_3@

</body>@H_301_3@

</html>@H_301_3@

2：Ext Grid 控件的分页 功能

训练技能点@H_301_3@

Ø使用 Ext Grid 控件分页功能@H_301_3@

需求说明@H_301_3@

在完成上一任务显示功能的基础上，使用Ext Grid 控件实现数据分页，效果如图9.2.2所示。@H_301_3@

图2.2.2 分页显示订单@H_301_3@

实现步骤@H_301_3@

（1）设计数据库表及字段。@H_301_3@

（2）使用 Servlet 查询订单数据。@H_301_3@

（3）使用 Ext Grid 控件分页显示查询数据。@H_301_3@

参考代码@H_301_3@

查询订单的Servlet 方法：@H_301_3@

public void doGet(HttpServletRequest request,IOException {@H_301_3@

response.setContentType("text/html;charset=gbk");@H_301_3@

response.setCharacterEncoding("gbk");@H_301_3@

request.setCharacterEncoding("gbk");@H_301_3@

PrintWriter out = response.getWriter();@H_301_3@

//分页@H_301_3@

String start = request.getParameter("start");@H_301_3@

String limit = request.getParameter("limit");@H_301_3@

Connection conn=null;@H_301_3@

Statement stmt=null;@H_301_3@

PreparedStatement pstmt=null;@H_301_3@

ResultSet rs=null;@H_301_3@

String hqlsql="select count(*) from pro_order";@H_301_3@

String sql="select * from pro_order limit "+start + "," + limit;@H_301_3@

String json="";@H_301_3@

int totalOrder=0;@H_301_3@

try {@H_301_3@

conn=DBUtil.getCon();@H_301_3@

stmt=conn.createStatement();@H_301_3@

rs=stmt.executeQuery(hqlsql);@H_301_3@

while (rs.next()) {@H_301_3@

totalOrder=rs.getInt(1);@H_301_3@

}@H_301_3@

json="{totalProperty:"+totalOrder+",json.length()-1);@H_301_3@

json+="]}";@H_301_3@

out.write(json.toString());@H_301_3@

}@H_301_3@

使用Ext Grid 控件分页显示：@H_301_3@

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>@H_301_3@

<html>@H_301_3@

<head>@H_301_3@

<title>分页显示</title>@H_301_3@

@H_301_3@

@H_301_3@

</head>@H_301_3@

<body>@H_301_3@

<div id="grid"></div>@H_301_3@

</body>@H_301_3@

Ext.onReady(@H_301_3@

function(){@H_301_3@

var cm = new Ext.grid.ColumnModel([@H_301_3@

{header:'订单Id',dataIndex:'orderId',hidden:true},@H_301_3@

{header:'订单编号',dataIndex:'orderNo'},@H_301_3@

{header:'订单价格',dataIndex:'price',editable:true},@H_301_3@

{header:'创建日期',dataIndex:'createDate'}@H_301_3@

]);@H_301_3@

//存储器@H_301_3@

var store=new Ext.data.Store({@H_301_3@

proxy:new Ext.data.HttpProxy({url:"Pro_orderServlet"}),{name:'createDate'}])@H_301_3@

});@H_301_3@

var grid=new Ext.grid.EditorGridPanel({@H_301_3@

renderTo:'grid',@H_301_3@

store:store,@H_301_3@

cm:cm,@H_301_3@

loadMask:true,@H_301_3@

width:600,@H_301_3@

height:300,@H_301_3@

bbar:new Ext.PagingToolbar({@H_301_3@

pageSize:3,@H_301_3@

displayInfo:true,@H_301_3@

displayMsg:'显示第{0}到{1}行,一共有{2}条',@H_301_3@

emptyMsg:'没有记录'@H_301_3@

})@H_301_3@

});@H_301_3@

//加载存储器@H_301_3@

store.load({params:{start:0,limit:3}}); @H_301_3@

}@H_301_3@

);@H_301_3@

</script> @H_301_3@

</html>@H_301_3@

3：Ext Grid 控件的扩展功能

需求说明@H_301_3@

在任务2的基础上，添加以下功能。@H_301_3@

（1）将分页工具栏放在面板的上方，效果如图9.2.3所示。@H_301_3@

如图2.2.3 分页工具栏放在面板的上方@H_301_3@

提示：tbar:new Ext.PagingToolbar...@H_301_3@

（2）添加自动行号，效果如图2.2.4所示。@H_301_3@

图9.2.4添加自动行号@H_301_3@

（3）添加多选，效果如图2.2.5所示。@H_301_3@

图2.2.5添加多选@H_301_3@

（4）添加排序，效果如图2.2.6所示。@H_301_3@

图2.2.6 按订单编号降序排列@H_301_3@

4：Ext Grid 控件的删除 功能

训练技能点@H_301_3@

Ø使用 Ext Grid 控件实现删除@H_301_3@

需求说明@H_301_3@

（1）在上一任务的基础上，完成删除订单信息。@H_301_3@

（2）删除订单记录的提示信息，如图2.2.7所示。@H_301_3@

图2.2.7 删除订单的提示对话框@H_301_3@

（3）删除后，效果如图2.2.8所示@H_301_3@

图2.2.8 删除后的结果@H_301_3@

实现步骤@H_301_3@

（1）设计数据库表及字段。@H_301_3@

（2）使用Servlet查询订单信息、删除订单信息。@H_301_3@

（3）使用Ext Grid 分页显示Servlet查询数据。@H_301_3@

（4）使用Ext删除记录。@H_301_3@

参考代码@H_301_3@

HTML页面：@H_301_3@

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>@H_301_3@

<html>@H_301_3@

<head>@H_301_3@

<title>My JSP 'index.jsp' starting page</title>@H_301_3@

@H_301_3@

@H_301_3@

</head>@H_301_3@

<body>@H_301_3@

<div id="grid"></div>@H_301_3@

</body>@H_301_3@

Ext.onReady(function() {@H_301_3@

var sm = new Ext.grid.CheckBoxSelectionModel();@H_301_3@

//定义列 @H_301_3@

var cm = new Ext.grid.ColumnModel( [ new Ext.grid.RowNumberer,sm,{@H_301_3@

header : '订单Id',@H_301_3@

dataIndex : 'orderId',@H_301_3@

hidden : true@H_301_3@

},{@H_301_3@

header : '订单编号',@H_301_3@

dataIndex : 'orderNo'@H_301_3@

},{@H_301_3@

header : '订单价格',@H_301_3@

dataIndex : 'price',@H_301_3@

editable : true@H_301_3@

},{@H_301_3@

header : '创建日期',@H_301_3@

dataIndex : 'createDate'@H_301_3@

} ]);@H_301_3@

//定义存储器@H_301_3@

var store = new Ext.data.Store( {@H_301_3@

proxy : new Ext.data.HttpProxy( {@H_301_3@

url : "servlet/GridServlet"@H_301_3@

}),@H_301_3@

reader : new Ext.data.JsonReader( {@H_301_3@

totalProperty : 'totalProperty',@H_301_3@

root : 'root'@H_301_3@

},[ {@H_301_3@

name : 'orderId'@H_301_3@

},{@H_301_3@

name : 'orderNo'@H_301_3@

},{@H_301_3@

name : 'price'@H_301_3@

},{@H_301_3@

name : 'createDate'@H_301_3@

} ])@H_301_3@

});@H_301_3@

//创建表格 @H_301_3@

var grid = new Ext.grid.EditorGridPanel( {@H_301_3@

renderTo : 'grid',@H_301_3@

store : store,@H_301_3@

cm : cm,@H_301_3@

sm : sm,@H_301_3@

loadMask : true,@H_301_3@

width : 600,@H_301_3@

height : 150,@H_301_3@

bbar : new Ext.PagingToolbar( {@H_301_3@

pageSize : 3,@H_301_3@

displayInfo : true,@H_301_3@

displayMsg : '显示第{0}到{1}行,@H_301_3@

emptyMsg : '没有记录',@H_301_3@

items : [ {@H_301_3@

text : '添加',@H_301_3@

pressed : false@H_301_3@

},{@H_301_3@

text : '删除',@H_301_3@

pressed : false,@H_301_3@

handler : doDelete@H_301_3@

} ]@H_301_3@

})@H_301_3@

});@H_301_3@

//加载存储器@H_301_3@

store.load( {@H_301_3@

params : {@H_301_3@

start : 0,@H_301_3@

limit : 3@H_301_3@

}@H_301_3@

});@H_301_3@

//批量删除开始@H_301_3@

function doDelete() {@H_301_3@

var array = new Array();@H_301_3@

var strid = "";@H_301_3@

array = sm.getSelections();//被选中的记录存储为Record对象，用其get("")方法取值@H_301_3@

if (array.length == 0) {@H_301_3@

Ext.MessageBox.alert("错误","没有选择数据");@H_301_3@

} else {@H_301_3@

Ext.MessageBox.confirm('温馨提示','你确定要删除吗?',function(btn) {@H_301_3@

if (btn == "yes") {@H_301_3@

for ( var i = 0; i < array.length; i++) {@H_301_3@

store.remove(array[i]);@H_301_3@

//获取记录中的orderId值@H_301_3@

strid += array[i].get("orderId") + ",";@H_301_3@

}@H_301_3@

//数据库中删除@H_301_3@

//创建request对象 @H_301_3@

Ext.lib.Ajax.request('GET','servlet/DelSevrvlet?strid='+strid,@H_301_3@

{@H_301_3@

success : function(response) {@H_301_3@

Ext.MessageBox.alert('消息','删除成功',function() {@H_301_3@

grid.getStore().reload();@H_301_3@

});@H_301_3@

},@H_301_3@

failure : function(form,action) {@H_301_3@

Ext.MessageBox.alert('消息','删除失败!');@H_301_3@

}@H_301_3@

},null);@H_301_3@

}@H_301_3@

})@H_301_3@

}@H_301_3@

});@H_301_3@

</script> @H_301_3@

</html>@H_301_3@

删除Servlet代码:@H_301_3@

@Override@H_301_3@

protected void service(HttpServletRequest request,IOException {@H_301_3@

response.setContentType("text/html;charset=gbk;");@H_301_3@

//获得删除的id@H_301_3@

String json = request.getParameter("strid");@H_301_3@

String[] p = json.split(",");//获得orderId数组@H_301_3@

String orderId = "";@H_301_3@

//循环给orderId赋值@H_301_3@

for(String i:p){@H_301_3@

orderId+=i+",";@H_301_3@

}@H_301_3@

int index = orderId.lastIndexOf(",");@H_301_3@

orderId=orderId.substring(0,index);@H_301_3@

@H_301_3@

Connection conn = null;@H_301_3@

Statement stmt = null;@H_301_3@

PreparedStatement pstmt=null;@H_301_3@

String sql = "delete from pro_order where order_id in ("+orderId+")" ;@H_301_3@

System.out.println(sql);@H_301_3@

try {@H_301_3@

conn = DBConnection.getConn();@H_301_3@

stmt = conn.createStatement();@H_301_3@

stmt.executeUpdate(sql);@H_301_3@

} catch (sqlException e) {@H_301_3@

e.printStackTrace();@H_301_3@

}finally{@H_301_3@

DBConnection.closeDB(conn,null);@H_301_3@

}@H_301_3@

request.getRequestDispatcher("GridServlet").forward(request,response);@H_301_3@

}@H_301_3@

巩固练习@H_301_3@

一、选择题@H_301_3@

1. Ext JS提供了一套强大的事件处理机制，通过这些事件处理机制可以实现的功能是（）@H_301_3@

A. 响应用户的动作@H_301_3@

B. 监控控件状态变化@H_301_3@

C. 更新控件视图信息@H_301_3@

D. 与服务器进行交互@H_301_3@

2. Ext JS组件分类不包括（）@H_301_3@

A. 基本组件@H_301_3@

B. 工具栏组件@H_301_3@

C. 菜单组件@H_301_3@

D. 表单及元素组件@H_301_3@

3. Ext组件可以分为（）@H_301_3@

A. 基本组件@H_301_3@

B. 工具栏组件@H_301_3@

C. 扩展组件@H_301_3@

D. 表单及元素组件@H_301_3@

4. 在Ext组件中，window属于（）组件。@H_301_3@

A. 基本组件@H_301_3@

B. 工具栏组件@H_301_3@

C. 扩展组件@H_301_3@

D. 表单及元素组件@H_301_3@

5. Ext表格有（）类实现。@H_301_3@

A.Ext.grid.GridPanel@H_301_3@

B.Ext.table.Table@H_301_3@

C.Ext.GridPanel@H_301_3@

D.Ext.Panel@H_301_3@

二、简答题@H_301_3@

1. 什么是 Ext JS？@H_301_3@

2. Ext JS组件包括哪些？@H_301_3@

三、操作题@H_301_3@

使用Ext JS 的 Grid控件查询学校学生信息，实现选择一条或多条记录、高亮显示选择行、调整列宽、显示行号、支持复选框功能。@H_301_3@

Ext基础

1.1Ext简介

1.1.1Ext发展史

1.1.2Ext简介

1.1.3Ext类库

1.1.4Ext组件

1.1.5Ext事件

1.2Ext表格控件 Grid

1.2.1Grid特性

1.2.2简单的 Grid

1.2.3Grid 常用功能

1：Ext Grid 控件的显示功能

2：Ext Grid 控件的分页功能

3：Ext Grid 控件的扩展功能

4：Ext Grid 控件的删除功能

猜你在找的Ajax相关文章