ExtJS4学习笔记(十二)---ExtJS4 EditGrid(可编辑的Grid)

于 2011-08-30 17:37:00 发布
阅读量181 收藏
点赞数
文章标签： ux xhtml json

上一篇文章，在Grid中加入了多选/全选功能，实际运用中，我们可能需要动态修改Grid中的数据，也就是要实现EditGrid功能。本文介绍如何实现Extjs4 EditGrid功能。先发几张效果图。看图说话，更有说服力哦。






HTML代码：

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <title>ExtJS4EditGrid(可编辑的Grid)-MHZG.NET</title>
  6. <linkrel="stylesheet"type="text/css"href="../../resources/css/ext-all.css"/>
  7. <linkrel="stylesheet"type="text/css"href="../../examples/ux/css/CheckHeader.css"/>
  8. <styletype="text/css">
  9. #search-resultsa{
  10. color:#385F95;
  11. font:bold11pxtahoma,arial,helvetica,sans-serif;
  12. text-decoration:none;
  13. }
  14. .add{
  15. background-image:url(../../examples/shared/icons/fam/cog.gif)!important;
  16. }
  17. #search-resultsa:hover{
  18. text-decoration:underline;
  19. }
  21. #search-resultsp{
  22. margin:3px!important;
  23. }
  25. .search-item{
  26. font:normal11pxtahoma,arial,helvetica,sans-serif;
  27. padding:3px10px3px10px;
  28. border:1pxsolid#fff;
  29. border-bottom:1pxsolid#eeeeee;
  30. white-space:normal;
  31. color:#555;
  32. }
  33. .search-itemh3{
  34. display:block;
  35. font:inherit;
  36. font-weight:bold;
  37. color:#222;
  38. }

  40. .search-itemh3span{
  41. float:right;
  42. font-weight:normal;
  43. margin:005px5px;
  44. width:100px;
  45. display:block;
  46. clear:none;
  47. }
  49. .x-form-clear-trigger{
  50. background-image:url(../../resources/themes/images/default/form/clear-trigger.gif);
  51. }
  53. .x-form-search-trigger{
  54. background-image:url(../../resources/themes/images/default/form/search-trigger.gif);
  55. }
  56. </style>
  57. <scripttype="text/javascript"src="../../bootstrap.js"></script>
  58. <scripttype="text/javascript"src="../../locale/ext-lang-zh_CN.js"></script>
  59. <scripttype="text/javascript"src="editgrid.js"></script>
  60. </head>

  62. <body>
  63. <divid="demo"></div>
  64. </body>
  65. </html>

