extjs 表头 pluginsgroupheadergrid 实现原理

合集下载

ExtJS3-如何实现多表头Grid

ExtJS3-如何实现多表头GridExtJS 3.x 版本并没有直接实现多表头Grid 的方式，可借助ColumnHeaderGroup插件进行实现，该插件代码已包含在项目源码包中的ux目录下。

1、引入ColumnHeaderGroup插件的css及js文件1.<head>2.<meta charset="utf-8"/>3.<title>ColumnHeaderGroup Grid</title>4.<link rel="stylesheet"type="text/css"href="extjs/css/ext -all.css"/>5.<link rel="stylesheet"type="text/css"href="extjs/css/xth eme-blue.css"/>6.<link rel="stylesheet"type="text/css"href="extjs/ux/Col umnHeaderGroup.css"/>7.<script type="text/javascript"src="extjs/ext-base.js"></script>8.<script type="text/javascript"src="extjs/ext-all.js"></script>9.<script type="text/javascript"src="extjs/ux/ColumnHead erGroup.js"></script>10.</head>2、创建ColumnHeaderGroup对象实例1.var row = new Ext.ux.grid.ColumnHeaderGroup({2.rows: [3.[{4.header: "",5.align: "center",6.colspan: 17.}, {8.header: "A",9.align: "center",10.colspan: 111.}, {12.header: "B",13.align: "center",14.colspan: 215.}, {16.header: "C",17.align: "center",18.colspan: 319.}, {20.header: "D",21.align: "center",22.colspan: 223.}, {24.header: "E",25.align: "center",26.colspan: 127.}]28.]29.});其中，rows属性是一个二维数组，每一个子项代表一行，可以指定每行包含的单元格及其所跨的列数，也可以根据自己的实际需要创建多行。

ExtJS中表格控件的使用,属性设置和数据的获取

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响应事件。

Extjs5开发学习-14-模块字段和Grid列地定义[1]

标准实用文案Extjs5开发学习-14-模块字段和Grid列的定义[1]这一节加入模块自定义字段，并根据这些字段生成model。

然后再定义grid中的分组和列。

从这一切开始真正进入到了模块自定义的节奏当中，代码的复杂度和技巧性也大大提高。

先从模块字段的自定义开始。

