Ext中向Ext.grid.GridPanel() 显示按钮，并绑定id(行标识)

1、拼装按钮
备注：行标识id，在加载显示的时候就已和按钮绑定到一起，并相应的执行按钮操作；

1. /*表格数据源*/  
2. var store = new Ext.data.Store({  
3.     proxy:new Ext.data.HttpProxy({url:'TestAction!testMethod.action'}),  
4.     reader:new Ext.data.JsonReader({  
5.         totalProperty:'total',  
6.         root:'result'  
7.     },  
8.     [     
9.         {name:'planedId'},                      /*安检计划唯一编号*/  
10.         {name:'symbol'},                        /*编号*/  
11.         {name:'smbDesc'},                       /*地址*/  
12.         {name:'planedCnt'},                     /*户数*/  
13.         {name:'checkDatePlan'},                 /*计划日期*/  
14.         {name:'checkUnit'},                     /*安检单位*/  
15.         {name:'printTime'},                     /*打印时间*/  
16.         {name:'cancel'}                         /*取消计划*/  
17.     ]),  
18.     sortInfo:{field:'symbol',direction:'DESC'}  /*排序*/  
19. });  
20.   
21. /*列模型中渲染的按钮*/  
22. var cancelRender = function cancel(value){  
23.     cancelButton='<TABLE class="x-btn-wrap x-btn x-btn-text-icon" id=save style="WIDTH:55px" cellSpacing=0 cellPadding=0 border=0>';  
24.     cancelButton+='<TBODY><TR><TD class=x-btn-left><I> </I></TD>';  
25.     cancelButton+='<TD class=x-btn-center><EM unselectable="on"><BUTTON id=ext-gen97 onclick=cancel('+value+')>取消</BUTTON></EM></TD>';  
26.     cancelButton+='<TD class=x-btn-right><I> </I></TD></TR></TBODY></TABLE>';  
27.     return cancelButton;  
28. };  
29.   
30. /*表格显示项 - 列模型*/  
31. var cm = new Ext.grid.ColumnModel([  
32.     {header:'编号',    width:200,dataIndex:'symbol'},  
33.     {header:'地址',    width:200,dataIndex:'smbDesc'},  
34.     {header:'户数',    width:200,dataIndex:'planedCnt'},  
35.     {header:'计划日期',width:200,dataIndex:'checkDatePlan'},  
36.     {header:'安检单位',width:200,dataIndex:'checkUnit'},  
37.     {header:'打印时间',width:150,dataIndex:'printTime'},  
38.     {header:'取消计划',width:150,dataIndex:'planedId',renderer:cancelRender}  
39. ]);  
40.   
41. /*表格面板*/  
42. var grid = new Ext.grid.GridPanel({  
43.     store:store,  
44.     cm:cm,  
45.     loadMask: true,  
46.     stripeRows:true,  
47.     viewConfig:{forceFit:true}  
48. });  
49.   
50. /*触发按钮事件*/  
51. var cancel = function(value){  
52.     Ext.Msg.confirm('提示','是否确定取消该计划?',function(btn){  
53.         if(btn!='yes'){  
54.             return;  
55.         }  
56.         Ext.Ajax.request({  
57.             url:'TestAction!testMethod.action',  
58.             callback:function(o,s,r){  
59.                 if(r.responseText=='success'){  
60.                     Ext.Msg.alert('提示','取消成功!');  
61.                     return;  
62.                 }else{  
63.                     Ext.Msg.alert('提示','r.responseText');  
64.                     return;  
65.                 }  
66.             }  
67.         });  
68.     });  
69. };    

2、返回图片按钮链接
备注：行标识id，在图片按钮显示过后，当执行按钮事件时，在函数中通过循环选择模型来获取，并相应的执行按钮操作；
对于这个例子，我就不做太多赘述，简单最好。代码中唯一改动的就是，按钮显示的方式改变了。好了，我来写一下。
对于store的加载，省略。来说列模型中按钮的显示

1. Ext.namespace("MCGM");  /*MCGM为命名空间*/  
2.   
3. MCGM.cm = new Ext.grid.ColumnModel([  
4.      new Ext.grid.RowNumberer(),  
5.     {header:'客户编号',width:150,dataIndex:'customerId'},   
6.     {header:'客户名称',width:150,dataIndex:'name'},  
7.     {header:'地址',    width:150,dataIndex:'address'},  
8.     {header:'组别',    width:150,dataIndex:'group0'},  
9.     {header:'顺序',    width:150,dataIndex:'order0'},  
10.     {header:'调整',    width:150,,dataIndex:""menuDisabled:true,  
11.     renderer:function(v){  
12.             return "<a onclick='update()' style="cursor:pointer" mce_style="cursor:pointer"><img src="images/tz.jpg" mce_src="images/tz.jpg" /></a>";  
13.         }  
14.     }  
15. ]);  
16.   
17. MCGM.grid = new Ext.grid.GridPanel({  
18.     cm:MCGM.cm,  
19.     store:MCGM.store,  
20.     loadMask: {msg:'正在加载中,请稍后..'},                      //加载时显示的等待信息  
21.     sm:new Ext.grid.RowSelectionModel({singleSelect:true}),  
22.        viewConfig:{forceFit:true,autoScroll:true},  
23. });  
24.   
25. /*下面是我做的一个调整功能，需要跳到另外一个新页面，并要获得行的所有值，特别是行标识id，这里我就只把获得行信息的代码写出来，不怎么难，就几行，还是写一下吧！*/  
26. var update = function(){  
27.     Ext.Msg.confirm("提示框","您确定要调整此项记录吗？",function(btn){  
28.         if(btn == 'yes'){  
29.             /*关键代码*/  
30.             MCGM.view = MCGM.grid.getView();  
31.             MCGM.rsm = MCGM.grid.getSelectionModel();  
32.             MCGM.store = MCGM.grid.getStore();  
33.               
34.             for(var i = MCGM.view.getRows().length-1;i>=0;i--){  
35.                 if(MCGM.rsm.isSelected(i)){  
36.                     var customerId = MCGM.grid.getStore().getAt(i).get('customerId');  
37.                     var name = MCGM.grid.getStore().getAt(i).get('name');  
38.                     var address = MCGM.grid.getStore().getAt(i).get('address');  
39.                     var group0 = MCGM.grid.getStore().getAt(i).get('group0');  
40.                     var order0 = MCGM.grid.getStore().getAt(i).get('order0');  
41.                 }  
42.             }  
43.         }  
44.     });  
45. };