editgrid.js：

  1. Ext.Loader.setConfig({enabled:true});
  2. Ext.Loader.setPath('Ext.ux','../../examples/ux');
  3. Ext.require([
  4. 'Ext.grid.*',
  5. 'Ext.toolbar.Paging',
  6. 'Ext.util.*',
  7. 'Ext.data.*',
  8. 'Ext.state.*',
  9. 'Ext.form.*',
  10. 'Ext.ux.form.SearchField',
  11. 'Ext.selection.CellModel',
  12. 'Ext.ux.CheckColumn',
  13. 'Ext.selection.CheckboxModel'
  14. ]);

  16. Ext.onReady(function(){
  17. varisEdit=false;
  19. functionformatDate(value){
  20. returnvalue?Ext.Date.dateFormat(value,'Y-m-d'):'';
  21. }
  23. Ext.define('MyData',{
  24. extend:'Ext.data.Model',
  25. fields:[
  26. {name:'id'},
  27. {name:'title',type:'string'},
  28. {name:'author'},
  29. {name:'hits',type:'int'},
  30. {name:'addtime',type:'date',dataFormat:'Y-m-d'},
  31. {name:'checked',type:'bool'}
  32. ]
  33. });
  35. //创建数据源
  36. varstore=Ext.create('Ext.data.Store',{
  37. //分页大小
  38. pageSize:50,
  39. model:'MyData',
  40. //是否在服务端排序
  41. remoteSort:true,
  42. autoDestroy:true,
  43. proxy:{
  44. //异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
  45. type:'ajax',
  46. url:'editgrid.asp',
  48. reader:{
  49. root:'items',
  50. totalProperty:'total'
  51. },
  52. simpleSortMode:true
  53. },
  54. sorters:[{
  55. //排序字段。
  56. property:'hits',
  57. //排序类型，默认为ASC
  58. direction:'DESC'
  59. }]
  60. });
  61. //下拉框数据,测试数据。
  62. varcbstore=Ext.create('Ext.data.Store',{
  63. fields:['id','name'],
  64. data:[
  65. {"id":"1","name":"佚名"},
  66. {"id":"2","name":"管理员"},
  67. {"id":"3","name":"编辑"},
  68. {"id":"4","name":"总编辑"},
  69. {"id":"5","name":"测试员"}
  70. ]
  71. });

  74. //创建多选
  75. varselModel=Ext.create('Ext.selection.CheckboxModel');
  76. varcellEditing=Ext.create('Ext.grid.plugin.CellEditing',{
  77. clicksToEdit:1
  78. });
  79. //创建Grid
  80. vargrid=Ext.create('Ext.grid.Panel',{
  81. store:store,
  82. selModel:selModel,
  83. columnLines:true,
  84. columns:[{
  85. id:"title",
  86. header:"标题",
  87. width:110,
  88. dataIndex:'title',
  89. sortable:true,
  90. field:{
  91. allowBlank:false
  92. }
  93. },{
  94. header:"作者",
  95. width:120,
  96. dataIndex:'author',
  97. id:'gc',
  98. sortable:false,
  99. field:{
  100. xtype:'combobox',
  101. id:'authors',
  102. typeAhead:true,
  103. triggerAction:'all',
  104. queryMode:'local',
  105. selectOnTab:true,
  106. store:cbstore,
  107. lazyRender:true,
  108. displayField:'name',
  109. valueField:'id',
  110. listClass:'x-combo-list-small',
  111. listeners:{
  112. select:function(combo,record,index){
  113. isEdit=true;
  114. }
  115. }
  117. },
  118. renderer:rendererData
  119. },{
  120. header:"点击数",
  121. width:80,
  122. dataIndex:'hits',
  123. sortable:true,
  124. field:{
  125. xtype:'numberfield',
  126. allowBlank:false,
  127. minValue:0,
  128. maxValue:100000
  129. }
  130. },{
  131. header:"添加时间",
  132. width:100,
  133. dataIndex:'addtime',
  134. sortable:true,
  135. renderer:formatDate,
  136. field:{
  137. xtype:'datefield',
  138. format:'y-m-d',
  139. minValue:'01/01/06'
  140. }
  141. },{
  142. xtype:'checkcolumn',
  143. header:'审核',
  144. dataIndex:'checked',
  145. width:55
  146. }],
  147. height:400,
  148. width:520,
  149. x:20,
  150. y:40,
  151. title:'ExtJS4EditGrid(可编辑的Grid)',
  153. disableSelection:false,//值为TRUE，表示禁止选择
  154. frame:true,
  155. selType:'cellmodel',
  156. loadMask:true,
  157. renderTo:'demo',
  158. viewConfig:{
  159. id:'gv',
  160. trackOver:false,
  161. stripeRows:false
  162. },
  163. dockedItems:[{
  164. dock:'top',
  165. xtype:'toolbar',
  166. items:[{
  167. itemId:'Button',
  168. text:'显示所选',
  169. tooltip:'Addanewrow',
  170. iconCls:'add',
  171. handler:function(){
  172. varrecord=grid.getSelectionModel().getSelection();
  173. if(record.length==0){
  174. Ext.MessageBox.show({
  175. title:"提示",
  176. msg:"请先选择您要操作的行!",
  177. icon:Ext.MessageBox.INFO,
  178. buttons:Ext.Msg.OK
  179. })
  180. return;
  181. }else{
  182. varids="";
  183. for(vari=0;i<record.length;i++){
  184. ids+=record[i].get("id")
  185. if(i<record.length-1){
  186. ids=ids+",";
  187. }
  188. }
  189. Ext.MessageBox.show({
  190. title:"所选ID列表",
  191. msg:ids
  192. //icon:Ext.MessageBox.INFO
  193. })
  194. }
  195. }
  196. },'-',{
  197. width:300,
  198. fieldLabel:'搜索',
  199. labelWidth:50,
  200. xtype:'searchfield',
  201. store:store
  202. }]
  203. },{
  204. dock:'bottom',
  205. xtype:'pagingtoolbar',
  206. store:store,
  207. pageSize:25,
  208. displayInfo:true,
  209. displayMsg:'显示{0}-{1}条，共计{2}条',
  210. emptyMsg:'没有数据'
  211. }],
  212. plugins:[cellEditing]
  214. })
  215. store.loadPage(1);
  216. grid.on('edit',onEdit,this);
  218. functiononEdit(){
  219. varrecord=grid.getSelectionModel().getSelection()[0];
  220. //这里进行异步操作，关于Extjs的异步操作这里不做演示，仅列出所有值。
  221. vartitle=record.get('title');
  222. varauthor=record.get('author');//注意，这里得到的是id值，而不是name值,如果没有修改作者，那么得到的值是默认显示的字符串，这个需要在服务端进行判断并处理。
  223. varclk=record.get('hits');
  224. varaddtime=Ext.Date.dateFormat(record.get('addtime'),'Y-m-d');
  225. varchecked=record.get('checked');
  226. Ext.MessageBox.show({
  227. title:"修改的数据为",
  228. msg:title+"\r\n"+author+"\r\n"+clk+"\r\n"+addtime+"\r\n"+checked,
  229. icon:Ext.MessageBox.INFO,
  230. buttons:Ext.Msg.OK
  231. })
  232. }
  234. functionrendererData(value,metadata,record){
  235. if(isEdit){
  236. varindex=cbstore.find(Ext.getCmp('authors').valueField,value);
  237. varrecord=cbstore.getAt(index);
  238. returnrecord.data.name;
  239. }else{
  240. returnvalue;
  241. }
  243. }
  244. })

