下载文档原格式
ExtJS 配置和表格控件使用ExtJS是一套AJAX控件，本人认为，它是目前我见过最好最美的JS控件库，所以非常有学习和使用价值，如果你还没有接触过ExtJS或者压根对其不感兴趣，那么没有必要看下去了。
ExtJS是一套完整的RIA解决方案，也因为功能完整造成了ext-all.js有400多k,由于是基于JS和CSS的功能实现，对客户端机器性能也有一定的要求，即不支持IE6以下的版本。
如果您的项目对网页响应时间有严格的限制，或者客户端操作系统过于陈旧，一定不要选择ExtJS。
本文主要是介绍ExtJS的下载和配置以及一些简单的使用方法。
目前最新版本为3.0，但是本文主要介绍2.2版本。
一、 ExtJS下载以及配置1、下载地址：/(这是官网，大家可以选择自己喜欢的版本下载)2、配置过程，假设下载后的目录为Ext,我们在该目录下建立我们自己的目录MyExample(该目录用于存放你自己写的代码)，配置过程如下：(1) 新建一个页面文件Helloworld.html(2) 在<head>和</head>之间添加如下代码：代码如下:<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" /><script type="text/javascript" src="../adapter/ext/ext-base.js"></script><script type="text/javascript" src="../ext-all.js"></script><script type="text/javascript">Ext.onReady(function(){Ext.MessageBox.alert('HelloWorld','Hello World');})</script>(3) 这里注意<script></script>不能用</script>取代(4) js的导入顺序不要更改(3) 如果弹出一个HelloWorld的对话框，则代表配置成功。
序言ExtJS是一个很不错的Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力。
ExtJS是一个用javascript编写，与后台技术无关的前端ajax框架。
因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。
最近我们在几个应用都使用到了ExtJS，对公司以前开发的一个OA系统也正在使用ExtJS2.0进行改造，使得整个系统在用户体验上有了非常大的变化。
本教程记录了前段时间本人学习ExtJS的一些心得及小结，希望能帮助正在学习或准备学习ExtJS的朋友们快速走进ExtJS2.0的精彩世界。
教程包括ExtJS的新手入门、组件体系结构及使用、ExtJS中各控件的使用方法及示例应用等，是一个非常适合新手的ExtJS入门教程。
本教程主要是针对ExtJS2.0进行介绍，全部代码、截图等都是基于ExtJS2.0。
在学习了本教程后，可以下载这个基于ExtJS2.0开发的单用户Blog系统的源代码，这个系统是我们团队中的williamraym与大峡等人开发的一个演示系统，系统源码整体质量比较高，通过学习这套源代码相邻一定能提高您ExtJS的综合水平。
本教程比较适合ExtJS的新手作为入门教程及手册使用，并在我的博客/blog/lengyu/上进行发布；应一些朋友的要求，根据本教程的写作思路，我还编写了比本教程更为详细的《ExtJS实用开发指南》，包含详细的ExtJS框架使用方法、各个控件详细配置参数、属性、方法及事件介绍，与服务器端集成及一个完整的示例应用系统介绍等内容，适合想深入学习ExtJS或正在使用ExtJS进行开发朋友们使用。
该《指南》当前在作为VIP文档发布，供该站的VIP用户阅读及下载。
凡是购买了《ExtJS 实用开发指南》文档的VIP用户，都可以在该指南印刷版出版后均会免费得到相应的印刷版本。
最后，希望广大网友把阅读本教程中的发现的错误、不足及建议等反馈给我们，让我们一起共同学习、共同进步，下面让我们一起进入精彩的ExtJS世界吧。
基于Extjs的web表单设计器第六节基于Extjs的web表单设计器基于Extjs的web表单设计器第一节基于Extjs的web表单设计器第二节——表单控件设计基于Extjs的web表单设计器第三节——控件拖放基于Extjs的web表单设计器第四节——控件拖放基于Extjs的web表单设计器第五节——数据库设计基于Extjs的web表单设计器第六节——界面框架设计基于Extjs的web表单设计器第七节——取数公式设计基于Extjs的web表单设计器第八节——表单引擎设计这一节我给大家介绍一下表单设计器的界面框架设计（这一节距上一节时间有点长了，还望见谅）。
这一节的内容比较简单，主要是结合表单设计器的实际情况介绍一些ext前端界面布局、设计的方式，熟悉ext框架或者常用控件布局的人可以略过。
我们使用的前端框架是Ext，因此表单设计器的前端界面设计都是基于Ext展开。
设计器的总体设计方案为：1.打开设计器后第一层级展现的是目前已有的模板列表信息的一个grid，grid中包含了当前登录所具有操作表单模板的权限。
如（新增模板，编辑模板，发布模板，删除模板，停用模板等功能.）2.选择“新增模板”后，在填出的界面填入必要的模板信息然后“确定”后就会进入设计时界面；此时的设计时界面将会为我们产生一个全新的表单模板画布区域，等待你的设计；3.选中现有的某个模板点击“编辑模板”后，同样会进入设计时界面；此时的设计时界面将会为我们加载并生产该模板已有的表单区域及表单项信息；4.其他操作都不会进入我们的设计时界面；5.设计时界面采用类似Visual Studio 的设计器界面，主要分为左、中、右三个区域。
左侧为控件区域、中间为表单的画布设区域、右侧为属性区域（具体可以参考本系列的开篇的图样）。
基于上面的设计方案，在Ext我们可以采用这样的界面布局方式，第一级panel使用cardlayout，包含一个已有模板列表的grid和另外一个设计时的panel，设计时panel采用左中右的布局方式我们一般使用borderLayout来完成布局。
ExtJS中表格控件的使用，属性设置和数据的获取ExtJS中表格的特性简介表格由类Ext.grid.GridPanel定义，继承自Ext.Panel，xtype为grid表格的列信息由Ext.grid.ColumnModel定义表格的数据存储器由Ext.data.Store定义，根据解析数据的不同，数据存储器可具体分为如下几种：JsonStore，SimpleStore，GroupingStore…一个表格的基本编写过程：1、创建表格列模型var cm = new Ext.grid.ColumnModel({{header: '角色', dataIndex: 'role'},{header: '等级', dataIndex: 'grade'},{header: '创建日期', dataIndex: 'createDate', type: 'date', renderer: Ext.util.Format.dateRenderer('Y年m月d日')} //创建日期类型的数据});2、创建数据数组var data = [['士兵','7','2011-07-2412:34:56'],['将军','10','2011-07-2412:34:56'],];3、创建一个数据存储对象store，包含两部分：proxy，获取数据的方式；reader，解析数据的方式ArrayReader的mapping用来设置列的排列顺序var store = new Ext.data.Store({proxy: new Ext.data.MemoryProxy(data),reader: new Ext.data.ArrayReader({}, [{name: 'role', mapping: 1},{name: 'grade', mapping: 0}{name: 'createDate', mapping: 2, type:'date', dateFormat:'Y-m-dH:i:s'} //创建日期列和显示格式])});store.load();4、创建GridPanel，装配ColumnModel和storevar grid = new Ext.grid.GridPanel({renderTo: 'grid',store: store,cm: cm});另外获取远程数据可以使用ScriptTagProxy,如下所示var store = new Ext.data.Store({proxy: new Ext.data.ScriptTagProxy({url:'http://...'}),reader: new Ext.data.ArrayReader({}, [{name: 'role', mapping: 1},{name: 'grade', mapping: 0}]),sortInfo: {field: "role", direction: "ASC"} //设置默认排序列，ASC/DESC });表格的常用属性功能var grid = new Ext.grid.GridPanel({enableColumnMove: false, //禁止拖放列enableColumnResize: false, //禁止改变列的宽度stripeRows: true, //斑马线效果loadMask: true, //读取数据时的遮罩和提示功能renderTo: 'grid',store: storecm: cm});var cm = new Ext.grid.ColumnModel({{header: '角色', dataIndex: 'role', width:90, sortable: true}, //width 设置列宽度，默认为100px，sortable设置排序功能{id:'grade', header: '等级', dataIndex: 'grade', width:40}});var grid = new Ext.grid.GridPanel({renderTo: 'grid',store: store,cm: cmviewConfig:{ //让每列自动填充满表格forceFit: trueautoExpandColumn: 'grade' //自动延伸列，列的id在ColumnModel中定义});渲染表格，为表格设置特殊样式只需要在cm里面增加一个renderer属性，添加一个自定义函数来渲染传进来（由EXT自动传递）的参数的样式即可，即在返回value之前拼装上相应的HTML和CSS或者JS响应事件。
EXTJS4.0 gridpanel 用法笔记～～可编辑的grid varCellEditing = Ext.create('Ext.grid.plugin.CellEditing', { // 列编辑模式 clicksToEdit : 1, //单击编辑单元格修改autoCancel : false});varRowEditing = Ext.create('Ext.grid.plugin.RowEditing', { // 行编辑模式clicksToMoveEditor : 1, //双击编辑整行修改autoCancel : false});Ext.define('cmodel', { //编辑状态下,状态列的下拉菜单的model extend : 'Ext.data.Model',fields : [ {name : 'STATE',type : 'string'} ]});var states = [ { //编辑状态下,状态列的下拉菜单的data"STATE" : "0"}, {"STATE" : "1"}, {"STATE" : "2"} ]varcstore = Ext.create('Ext.data.Store', { //编辑状态下,状态列的下拉菜单的store model : 'cmodel',data : states});Ext.define('model', { //表格Modelextend : 'Ext.data.Model',fields : [ {name : 'ID',type : 'string'}, {name : 'TIME',type : 'date',dateFormat : 'Y-m-d'}, {name : 'STATE',type : 'string'} ]});var store = Ext.create('Ext.data.Store', { //表格storemodel : 'unitun',proxy : {type : 'ajax',url : '',reader : {type : 'json',root : 'root'}}});// 创建机组表格var grid = Ext.create('Ext.grid.Panel', {region : 'center',store : store,width : document.body.clientWidth - 200,columnLines : true, //true为显示列的分割线layout : { //layout样式用法和swing差不多,常用的就是border. 这里的hbox用在列宽度的设定应该是最好的. flex:1表示一份type : 'hbox',align : 'stretch'},columns : [ {header : '编号',flex : 1,sortable : true,editor : {allowBlank : false //是否允许为空,默认编辑状态下都是文本框,如果需要别的,需指定xtype类型,见时间和状态列},dataIndex : 'ID'}, {header : '时间',flex : 1,sortable : true,renderer : Ext.util.Format.dateRenderer('Y-m-d'), //指定时间的转换格式field : {xtype : 'datefield', //指定编辑状态下为日期类型allowBlank : false, //是否为空editable : false, //是否可以输入format : 'Y-m-d',maxvalue : Ext.Date.format(new Date(), 'Y-m-d') //设定最大值为当前时期.最小为minvalue 默认为value.输入必须符合日期类型},dataIndex : 'TIME'}, {header : '状态',flex : 1,sortable : true,editor : {xtype : 'combobox', //指定编辑状态下为下拉菜单store : state, //绑定下拉菜单数据源editable : false, //是否可以输入displayField : 'STATE',queryMode : 'local', //local指定为本地数据如果是后台传输值为remoteallowBlank : false},dataIndex : 'STATE'} ],plugins : [ CellEditing ], //绑定编辑对象 viewConfig : {forceFit : true,scrollOffset : 0}});。
ExtGrid 2.0控件使用手册1、如何使用ExtGrid控件？---- 完整示例讲解1.1、显示数据1.1.1 aspx代码，指定控件高度和宽度<cc2:ExtGrid ID="extStudent"runat="server"Height="300px"Width="960px"/>1.1.2 加载数据，并指定列的编辑器（可用编辑器参考表格[可用编辑器类型]）'Get the data source what you want to bind to the ExtGridDim dt As DataTable = DALExtGrid.GetStudents().Tables(0)'Get the data source what you want to bind to the ComboBox of the Country column Dim dtCountry As DataTable = DALExtGrid.GetCountryCodeAndName().Tables(0)'Get the data source what you want to bind to the ComboBox of the City column Dim dtCity As DataTable = DALExtGrid.GetCityCodeAndName().Tables(0)'Get the data source what you want to bind to the ComboBox of the Sex column Dim dtSex As DataTable = Me.InitColDataTable()'Set The ExtGrid's data sourceMe.extStudent.DataSource = dt'Add all of the columns you want to show to client in Ext Grid.Me.extStudent.Columns.Add("Student Name", "Name", 160, _New ExtGrid.ExtEditor.TextField())Me.extStudent.Columns.Add("Sex", "Sex", 60, _New boBox("code", _"name", Me.InitColDataTable()))Me.extStudent.Columns.Add("Seat No.", "SeatNo", 60, _New ExtGrid.ExtEditor.NumberField("seatNo", False))Me.extStudent.Columns.Add("Country", "Country", 120, _New boBox("Country", "CountryCode", _"CountryName", dtCountry))Me.extStudent.Columns.Add("City", "City", 120, _New boBox("City", "CityCode", "CityName", dtCity))Me.extStudent.Columns.Add("E-mail", "Email", 180, _New ExtGrid.ExtEditor.TextField())Me.extStudent.Columns.Add("Born Date", "BornDate", _120, ExtColumnAlignType.Left, _New ExtGrid.ExtEditor.DateField("bornDate", "d-M-Y"), "renderDate")Me.extStudent.Columns.Add("Mark", "Mark", 60, _New ExtGrid.ExtEditor.NumberField())Me.extStudent.Columns.Add("Is Active", "Active", 60,ExtColumnAlignType.Center, _New ExtGrid.ExtEditor.CheckBox(), "renderBoolean")1.1.3、页面效果图1.2、添加新记录，并设置默认值1.4.1、点击New Line按扭时添加新记录onclick="extStudent.addRow();"1.4.2、指定设置默认值的方法<cc2:ExtGrid ID="extStudent"runat="server"Height="300px"Width="960px"AfterAddRow="afterAddLine"/>function afterAddLine(record){record.set("Name","小傅");record.set("Active",true);}1.3、删除已有行，删除前检查是否可被删除1.3.1、点击Delete Line按扭时删除记录onclick="extStudent.deleteRow();"1.3.2、指定删除前检查数据可否被删除的方法, 返回false 则取消删除<cc2:ExtGrid ID="extStudent"runat="server"Height="300px"Width="960px"AfterAddRow="afterAddLine" BeforeDeleteRow="beforeDeleteLine"/>function beforeDeleteLine(record){if(record.data["Active"]){alert("You can not delete this record which 'Is Actived' is true!");return false;}}1.4、验证数据有效性验证数据可根据需求在两个地方做，一个是在单元格编辑完成时验证单元格的数据是否有效，如果无效可取消对该次对单元格的编辑。
Grid.js页面space("test.grid");/*store最少需要两个参数 1 DataProxy 用于访问一个数据连接2 reader 主要有三个实现类Ext.data.JsonReader or XMLReader or ArrayReader* 其中JsonReader用于接受一个Json响应后（即DataProxy响应的数据）创建一个Record对象组成的数组。
* 数组内的每个对象都是EXt.Data.Record 映射的结果（即Json数据与页面显示列的对应关系 *///1 DataProxy的生成var proxy_url ='data.jsp';//创建URL访问类var _proxy =new Ext.data.HttpProxy({url:proxy_url});//数据问题参数var _jsonProperty="totalProperty";//数据根目录参数var _jsonRoot ="root";//Record显示列表对应关系var _record = [{name:'name',mapping:'name'},{name:'sex',mapping:'sex'},{name:'age',mapping:'age'},{name:'code',mapping:'code'}];//创建JSONReader对象,需要设置记录总数，根目录名称，记录映射var _reader =newExt.data.JsonReader({idProperty:'name',totalProperty:_jsonProperty,root :_jsonRoot},_record);/***封装了一个客户端的Record对象缓存。
如有你有帮助，请购买下载，谢谢！《ExtJS2.0 实用简明教程》之可编辑表格 EditorGridPanel可编辑表格是指可以直接在表格的单元格对表格的数据进行编辑，ExtJS 中的可编辑表格由类，xtype 为 editorgrid。
使用 EditorGridPanel 与使用普通的 GridPanel 方式一样，区别只是在定义列信息的时候，可 以指定某一列使用的编辑即可，下面来看一个简单的示例。
Ext.onReady(function(){ var data=[{id:1, name:'小王', email:'', sex:'男', bornDate:'1991-4-4'}, {id:1, name:'小李', email:'', sex:'男', bornDate:'1992-5-6'}, {id:1, name:'小兰', email:'', sex:'女', bornDate:'1993-3-7'} ]; var store=new data:data, fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}] }); var colM=new header:"姓名", dataIndex:"name", sortable:true, editor:new , {header:"性别", dataIndex:"sex" }, {header:"出生日期", dataIndex:"bornDate", width:120, renderer:, {header:"电子邮件", dataIndex:"email", sortable:true, editor:new ]);1页如有你有帮助，请购买下载，谢谢！var grid = new renderTo:"hello", title:"学生基本信息管理", height:200, width:600, cm:colM, store:store, autoExpandColumn:3 }); });上面的程序首先定义了一个包含学生信息的对象数组，然后创建了一个 JsonStore，在创建这个 store 的时候，指定 bornDate 列的类型为日期 date 类型，并使用 dateFormat 来指定日期信息的格式为"Y-n-j"， Y 代表年，n 代表月,j 代表日期。
Editor Grids（可编辑表格）在之前的一章中我们学习了如何在结构化的表格中显示用户可操作的数据。
但是，这种表格有一个最大的限制，那就是用户无法自己编辑表格中的数据。
幸运的是，Ext提供了EditorGridPanel这一控件，它支持用户对表格进行编辑——我们现在就对这一控件进行学习。
它的工作形式类似于Excel，允许用户在点击单元格后进行数据的编辑操作。
在这章里，我们将会学到：∙为用户提供连接到data store的可编辑表格；∙把编辑后的数据发给服务器，允许用户通过ExtJS的editor grid更新服务器端的数据；∙通过编码操控grid并对事件做出相应；∙教给你一些高级的格式化小窍门并且让您建立更加强大的editor grid。
但是，首先，我们要看看可以用可编辑表格能够做什么事情。
我们能用可编辑表格做什么？EditorGridPanel和我们之前使用到的表单（form）很相似。
实际上，editor gird使用了和form中完全一样的表单字段。
通过使用表单字段来实现对grid单元格进行编辑，我们可以充分利用表单字段提供的同样的功能。
包括输入约束以及数值验证等。
把它和Ext的GridPanel联合起来，就造就了可以满足我们任何需求的漂亮的控件。
这个表格中的所有字段都可以被编辑，如同使用表格字段中的text field（文本字段）、date picker（日期选择器）、combo box（组合框/下拉菜单）一般。
使用可编辑的表格：可编辑和不可编辑表格的区别十一个相当简单的开始的过程。
复杂的使我们需要处理编辑状态然后传回服务器。
但是一旦你学会了如何去做，这部分也就同样变得相当的简单。
让我们先看看如何把第五章开头部分的表格升级到可以编辑电影标题（title）、导演（director）、和标语（tagline）。
修改后的代码如下所示：var title_edit = new Ext.form.TextField();var director_edit = new Ext.form.TextField({vtype: 'name'});var tagline_edit = new Ext.form.TextField({maxLength: 45});var grid = new Ext.grid.EditorGridPanel({renderTo: document.body,frame:true,title: 'Movie Database',height:200,width:520,clickstoEdit: 1,store: store,columns: [{header: "Title", dataIndex: 'title',editor: title_edit},{header: "Director", dataIndex: 'director',editor: director_edit},{header: "Released", dataIndex: 'released',renderer:Ext.util.Format.dateRenderer('m/d/Y')},{header: "Genre", dataIndex: 'genre',renderer: genre_name},{header: "Tagline", dataIndex: 'tagline',editor: tagline_edit}]});为了让grid可编辑，我们需要做四件事情。
它们是：∙表格的定义由Ex.grid.GridPanel转化为Ext.grid.EditorGridPanel；∙为grid的配置添加clicksToEdit——这个选项不是必须的，默认双击触发编辑；∙为每列建立一个表单字段用来编辑；通过editor配置把表单字段传递给column model。
editor可以是ExtJS中的任何表单字段，或者是你自定义的字段。
我们先从建立文本字段编辑电影标题开始。
var title_edit = new Ext.form.TextField();然后，我们利用editor配置向column model添加表单字段：{header: "Title", dataIndex: 'title', editor: title_edit}接下来把GridPanel组件改为EditorGridPanel，然后添加clicksToEditor配置：var grid = new Ext.grid.EditorGridPanel({renderTo: document.body,frame:true,title: 'Movie Database',height:200,width:520,clickstoEdit: 1,// removed extra code for clarity})通过进行这些改变，静态的表格就变为了可编辑的表格，我们可以通过点击任何建立了editor的字段来进行编辑。
我们看到了有的电影标题发生了改变，把他们变成了音乐剧(musical)。
editor （编辑器）只需你单击便可被激活。
按下Enter、Tab键或者在该字段外点击鼠标都可以保存改动。
按下Esc键可以放弃改动。
它和表单字段的工作方式很想象……因为……它本身就是个表单字段。
左上角的红色标记表示这个单元格是“dirty”的，即我们只是做了暂时的改动（还没有被提交）。
首先，让我们做一些更复杂的可编辑单元格。
编辑更多单元格中的数据：对于我们基本的editor grid，我们从使单独的列可编辑开始。
为了建立editor （编辑器），我们建立了对表单字段的引用：var title_edit = new Ext.form.TextField();然后我们把这个表单字段当做列中的editor使用：{header: "Title", dataIndex: 'title', editor: title_edit}这就是对每个字段的基本要求，现在让我们扩展一下知识。
使用更多的类型的字段进行编辑：现在我们利用其它的表单字段来建立editor。
不同的数据类型有不同的editor 与之对应，每一种字段也有着不同的配置。
所有类型的字段都可以被用来充当editor，这里列出一些标准的类型：∙TextField∙NumberField∙ComboBox∙DateField∙TimeField∙CheckBox这些editor可以被拓展，从而满足各种编辑需求，但是现在，我们先从编辑电影表格的字段开始——release date（发行日期）列和genre列。
编辑日期数值：对于release date（发行日期）一列中的单元格我们可以通过使用DateField进行编辑。
我们先得建立编辑字段并且提供相应格式字符串：release_edit = new Ext.form.DateField({format: 'm/d/Y'});接下来我们可以把这个editor应用到列中，采用的方式仍然是之前提及的renderer：{header: "Released", dataIndex: 'released', renderer:Ext.util.Format.dateRenderer('m/d/Y'), editor: release_edit}这个列还是利用了renderer，renderer和editor将同时共存。
当editor被激活后，renderer就会对editor进行渲染等操作。
所以当我们完成编辑后，renderer将会进行对该字段的格式化操作。
利用ComboBox编辑：让我们为genres列建立一个editor，用来提供一个显示合法的genres的下拉列表——听起来很适合采用combo box。
var genre_edit = new boBox({typeAhead: true,triggerAction: 'all',mode: 'local',store: genres,displayField:'genre',valueField: 'id'});简单的把这个editor添加到column model中：{header: "Genre", dataIndex: 'genre', renderer: genre_name, editor: genre_edit}效果如下：对单元格编辑做出反应：当然，我们需要指出如何保存编辑后的结果。
用户不会愿意丢弃所有改动的。
我们可以通过监听特殊的编辑事件来进行保存，然后通过自定义的函数来对它们做出反应。
在我们开始编码前，我们需要了解editor grid的工作方式。
什么是dirty cell（脏单元格）？当一个字段被编辑后而且它的值被改动，这时候我们可以称之为dirty（脏），除非data store得知改到并做保存改动，否则它将一直处于dirty的状态。
这个“dirty”的值被保存在一个暂时的data store中，这个暂时的data store保存了包含所有改动的一个数据版本。
我们的本来的那个data store依然保持不变。
我们可以通过调用commit函数来保存改动，或者通过reject函数来忽略改动。
这些函数可以为整个表格或者某个单元格所调用，或者作为某一事件的结果。
让我们把e想象为一个edit（编辑）事件对象。
我们可以拒绝改动一条记录通过调用reject函数：e.record.reject();或者，我们可以通过提交来保存改动：mit();当编辑发生时进行反应：为了把改动保存到data store，我们将要监听编辑完成这一事件，这一事件的名称叫做afteredit（编辑完成之后）：var grid = new Ext.grid.EditorGridPanel({// more config options clipped //,title: 'Movie Database',store: store,columns: // column model clipped //,listeners: {afteredit: function(e){if (e.field == 'director' && e.value == 'Mel Gibson'){Ext.Msg.alert('Error','Mel Gibson movies not allowed');e.record.reject();}else{mit();}}}});和其它的listener（监听器）一样，editor grid的listener提供了一个当事件发生时执行的函数。
