当前位置：
→ extjs学习笔记（六) grid中数据的保存，添加和删除
extjs学习笔记（六) grid中数据的保存，添加和删除[多图]
字体大小：【 |
　　在上一个系列当中，我们学习了如何
对grid中的内容执行
编辑，但是编辑的结果我们并没有保存，这在实际的运用
中是没有什么意义的。在有些情况下，除了编辑之外，还要通过grid执行
数据的添加
和删除，这两个操作也涉及到对于数据的保存。在这个系列里边，我们将学习如何
保存数据以及通过grid对数据执行
和删除。　　我们在前边的学习流程
中已经知道，grid其实只是显示数据，它通过配置参数store来获得数据，这个参数须要
的是Store类或者其子类的一个对象，里边封装了我们须要
的数据。我们现在应该已经比较熟悉Store类了，这次我们须要
它的一个属性modified，里边保存了被修改过的记录的集合。我们通过把上个系列中的例子改动
一下来看看如何
保存数据：　　1///&reference　path="vswd-ext_2.0.2.js"　/&　　2/**//*　　3*作者：大笨　　4*日期：　　5*版本：1.0　　6*博客地址：http://yage.cnblogs.com　　7*QQ：　　8*/　　9Ext.BLANK_IMAGE_URL　=　'../extjs/resources/images/default/s.gif';　10　11Ext.onReady(function()　{　12　　　　Ext.QuickTips.it();　13　14　　　　//格式化日期　15　　　　function　formatDate(value)　{　16　　　　　　　　return　value　?　value.dateFormat('Y年m月d日')　:　'';　17　　　　}　18　19　　　　//　别名　20　　　　var　fm　=　Ext.　21　22　　　　//构造一个只能包含checkbox的列　23　　　　var　checkColumn　=　new　Ext.grid.CheckColumn({　24　　　　　　　　header:　'Indoor?',　25　　　　　　　　dataIndex:　'indoor',　26　　　　　　　　width:　55　27　　　　});　28　29　　　　//　构造ColumnModel　30　　　　var　cm　=　new　Ext.grid.ColumnModel({　31　　　　　　　　columns:　[{　32　　　　　　　　　　　　id:　'common',　33　　　　　　　　　　　　header:　'Common　Name',　34　　　　　　　　　　　　dataIndex:　'common',　35　　　　　　　　　　　　width:　220,　36　　　　　　　　　　　　//　运用
上边定义好的别名　37　　　　　　　　　　　　editor:　new　fm.TextField({　38　　　　　　　　　　　　　　　　allowBlank:　false　39　　　　　　　　　　　　})　40　　　　　　　　},　{　41　　　　　　　　　　　　header:　'Light',　42　　　　　　　　　　　　dataIndex:　'light',　43　　　　　　　　　　　　width:　130,　44　　　　　　　　　　　　editor:　new　fm.ComboBox({　45　　　　　　　　　　　　　　　　typeAhead:　true,　46　　　　　　　　　　　　　　　　triggerAction:　'all',　47　　　　　　　　　　　　　　　　transform:　'light',　48　　　　　　　　　　　　　　　　lazyRender:　true,　49　　　　　　　　　　　　　　　　listClass:　'x-combo-list-small'　50　　　　　　　　　　　　})　51　　　　　　　　},　{　52　　　　　　　　　　　　header:　'Price',　53　　　　　　　　　　　　dataIndex:　'price',　54　　　　　　　　　　　　width:　70,　55　　　　　　　　　　　　align:　'right',　56　　　　　　　　　　　　renderer:　'usMoney',　57　　　　　　　　　　　　editor:　new　fm.NumberField({　58　　　　　　　　　　　　　　　　allowBlank:　false,　59　　　　　　　　　　　　　　　　allowNegative:　false,　60　　　　　　　　　　　　　　　　maxValue:　100000　61　　　　　　　　　　　　})　62　　　　　　　　},　{　63　　　　　　　　　　　　header:　'Available',　64　　　　　　　　　　　　dataIndex:　'availDate',　65　　　　　　　　　　　　width:　95,　66　　　　　　　　　　　　renderer:　formatDate,　67　　　　　　　　　　　　editor:　new　fm.DateField({　68　　　　　　　　　　　　　　　　format:　'Y年m月d日',　69　　　　　　　　　　　　　　　　minValue:　'01/01/06',　70　　　　　　　　　　　　　　　　disabledDays:　[0,　6],　71　　　　　　　　　　　　　　　　disabledDaysText:　'Plants　are　not　available　on　the　weekends'　72　　　　　　　　　　　　})　73　　　　　　　　},　74　　　　　　　　checkColumn,　75　　　　],　76　　　　　　　　defaults:　{　77　　　　　　　　　　　　sortable:　true　78　　　　　　　　}　79　　　　});　80　81　82　　　　//　构造一个Store对象　83　　　　var　store　=　new　Ext.data.Store({　84　85　　　　　　　　url:　'plants.xml',　86　87　　　　　　　　reader:　new　Ext.data.XmlReader(　88　　　　　　　　　　　　{　89　　　　　　　　　　　　　　　　record:　'plant'　90　　　　　　　　　　　　},　91　92　　　　　　　　　　　　[　93　　　　　　　　　　　　　　　　{　name:　'common',　type:　'string'　},　94　　　　　　　　　　　　　　　　{　name:　'botanical',　type:　'string'　},　95　　　　　　　　　　　　　　　　{　name:　'light'　},　96　　　　　　　　　　　　　　　　{　name:　'price',　type:　'float'　},　97　　　　　　　　　　　　　　　　{　name:　'availDate',　mapping:　'availability',　type:　'date',　dateFormat:　'm/d/Y'　},　98　　　　　　　　　　　　　　　　{　name:　'indoor',　type:　'bool'　}　99　　　　　　　　　　　　]100　　　　　　　　),101102　　　　　　　　sortInfo:　{　field:　'common',　direction:　'ASC'　}103　　　　});104105　　　　//　构造可编辑的grid106　　　　var　grid　=　new　Ext.grid.EditorGridPanel({107　　　　　　　　store:　store,108　　　　　　　　cm:　cm,109　　　　　　　　renderTo:　'grid',110　　　　　　　　width:　600,111　　　　　　　　height:　300,112　　　　　　　　autoExp
andColumn:　'common',113　　　　　　　　title:　'Edit　Plants?',114　　　　　　　　frame:　true,115　　　　　　　　plugins:　checkColumn,116　　　　　　　　clicksToEdit:　1,117　　　　　　　　listeners:　{118　　　　　　　　　　　　"afterEdit":　{119　　　　　　　　　　　　　　　　fn:　afterEdit,120　　　　　　　　　　　　　　　　scope:　this121　　　　　　　　　　　　}122　　　　　　　　},123　　　　　　　　tbar:　[{124　　　　　　　　　　　　text:　"保存",125　　　　　　　　　　　　handler:　function()　{126　　　　　　　　　　　　　　　　var　modified　=　store.127　　　　　　　　　　　　　　　　updateData(modified);128　　　　　　　　　　　　}129　　　　　　　　}]130　　　　});131132　　　　//　触发数据的加载133　　　　store.load();134135　　　　//发送数据到服务器端执行
更新136　　　　function　updateData(modified)　{137　　　　　　　　var　json　=　[];138　　　　　　　　Ext.each(modified,　function(item)　{139　　　　　　　　　　　　json.push(item.data);140　　　　　　　　});141　　　　　　　　if　(json.length　&　0)　{142　　　　　　　　　　　　Ext.Ajax.request({143　　　　　　　　　　　　　　　　url:　"EditGrid.aspx",144　　　　　　　　　　　　　　　　params:　{　data:　Ext.util.JSON.encode(json)　},145　　　　　　　　　　　　　　　　method:　"POST",146　　　　　　　　　　　　　　　　success:　function(response)　{147　　　　　　　　　　　　　　　　　　　　Ext.Msg.alert("信息",　"数据更新成功！",　function()　{　store.reload();　});148　　　　　　　　　　　　　　　　},149　　　　　　　　　　　　　　　　failure:　function(response)　{150　　　　　　　　　　　　　　　　　　　　Ext.Msg.alert("警告",　"数据更新失败，请稍后再试！");151　　　　　　　　　　　　　　　　}152　　　　　　　　　　　　});153　　　　　　　　}154　　　　　　　　else　{155　　　　　　　　　　　　Ext.Msg.alert("警告",　"没有任何须要
更新的数据！");156　　　　　　　　}157　　　　}158159　　　　//编辑后触发的事件，可在此执行
数据有效性的验证160　　　　function　afterEdit(e)　{161　　　　　　　　if　(e.field　==　"common")　{162　　　　　　　　　　　　if　(e.value　==　"大笨")　{163　　　　　　　　　　　　　　　　Ext.Msg.alert("不正确
",　"大笨是人物不是植物",　function()　{　grid.startEditing(e.row,　e.column)　});164　　　　　　　　　　　　}165　　　　　　　　}166　　　　}167});
[1]&&&&&&&&使用grid显示数据（1）；毫无疑问，grid是Ext中使用最广泛的组件之一；方式为最终用户展现我们的数据，电子表格就是这种方；在这一章中我们会：；?使用GridPanel来在用户友好的表格中展示；我们将说明如何定义表格的行和列，但是更为重要的是；格更为美观；到底什么是表格？；Ext的表格和电子表格相似，包含2个重要的部分：；在这里，我们的列是：Title,
使用grid显示数据（1） 毫无疑问，grid是Ext中使用最广泛的组件之一。我们需要以一种易于理解的方式为最终用户展现我们的数据，电子表格就是这种方式之一，而且相当完美――应为它做到了，并且让这一观念深入人心。Ext 接受了该观点，并使得它更加灵活而且奇妙。 在这一章中我们会： ? 使用GridPanel来在用户友好的表格中展示结构化的数据； ? 从服务器或数据库加载数据显示在表格中； ? 使用表格提供的事件来控制表格的功能和显示； ? 在表格中采用高级的数据格式化技术； ? 建立分页表格。 我们将说明如何定义表格的行和列，但是更为重要的是，我们将学习如何使表格更为美观。我们可以添加自定义渲染的单元格，并且在其中添加图片，我们还可以根据数据值来改变显示样式。 到底什么是表格？ Ext的表格和电子表格相似，包含2个重要的部分： ? 行 ? 列
在这里，我们的列是：Title, Released, Genre, 和 Price。每一行包含像The Big Lebowski, Super Troopers之类的电影。这些行都是我们的数据；表格中的每一行代表数据中的一条记录。
在GridPanel中显示结构化的数据： 在表格中显示数据需要两个Ext组件： ?
store――像数据库一样，追踪要显示的数据； ? 表格面板――提供展现store中数据的方式。 在我们开始来实现这些之前，让我们先来看看将被我们使用到的术语，因为这些术语可能会把我们搞糊涂： ?
Columns（列）：它引用整个数据列，包含显示数据有关的信息，包括列的head（列标题），在ExtJS中，这些都是Column Model（列模型）的一部分； ?
Fields（字段）：它也引用了真个数据列，但是它引用的是实际的数值。在ExtJS里，它被在reader（Ext读取数据的组件）中，用来加载数据。 建立data store（数据容器）：
我们需要做的第一件事就是建立我们的数据，它将会被放到data store之中。data store有不同的类型，可以让我们读取不同形式的数据（XML，JSON等等），并且可以在不同的Ext控件中来完成读取数据的过程。不管数据是JSON，XML还是数组，甚至是我们自己自定义的数据类型，我们都可以通过相同的方式访问，这要感谢data store。 下面是一些Ext中默认的data store类型： ? Simple (Array)（数组） ? XML ? JSON
A custom data store could be created to read data that does not fit into thesecategories.
可以创建自定义的data store来读取其他类型的数据。Ext论坛提供了一些用户贡献的data store，例如CSV和ColdFusion形式的数据。 在data store中添加数据： 初次尝试，我们将建立一个以本地数组为数据源的表格。接下来我们使用到的数据来自一个小的电影数据库，其中包含了一些我最喜爱的电影，这与这章后面用到的来自真实数据库的数据很相似。 The data store needs two things: the data itself, and a description of the data―or what could be thought of as the fields. data store需要两个东西：数据本身和数据描述――如同字段以及其它你能想到的类似的东西。 reader（读取器）读取器将被用来读取来自数组的数据，在其中我们会定义数组数据的字段名（field）。读取器相当于一个翻译，它将数据字符串翻译为一行一行的数据来供Ext使用。 接下来的代码应该被放到Ext的OnReady函数内部： var store = new Ext.data.Store({
] \\1, \\1 3, \\\1, \\1 //...more rows of data removed for readability...// reader: new Ext.data.ArrayReader({id:'id'}, [
'id', 'title', 'director', {name: 'released', type: 'date', dateFormat: 'Y-m-d'}, 'genre', 'tagline', 'price', 'available'
}); ] 如果我们在浏览器中查看这段代码，我们不会看到任何东西――因为data store只是用来加载并跟踪数据的一种方式。现在浏览器的内存中已经有我们的数据了。现在我们只需要决定怎样将它显示给用户。 为data store定义数据： reader需要知道从数据存储器中读取哪些字段，所以我们需要定义这些字段。 字段使用由对象组成的数组来定义――如果数据被挨个读取，那么只需要指定这个字段的名称就可以了。在这个例子中，除了一个字段，其他的都可以通过简单的命名来定义。 举个例子，标题字段可以用如下的对象来定义： {name: 'title'} 然而，在我们的用例中，因为我们仅仅把这个字段以一个字符串的形式读取，我们可以简单的定义这个字段的名称以减少一些输入： 'title' released 字段很特殊，是因为我们需要适当处理它的数据，设置它的type为data。对于每种字段格式类型（type），都有一些选项来更明确的定义它的格式。使用日期类型（date type）时，还需要定义dateFormat（时间格式化）属性，它是一个字符串（本例中是'Y-m-d'）。如果你用过PHP的话，时间格式化字符串看起来很熟悉，因为Ext使用了与PHP相似的时间格式化字符串。 {name: 'released', type: 'date', dateFormat: 'Y-m-d'} 指定的数据类型： ExtJs有许多途径来适当读取特定数据类型，它们都列在下面： 字段类型 string int float boolean date 说明 字符串数据 数字 浮点型数字 true/false 日期数据 信息
使用JS的parseInt函数 使用JS的parseFloat函数
需要dateFormat配置 以下是一些我经常使用的数据类型： 三亿文库3y.uu456.com包含各类专业文献、幼儿教育、小学教育、各类资格考试、专业论文、应用写作文书、生活休闲娱乐、高等教育、文学作品欣赏、Extjs教程grid显示编辑数据28等内容。　
　extjs&使用grid显示数据_计算机软件及应用_IT/计算机_专业资料。使用grid显示数据...Extjs教程grid显示编辑数... 30页 4下载券 ExtJS Grid进阶 29页 免费 Extjs ... 　Extjs教程 第五章 使用grid显示数据(1)_IT/计算机_专业资料。Extjs手把手教程使用...一些输入: 'title' released 字段很特殊,是因为我们需要适当处理它的数据,设置... 　EXTJS专题总结--GRID数据编辑_政史地_高中教育_教育专区。今日推荐 116...Extjs教程 第五章 使用g... 10页 1下载券喜欢此文档的还喜欢 ... 　Extjs教程 第五章 使用grid显示数据(2)_IT/计算机_专业资料。Extjs手把手教程第五章 使用 grid 显示数据(2)使用 cell renderer(单元格渲染器):我们可以使用单元... 　GridObj(gridObj);//加载数据 },10); }, afterrender : function(gridObj,...Extjs教程grid显示编辑数... 30页 3下载券喜欢此文档的还喜欢 ExtJS入门教程(... 　Extjs教程 第五章 使用grid显示数据(3)_IT/计算机_专业资料。Extjs手把手教程今日...Extjs Grid 编辑 新增 删... 8页 免费 ExtJS教程--计划使用 20页 免费 Ex... 　1、删除多行数据 例子里使用的是 var selection = grid.getView().get...特殊编辑器等 后台交互 与后台的交互在一开始还是纠结了半天,没看清楚 extjs ... 　ExtJs数据管理操作源代码_计算机软件及应用_IT/计算机_专业资料。ExtJs数据管理操作...(&customerGrid&).getSelectionModel().getSelected(); //得到多个 record ...拒绝访问 | www.ggdoc.com | 百度云加速
请打开cookies.
此网站 (www.ggdoc.com) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(3da3dd-ua98).
重新安装浏览器，或使用别的浏览器extjs&使用grid显示数据_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
extjs&使用grid显示数据
阅读已结束，下载文档到电脑
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩28页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