editgrid.asp：时间关系，只简单做了些测试数据。

  1. <%
  2. Response.ContentType="text/html"
  3. Response.Charset="UTF-8"
  4. %>
  5. <%
  6. '返回JSON数据,自定义一些测试数据。。
  7. '这里的参数与EXT3.x相同，区别在于排序字段和排序方式使用了新的属性。
  8. '由于这里是测试数据，接收的参数只用到了start,limit。sorts和dir在实际操作过程中，将之加入SQL的ORDERBY里即可。
  9. start=Request("start")
  10. limit=Request("limit")
  11. '查询时获取的参数。
  12. query=Request("query")
  13. Ifstart=""Then
  14. start=0
  15. EndIf
  16. Iflimit=""Then
  17. limit=50
  18. EndIf
  19. sorts=Replace(Trim(Request.Form("sort")),"'","")
  20. dir=Replace(Trim(Request.Form("dir")),"'","")

  22. '测试数据，这里直接输出结果，实际应用中，应该把查询条件放到SQL语句中。
  23. Ifquery="newstitle"Then
  24. Echo("{")
  25. Echo("""total"":")
  26. Echo("""1")
  27. Echo(""",""items"":[")
  28. Echo("{")
  29. Echo("""title"":""newstitle""")
  30. Echo(",")
  31. Echo("""author"":""author""")
  32. Echo(",")
  33. Echo("""hits"":""100""")
  34. Echo(",")
  35. Echo("""addtime"":"""&Now()&"""")
  36. Echo("}")
  37. Echo("]}")
  38. Else
  39. Dimcounts:counts=20
  40. '注意，这里的counts相当于Rs.RecordCount,也就是记录总数。

  42. DimLs:Ls=Cint(start)+Cint(limit)
  43. IfLs>=countsThen
  44. Ls=counts
  45. EndIf

  47. Echo("{")
  48. Echo("""total"":")
  49. Echo(""""&counts&""",")
  50. Echo("""items"":[")
  51. Fori=start+1ToLs
  52. Echo("{")
  53. Echo("""id"":"""&i&"""")
  54. Echo(",")
  55. Echo("""title"":""newstitle"&i&"""")
  56. Echo(",")
  57. Echo("""author"":""author"&i&"""")
  58. Echo(",")
  59. Echo("""hits"":"""&i&"""")
  60. Echo(",")
  61. Echo("""addtime"":"""&Now()&"""")
  62. Echo(",")
  63. IfiMod4=0Then
  64. Echo("""checked"":""true""")
  65. Else
  66. Echo("""checked"":""false""")
  67. EndIf
  68. Echo("}")
  69. Ifi<LsThen
  70. Echo(",")
  71. EndIf
  72. Next

  74. Echo("]}")
  75. EndIf
  76. FunctionEcho(str)
  77. Response.Write(str)
  78. EndFunction
  79. %>

由于4.x有了重大更新，所以很多在3.x中的东西在4.x里并不好使，直接导致了本文迟迟没有发表，原因就出在了更新下拉框后，Grid中显示的是ID号而不是name值。一番查看API及研究，终于发现问题所在，3.x中renderer combobox在4.x并不好用，最后重新读了一遍自己写的代码，才有所顿悟。希望文章能起到一个抛砖引玉的作用，大家一起进步。


iteye_12837
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值