先看一■下ModuleModel.js 中加入的新的定义：[javascript] view plain copy1. /***模块的数据模型2.*/3.4.5. Ext.define( 'app.view.module.ModuleModel' , {6. extend : 'Ext.app.ViewModel' ,7. alias : 'viewmodel.module' ,8.9. //在开发过程中我先用设定好的值放于data中，等以后自定义的时候，data里的值都是从后台取得的//所有数据库里的字段，我都以tf_开头，只是为了表示这是从后台读取过来的10.11.12.data : {13.14. tf_moduleld : '1010' , //模块ID号：一个数字的ID号，可以根据此ID号的顺序将相同分组的模块放在一块。

15. tf_ModuleGroup : '工程管理',//模块分组：模块分到哪个组里，比如说业务模块1、业务模块2、系统设置、系统管理等。

16. tf_moduleName : 'Global' , //模块标识：系统中唯一的模块的标识17. tf_title :'工程项目’,//模块名称：能够描述此模块信息的名称。

18. tf_glyph : 0xf0f7, // 图标字符值19. tf_shortname : null，//模块简称：如果名称过长，有些地方可以用简称来代替。

20. tf_englishName : null，//模块英文名称：万一要制作英文版，可以用英文名称。

Extjs的grid的单元格中加载超链接和按钮

Extjs的grid的单元格中加载超链接和按钮效果：户型图列显示的图片实际上就是一个超链接。

添加一个Button分2个步骤：1.在列头中定义超链接列或者Button列的HTML代码，也就是Render2.添加该Button的事件处理函数。

其中，gridPanel应作为参数传入该函数。

应该在gridPanel初始化时定义:(1)cellClick的listener：cellClick(2)cellClick事件的处理函数：onCellClick列头定义的代码如下：[javascript] view plaincopy1.var cm = new Ext.grid.ColumnModel([2.,3.new Ext.grid.RowNumberer(), //自动添加行号4.5.{6.header: "房间编号",7.dataIndex: "RoomNumber",8.//可以进行排序9.sortable: true10.11.}, {12.header: "户型结构",13.dataIndex: "huxingjiegou",14.//可以进行排序15.isHidden: true,16.sortable: true17.18.}, {19.header: "面积(M2)",20.dataIndex: "area",21.//可以进行排序22.sortable: true23.24.}, {25.header: "单价(元/M2)",26.dataIndex: "singlePrice",27.//可以进行排序28.sortable: true29.// editor: new Ext.grid.GridEditor(new Ext.form. NumberField({30.// allowBlank: false31.// }))32.33.}, {34.header: "总价(元)",35.dataIndex: "totalPrice",36.//可以进行排序37.sortable: true38.39.}, {40.header: "面积(M2)",41.dataIndex: "mianjiCC",42.//可以进行排序43.sortable: true44.45.}, {46.header: "单价(元/M2)",47.dataIndex: "priceCCS",48.//可以进行排序49.sortable: true50.// editor: new Ext.grid.GridEditor(new Ext.form. NumberField({51.// allowBlank: false52.// }))53.54.}, {55.header: "总价(元)",56.dataIndex: "totalPriceCCS",57.//可以进行排序58.sortable: true59.60.}, {61.header: "面积(M2)",62.dataIndex: "mianjiCK",63.//可以进行排序65.66.}, {67.// header: "单价(元/M2)",68.header: "总价(元/M2)",69.dataIndex: "priceCK",70.//可以进行排序71.sortable: true72.// editor: new Ext.grid.GridEditor(new Ext.form. NumberField({73.// allowBlank: false74.// }))75.76.},77.78.79.{80.header: "",81.dataIndex: "totalPriceALL",82.//可以进行排序83.sortable: true84.85.},86.87.header: "户型图",88.tooltip: "户型图",89.90.width: 120,91.locked: true,92.menuDisabled: true,94.dataIndex: "huxingPic",95.renderer: function (data, metadata, record, rowIndex, columnIndex, store) {96.var picture = store.getAt(rowIndex).get('huxingPic');97.98.return'<a href="' + picture + '">' + '<img src="' + pi cture + '"width=60 hight=50> </a>';99.100.}101.102.{103.header: "订购",104.105.renderer: function (value, meta, record) {106.107.var formatStr = "<button onclick='javscript:return fal se;' class='order_bit'>订购</button>";108.var resultStr = String.format(formatStr);109.return"<div class='controlBtn'>" + resultStr + "</div >";110.} .createDelegate(this),111.css: "text-align:center;",112.// width: 30,113.sortable: false114.}115.116.]);注意超链接为'<a href="' + picture + '">'，而按钮为return"<div class='controlBtn'>"按钮处理事件的代码如下：[javascript] view plaincopy1.//按钮点击事件2.grid.on('cellclick', function (grid, rowIndex, columnIndex,e) {3.var btn = e.getTarget('.controlBtn');4.var get = e.getTarget('.get');5.6.if (get) {7.var t = e.getTarget();8.record = grid.getStore().getAt(rowIndex);9.var control = t.className;10.row = grid.getSelectionModel().getSelected(); //得到选择所有行11.rowIndexId = rowIndex;12.this.GetRoomDetails(record, rowIndexId, projectName , loudongName); //传行一行记录直接加载13.}14.if (btn) {15.16.var t = e.getTarget();17.record = grid.getStore().getAt(rowIndex);18.var control = t.className;19.row = grid.getSelectionModel().getSelected(); //得到选择所有行20.switch (control) {21.22.case'sale_already':23.{24.var state = "已售";25.// this.SetSaleState(record,state)26.this.GetOrderManagement(record, state, rowIndexId, projectName, loudongName)27.}28.break;29.case'order_bit':30.{31.var state = "大定";32.// this.SetSaleState(record,state)33.this.GetOrderManagement(record, state, rowIndexId, projectName, loudongName)34.}35.break;36.}37.}38.},39.this);。

ExtJS中grid按照使用Expand插件、分组显示、中文排序案例

置顶] ExtJS中grid按照使用Expand插件、分组显示、中文拼音首字母排序、改变行背景、列背景、静态数据分页综合案例分类：RCP【富客户端技术】ExtJS 2010-08-19 14:51 1125人阅读评论(1) 收藏举报1. /***2. * grid基础综合案例3. * 添加分页Ext.data.PagingMemoryProxy、重写Ext.data.Store支持中文汉字拼音字母首字母排序、4. * Ext.data.GroupingStore分组（GroupingStore继承Store的）、5. * 改变列背景色、行背景色、字体颜色getRowClass方法和renderer函数onRenderAgeCol的使用技巧6. * 添加分组、行收缩展开插件Ext.grid.RowExpander使用及重写Ext.grid.RowExpander组件的7. * 添加Ext.grid.GroupingView的groupTextTpl方法的使用8. * author: hoojo9. * create by: 2010-8-1410. */11.12. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">13. <html>14. <head>15. <title>可分组显示、expand插件、中文排序的Grid/改变行背景/单元格背景/字体颜色/分页</title>16. <meta http-equiv="pragma"content="no-cache">17. <meta http-equiv="cache-control"content="no-cache">18. <meta http-equiv="expires"content="0">19. <meta http-equiv="content-Type"content="text/html; charset=utf-8">20. <meta http-equiv="author"content="hoojo">21. <meta http-equiv="blog"content="/IBM_hoojo">22. <link rel="stylesheet"type="text/css"href="ext2/resources/css/ext-all.css">23. <style type="text/css">24. .rowOdd {25. background-color: #EFF7FF;26. color: white;27. }28.29. .rowEven {30. background-color: #CAE3FF;31. color: white;32. }33.34. .cellBG {35. background-color: #FFDD99;36. font-weight: bold;37. }38. </style>39. <script type="text/javascript"src="ext2/adapter/ext/ext-base.js"></script>40. <script type="text/javascript"src="ext2/ext-all.js"></script>41. <script type="text/javascript"src="ext2/build/locale/ext-lang-zh_CN-min.js"></script>42. <script type="text/javascript"src="jslib/PagingMemoryProxy.js"></script>43. 44. <script type="text/javascript"src="jslib/RowExpander.js"></script>45. 46. <script type="text/javascript"src="jslib/Ext.hoo.grid.ConformityGrid.js"></script>47. </head>48. <body>49. </body>50. </html>Ext.hoo.grid.ConformityGrid.js1. /***2. * grid基础综合案例3. * 添加分页Ext.data.PagingMemoryProxy、重写Ext.data.Store支持中文汉字拼音字母首字母排序、4. * Ext.data.GroupingStore分组（GroupingStore继承Store的）、5. * 改变列背景色、行背景色、字体颜色getRowClass方法和renderer函数onRenderAgeCol的使用技巧6. * 添加分组、行收缩展开插件Ext.grid.RowExpander使用及重写Ext.grid.RowExpander组件的7. * 添加Ext.grid.GroupingView的groupTextTpl方法的使用8. * author: hoojo9. * create by: 2010-8-1410. */11. Ext.ns("Ext.hoo.grid");12. Ext.hoo.grid.ConformityGrid = Ext.extend(Ext.grid.GridPanel, {13. //expander: null,14. constructor: function () {15. this.data = [16. [1, "奥巴马", 48, "美国", "好像是美国总统"],17. [3, "布朗", 20, "美国", "很常见的名字"],18. [5, "次郎", 22, "日本", "据说是武大郎赐给的名称"],19. [2, "多尔衮", 159, "中国", "差点历史就被改写"],20. [4, "厄洛斯", 34, "英国", "不知哪里来的"],21. [6, "弗莱德", 25, "美国", "和弗兰德很像"],22. [8, "哥萨克", 24, "英国", "是萨克斯的弟弟么"],23. [23, "汉德森", 48, "美国", "好像是部电影的主角"],24. [13, "杰克", 20, "美国", "电影中常出现的配角名称"],25. [15, "卡尔", 22, "美国", "是小时候看动画片的那个瘦猫，胖子是BC"],26. [12, "露丝", 159, "英国", "很常见的名称"],27. [14, "玛丽卡", 34, "美国", "这个名称好像不错哦"],28. [16, "妮娜", 25, "美国", "在中国有叫‘妮’、‘娜’的，‘妮娜’不多见"],29. [18, "欧德桑", 24, "英国", "Good Success!"]30. ],31. this.store = new Ext.data.GroupingStore({32. proxy: new Ext.data.PagingMemoryProxy(this.data),//后台分页只须将proxy改为url: "your url",33. reader: new Ext.data.ArrayReader({}, [34. {name: "id", type: "int", mapping: 0},35. "name", "age", "country", "origin"36. ]),37. sortInfo: {field: "name", direction: "asc"},38. groupField: "country"39. }),40. this.expander = new Ext.grid.RowExpander({41. tpl : new Ext.Template(42. '<p><b>你是:</b> {name}</p><br>',43. '<p><b>评价:</b> {origin}</p>'44. )45. }),46. Ext.hoo.grid.ConformityGrid.superclass.constructor.call(this, {47. renderTo: Ext.getBody(),48. title: "可按中文排序的Grid/改变行背景/单元格背景/字体颜色",49. height: 450,50. width: 600,51. frame: true,52. autoScroll: true,53. plugins: this.expander,54. autoExpandColumn: "age",55. columns: [this.expander, {56. header: "编号",57. dataIndex: "id",58. sortable: true59. }, {60. header: "名称",61. dataIndex: "name",62. sortable: true63. }, {64. header: "年龄",65. dataIndex: "age",66. sortable: true,67. renderer: this.onRenderAgeCol68. }, {69. header: "国家",70. dataIndex: "country",71. sortable: true72. }],73. sm: new Ext.grid.RowSelectionModel({singleSelect: true}),74. bbar: new Ext.PagingToolbar({75. store: this.store,76. pageSize: 8,77. displayInfo: true,78. displayMsg: "显示{0}条到{1}条记录，总共{2}条记录",79. emptyMsg: "没有数据记录"80. }),81. view: new Ext.grid.GroupingView({82. forceFit:true,83. autoFill: true,84. groupTextTpl: '{text}({[values.rs.length]} {[values.rs.length > 1 ? "人" : "人"]})-记录[{startRow}]'/*,startRow是行索引85. //如果不用Ext.grid.RowExpande插件，这里才有效果，在用插件的情况下改变行背景颜色需要覆盖插件中的getRowClass方法86. getRowClass: function(record, index, rowParams, store) {87. if (index % 2 == 0) {88. return 'rowEven';89. } else {90. return 'rowOdd';91. }92. }*/93. })94. });95. this.store.load({params: {start: 0, limit: 8}});96. },97. /**98. * 列渲染器方法，在grid渲染的时候执行99. * @param value 当前列的值100. * @param metaData 当前列的css样式101. * @param record 当前列的record记录102. * @param rowIndex 行索引103. * @param colIndex 当前列索引104. * @param store 当前grid的store105. */106. onRenderAgeCol: function (value, metaData, record, rowIndex, colIndex, store) {107. if (rowIndex == 2) {//改变第四行的当前单元格背景颜色108. metaData.attr = 'style="color: white; background-color: #A9C9E2;"';//添加style样式109. } else if (value > 40) {110. metaData.attr = 'style="color: red;"';111. metaData.css = "cellBG";//添加class样式112. }113. if (rowIndex > 2) {114. return "<a href='/IMB_hoojo' target='_blank'>【" + value + "】-【" + record.get("name") + "】-【" + store.getAt(0) + "】</a>";115. } else if (rowIndex == 1) {116. metaData.cellAttr = "style='background-color: white; color: green;'";//不兼容firefox117. return value;118. } else {119. return value;120. }121. }122. });123.124. /**125. * 重写（覆盖）applySort方法126. * 按照拼音字母进行排序127. */128. Ext.override(Ext.data.Store, {129. applySort: function () {130. if (this.sortInfo && !this.remoteSort) {131. var s = this.sortInfo;132. var f = s.field;133. var st = this.fields.get(f).sortType;134. var fn = function (r1, r2) {135. var v1 = st(r1.data[f]);136. var v2 = st(r2.data[f]);137. if (typeof(v1) == "string") {138. return v1.localeCompare(v2);139. }140. return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);141. };142. this.data.sort(s.direction, fn);143. if (this.snapshot && this.snapshot != this.data) {144. this.snapshot.sort(s.direction, fn);145. }146. }147. }148. });149. /*150. 也可以下面这样写；151. Ext.data.Store.prototype.applySort = function () {152. };*/153. Ext.override(Ext.grid.RowExpander, {154. getRowClass: function(record, rowIndex, rowParams, store) { 155. rowParams.cols = rowParams.cols-1;156. var content = this.bodyContent[record.id];157. if(!content && !zyRender){158. content = this.getBodyContent(record, rowIndex); 159. }160. if(content){161. rowParams.body = content;162. }163. if (rowIndex % 2 == 0) {164. return this.state[record.id] ? 'x-grid3-row-expanded rowEven' : 'x-gri d3-row-collapsed rowEven';//添加样式rowEven165. } else {166. return this.state[record.id] ? 'x-grid3-row-expanded rowOdd' : 'x-grid 3-row-collapsed rowOdd';//添加样式rowOdd167. }168. }169. });170. Ext.onReady(function () {171. Ext.BLANK_IMAGE_URL = "ext2/resources/images/default/s.gif"; 172. var grid = new Ext.hoo.grid.ConformityGrid();173. });。

ExtJSGridTooltip的3+1种实现方式总结

ExtJSGridTooltip的3+1种实现方式总结本文总结了ExtJS Grid Tooltip的几种实现方法。

ExtJS Grid Tooltip可以通过表头提示，单元格提示，行提示以及自己手动添加等方式完成。

本文参考了官方FAQ上提供的描述。

AD：ExtJS Grid Tooltip实现之一：表头提示在2.2里面是设置ColumnModel.tooltip ,3.0则是Column. tooltip 如下:1.var grid = new Ext.grid.GridPanel({2.3.columns:[4.5.{header:'名称',dataIndex:'name',tooltip:'对象名称'},6.7.{header:'开始时间 - 结束时间 < br/>成功/失败/成功率', dataIndex:'sucRate',tooltip:'成功/失败/成功率'}8.9.]10.11.});ExtJS Grid Tooltip实现之二：单元格提示1)使用Ext.QuickTips在开始的时候就执行Ext.QuickTips.init();然后对需要提示的单元格,重写renderer函数,添加ext:qtitle , ext:qtip这2个属性即可。

这个在官方的FAQ上有详细描述:1.//option 12.3.//========4.5.renderer = function (data, metadata, record, rowIndex, c olumnIndex, store) {6.7.//build the qtip:8.9.var title = 'Details for ' + value + '-' + record.get('month') +10.11.'-' + record.get('year');12.13.var tip = record.get('sunday_events');14.15.16.17.metadata.attr = 'ext:qtitle="' + title + '"' + ' ext:qti p="' + tip + '"';18.20.21.//return the display text:22.23.var displayText = '< span style="color: #000;">' + value + '< /span>< br />' +24.25.record.get('sunday_events_short');26.27.return displayText;28.29.};30.31.32.33.//option 234.35.//========36.37.renderer = function (data, metadata, record, rowI ndex, columnIndex, store) {38.39.var qtip = '>';40.41.if(data >= 0){42.43.qtip = " qtip='yeah'/>";44.45.return'< span style="color:green;"' + qtip + data + '%< /span>';47.}else if(data < 0){48.49.qtip = " qtip='woops'/>";50.51.return'< span style="color:red;"' + qtip + data + '%< /span>';52.53.}54.55.return data;56.57.};58.59.60.61.//option 362.63.//========64.65.var qtipTpl = new Ext.XTemplate(66.67.'< h3>Phones:< /h3>',68.69.'< tpl for=".">',70.71.'< div>< i>{phoneType}:< /i> {phoneNumber}< / div>',72.73.'< /tpl>'75.);76.77.78.79.renderer = function (data, metadata, record, rowI ndex, columnIndex, store) {80.81.82.83.// get data84.85.var data = record.data;86.87.88.89.// convert phones to array (only once)90.91.data.phones = Ext.isArray(data.phones) ?92.93.data.phones :94.95.this.getPhones(data.phones);96.97.98.99.// create tooltip100.101.var qtip = qtipTpl.apply(data.phones);102.104.105.metadata.attr = 'ext:qtitle="' + title + '"' + ' ext:qti p="' + tip + '"';106.107.108.109.//return the display text:110.111.return data;112.113.};2)使用T oolTip官方也已经给出方法:以上给出的方法是可以让一个grid里面的元素共享一个tooltip对象。

Extjs 4.2 Grid增删改及后台交互

Posted 周二, 07/02/2013 - 12:20 by admin上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录。

苦于抽不出时间，一直拖到现在。

不得不说，Extjs确实很强大，新版的Neptune 风格也很入我眼，但毕竟没怎么用过，第一次用，也不敢上来就搞什么自定义组件，也就纯粹的model+store+panel声明式创建表格了。

抛开分页，抛开排序，今天只简单讲一下最近使用中总结出来的rest形式增删改查数据的方式。

发现这种方式挺不错的，故而分享下。

代码Example如下：定义Modelview sourceprint?01.Ext.define('Person', {02.extend: 'Ext.data.Model',03.fields: [{name: 'id',04.type: 'int',eNull: true06.}, 'email', 'first', 'last'],07.validations: [{ type: 'length',08.field: 'email',09.min: 110.}, {type: 'length',11.field: 'first',12.min: 113.}, {type: 'length',14.field: 'last',15.min: 116.}]17.});构造store、创建panelview sourceprint?001.var store = Ext.create('Ext.data.Store', {002.autoLoad: true,003.autoSync: true,004.model: 'Person',005.proxy: {006.type: 'ajax',007.api: {008.read: 'url/read',//查询009.create: 'url/create',//创建010.update: 'url/update',//更新011.destroy: 'url/destroy'//删除012.},013.reader: {014.type: 'json',015.root: 'data'016.},017.writer: {018.type: 'json'019.}020.},021.listeners: {022.write: function(store, operation){023.var record = operation.getRecords()[0], = Ext.String.capitalize(operation.action), 025.verb;026.027.028.if(name == 'Destroy') {029.record = operation.records[0];030.verb = 'Destroyed';031.} else{032.verb = name + 'd';033.}034.Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId()));035.036.}037.}038.});039.040.var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {041.listeners: {042.cancelEdit: function(rowEditing, context) {043.// Canceling editing of a locally added, unsaved record: remove it044.if(context.record.phantom) {045.store.remove(context.record);046.}047.}048.}049.});050.051.var grid = Ext.create('Ext.grid.Panel', {052.renderTo: document.body,053.plugins: [rowEditing],054.width: 400,055.height: 300,056.frame: true,057.title: 'Users',058.store: store,059.iconCls: 'icon-user',060.columns: [{061.text: 'ID',062.width: 40,063.sortable: true,064.dataIndex: 'id'065.}, {066.text: 'Email',067.flex: 1,068.sortable: true,069.dataIndex: 'email',070.field: {071.xtype: 'textfield'072.}073.}, {074.header: 'First',075.width: 80,076.sortable: true,077.dataIndex: 'first',078.field: {079.xtype: 'textfield'080.}081.}, {082.text: 'Last',083.width: 80,084.sortable: true,085.dataIndex: 'last',086.field: {087.xtype: 'textfield'088.}089.}],090.dockedItems: [{091.xtype: 'toolbar',092.items: [{093.text: 'Add',094.iconCls: 'icon-add',095.handler: function(){096.// empty record097.store.insert(0, new Person());098.rowEditing.startEdit(0, 0);099.}100.}, '-', {101.itemId: 'delete',102.text: 'Delete',103.iconCls: 'icon-delete',104.disabled: true,105.handler: function(){106.var selection =grid.getView().getSelectionModel().getSelection()[0]; 107.if(selection) {108.store.remove(selection);109.}110.}111.}]112.}]113.});114.grid.getSelectionModel().on('selectionchange', function(selModel, selections){115.grid.down('#delete').setDisabled(selections.length === 0);很简单，使用api的方式，包括有增删查改，在前台的操作都会被extjs记录下来，再执行sync 的时候就可以自动根据状态请求相应的url了。

Ext-JS概述(工作原理)

Ext-JS概述（工作原理）什么是ExtJSExtJS（简称Ext）是以HTML作为控件的骨干、CSS作为样式的表现、以JavaScript 作为编程语言，可应用于IE/FireFox/Opera等的各种浏览器上的AJAX UI组件库。

Ext美观大方，实例完整，完全可以靠这些丰富例子，就地取材很快的建立起一个像样的程序来。

示例--使用AJAX技术在网格中显示服务器端记录数组数据。

检查Ext内核是否添加并可用。

静态页面：<html><head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"><title>Grid Filter Example</title><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" src="grid-filter.js"></script></head><body><h1>Grid Filter Example</h1><div id="grid-example" style="margin: 10px;"></div></body></html>说明：Ext的内核文件有如下几个：ext-all.css与显示有关的JavaScript文件grid-filter.js，实现显示与界面的分离。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

extjs 表头 pluginsgroupheadergrid 实现原理
ExtJS 的 plugins/groupheadergrid 插件是用来实现表头分组的功能的。

它的实现原理如下：
1. 首先，该插件会在 Ext.grid.Panel 的初始化阶段，生成一个
配置项 groupHeaderConfig，用来设置表头分组的相关信息，
如分组标题、列宽度等。

2. 在 Ext.grid.HeaderContainer 类的 initComponent 方法中，会
根据 groupHeaderConfig 配置项，生成表头分组的相关 DOM
结构。

3. 对于每一个分组，会生成一个包含分组标题和分组内列的DOM 元素，以及一个包含分组标题和列的 wrapper 元素。

4. 分组标题和列的 DOM 元素会添加相应的样式类，以便通过CSS 控制它们的样式。

5. 在 Ext.grid.feature.Grouping 类的 init 方法中，会将分组标题
和列的 wrapper 元素分别添加到表头容器的主体和锁定主体中。

6. 在 Ext.grid.feature.Grouping 类的 render 方法中，会根据数据源中的分组信息，修改每个分组的可见性和展开/折叠状态。

7. 当用户点击分组标题时，会触发相应的事件处理程序，根据当前分组的展开/折叠状态，进行相应的操作。

总结起来，extjs 表头 plugins/groupheadergrid 插件的实现原理主要涉及生成分组标题和列的 DOM 结构，以及控制分组展开/折叠状态的处理。

同时，它通过 CSS 控制样式，以实现不同的分组样式和行为。