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

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

 

 

 

/*表格数据源*/ var store = new Ext.data.Store({ proxy:new Ext.data.HttpProxy({url:'TestAction!testMethod.action'}), reader:new Ext.data.JsonReader({ totalProperty:'total', root:'result' }, [ {name:'planedId'}, /*安检计划唯一编号*/ {name:'symbol'}, /*编号*/ {name:'smbDesc'}, /*地址*/ {name:'planedCnt'}, /*户数*/ {name:'checkDatePlan'}, /*计划日期*/ {name:'checkUnit'}, /*安检单位*/ {name:'printTime'}, /*打印时间*/ {name:'cancel'} /*取消计划*/ ]), sortInfo:{field:'symbol',direction:'DESC'} /*排序*/ }); /*列模型中渲染的按钮*/ var cancelRender = function cancel(value){ cancelButton='<TABLE class="x-btn-wrap x-btn x-btn-text-icon" id=save style="WIDTH:55px" cellSpacing=0 cellPadding=0 border=0>'; cancelButton+='<TBODY><TR><TD class=x-btn-left><I> </I></TD>'; cancelButton+='<TD class=x-btn-center><EM unselectable="on"><BUTTON id=ext-gen97 onclick=cancel('+value+')>取消</BUTTON></EM></TD>'; cancelButton+='<TD class=x-btn-right><I> </I></TD></TR></TBODY></TABLE>'; return cancelButton; }; /*表格显示项 - 列模型*/ var cm = new Ext.grid.ColumnModel([ {header:'编号', width:200,dataIndex:'symbol'}, {header:'地址', width:200,dataIndex:'smbDesc'}, {header:'户数', width:200,dataIndex:'planedCnt'}, {header:'计划日期',width:200,dataIndex:'checkDatePlan'}, {header:'安检单位',width:200,dataIndex:'checkUnit'}, {header:'打印时间',width:150,dataIndex:'printTime'}, {header:'取消计划',width:150,dataIndex:'planedId',renderer:cancelRender} ]); /*表格面板*/ var grid = new Ext.grid.GridPanel({ store:store, cm:cm, loadMask: true, stripeRows:true, viewConfig:{forceFit:true} }); /*触发按钮事件*/ var cancel = function(value){ Ext.Msg.confirm('提示','是否确定取消该计划?',function(btn){ if(btn!='yes'){ return; } Ext.Ajax.request({ url:'TestAction!testMethod.action', callback:function(o,s,r){ if(r.responseText=='success'){ Ext.Msg.alert('提示','取消成功!'); return; }else{ Ext.Msg.alert('提示','r.responseText'); return; } } }); }); };

 

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

 

 

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

 

 

author:xiesj@date:2010.10.27 16:12@blog: http://blog.youkuaiyun.com/xieshengjun2009