GridPanel添加按钮列和响应函数

先介绍一下在grid面板添加按钮列的方法，这种方法也比较常用吧。只展示前端的编程哦，后台的java代码太多太累赘了，涉及到的ajax等等数据交互，就当作是个alert函数看待吧~ 上菜了，代码如下。

var colmldetail=new Ext.grid.ColumnModel({columns:[new Ext.grid.RowNumberer(),   sm,        {header: "共享视图名称", sortable: true, width:100, align:'center', dataIndex: 'pageName'} ,        {header: "共享视图地址", sortable: true, width:100,align:'center', dataIndex: 'pageUrl'} ,        {header: "共享视图详细描述", sortable: true,width:300,align:'center',  dataIndex: 'descInfo'} ,        {header: "操作",  sortable: true,width:50, align:'left', dataIndex:'status',renderer:showButton} ,        {header: "id", id:'id', sortable: true, dataIndex: 'id', hidden:true}]});    function showButton(value){//"操作"列字段的显示按钮if (value == '0') {    return "<button>申请</button>";} else{return "<button>查看详情</button>";}}

在grid面板定义了“操作”列，根据该列的值（dataIndex:'status'）判断按钮文字，接下来定义按钮的响应方法。代码如下。

grid.on('cellClick', function(grid, rowIndex, columnIndex, e){if(columnIndex == 5){var record =  grid.store.getAt(rowIndex);var interface_id = "view_"+record.get("id");var interface_name = record.get("pageName");var state = record.get("status");if(state=='0'){    applywin.show();    var aform = Ext.getCmp('applyform').getForm();    aform.reset();    //aform.url=fullpath+'/esb/InterfaceApplyAdd.do';    Ext.getCmp('interface_id_Add').setValue(interface_id);                Ext.getCmp('interface_name_Add').setValue(interface_name);}else{Ext.Ajax.request({    url:fullpath+'/esb/InterfaceApplyGet.do',    success:function(_response,_options){        detailwin.show();   var obj = Ext.util.JSON.decode(_response.responseText);      var dform = Ext.getCmp('detailform').getForm();       dform.setValues(obj.datas);  //注意设置form值的语句需要在show函数后，因为此时的form还没有创建or Render    Ext.getCmp('interface_id').setValue(interface_id);                Ext.getCmp('interface_name').setValue(interface_name);                if(Ext.getCmp('status').getValue()=='apply'){Ext.getCmp('status').setValue("申请中");Ext.getCmp('replyBtn').show()}                if(Ext.getCmp('status').getValue()=='agree'){Ext.getCmp('status').setValue("已通过");Ext.getCmp('replyBtn').hide()}                if(Ext.getCmp('status').getValue()=='rejected'){Ext.getCmp('status').setValue("未通过");Ext.getCmp('replyBtn').show()}},    failure: function(){ Ext.Msg.alert('信息','查询失败');    },   params: {interface_id:interface_id}});}}});

开始的“if(columnIndex == 5){“，指的是第五列，即”操作“列，可以清晰看到参数的调度。

像这些”Ext.getCmp('interface_id').setValue(interface_id)“的操作，是把值附到弹出窗口的from（下面展示）里面了，Ext.getCmp()操作对应的是id。

像这些”if(Ext.getCmp('status').getValue()=='agree'){Ext.getCmp('status').setValue("已通过");Ext.getCmp('replyBtn').hide()}“的操作，考虑到申请会有被拒、通过的情况，所以定义了”重新申请“按钮（id：replyBtn），根据”status“判断是否显示。

顺便也贴上弹出框的代码，如下所示。

//申请(新增)var applyform={usepurse:'applyform',id:'applyform',xtype:'form',url:fullpath+'/esb/InterfaceApplyAdd.do', baseCls:"x-plain",style:"padding:5px",items:[{          xtype:'hidden',name:'interface_id_Add',fieldLabel: '接口ID', id:'interface_id_Add',          anchor:'95%'      },{          xtype:'hidden',name:'interface_name_Add',fieldLabel: '接口名称', id:'interface_name_Add',          anchor:'95%'      },{          xtype:'textarea',name:'applyreason_Add',fieldLabel: '申请理由', id:'applyreason_Add',          allowBlank:false,height:150,          anchor:'95%'    }        ]};var applywin=new Ext.Window({        title:"申请",    bodyStyle:'padding:5px',    closeAction :'hide', plain: true,        frame: true,        id:'applywin',        width: 600,    height:250,    layout:"form",        items:[applyform],   buttons:[{   text:"提交",   handler:function(){    if(  Ext.getCmp('applyform').getForm().isValid()){       var bf=Ext.getCmp('applyform').getForm();        Ext.getCmp('applyform').getForm().submit({     waitTitle:"等待中.....",    waitMsg:"正在提交数据，请稍.....",    failure:function(){    Ext.Msg.alert('信息','操作失败，请检查服务器!');       applywin.hide();    },    success:function(_form,_action){        Ext.Msg.alert('信息','操作成功!');        applywin.hide();        store.load({params:{start:0, limit:15}});     }  });     }   }   },{    text:"关闭页面",    handler:function(){   applywin.hide();    }   }]});//查看详情var detailform={       usepurse:'detailform',       id:'detailform',       xtype:'form',       baseCls:"x-plain",       style:"padding:5px",  items:[{          xtype:'hidden',name:'interface_id',fieldLabel: '接口ID', id:'interface_id',          anchor:'95%'      },{          xtype:'hidden',name:'interface_name',fieldLabel: '接口名称', id:'interface_name',          anchor:'95%'      },{          xtype:'textarea',name:'applyreason',fieldLabel: '申请理由', id:'applyreason',          allowBlank:false,height:130,          anchor:'95%'    },{          xtype:'textfield',name:'status',fieldLabel: '审核情况', id:'status',//状态          readOnly:true,anchor:'95%'      },{          xtype:'textfield',name:'replydesc',fieldLabel: '审核回复', id:'replydesc',          readOnly:true,anchor:'95%'      }        ]    };var detailwin=new Ext.Window({        title:"详情",    bodyStyle:'padding:5px',    closeAction :'hide', plain: true,        frame: true,        id:'detailwin',        width: 600,    height:300,    layout:"form",        items:[detailform],   buttons:[   {   id:'replyBtn',    text:"重新申请",   handler:function(){  detailwin.hide();    applywin.show();    var reaform = Ext.getCmp('applyform').getForm();    reaform.reset();    reaform.url=fullpath+'/esb/InterfaceApplyChange.do';    Ext.getCmp('interface_id_Add').setValue(Ext.getCmp('interface_id').getValue());                Ext.getCmp('interface_name_Add').setValue(Ext.getCmp('interface_name').getValue());}   },{    text:"关闭",    handler:function(){   detailwin.hide();    }   }   ]});

这里注意，关于弹出窗口的大小，反正不用钱，不能太小气。。。

/************************** 华丽的分割线 *******************************/

另外，也有第二种添加按钮列和响应函数的办法，上菜。

{header: "操作",sortable: true,width:50,align:'left', dataIndex:'status',renderer:showButton}

这个function showButton(value)函数，可以这样定义：

function showButton(){     if (value == '0') {       return "<input type='button' value='添加' onclick='addFn();' >" ;        } else{       return "<input type='button' value='查看详情' onclick='viewFn();' >" ; }    }    function addFn(){   //注意该函数应该是全局函数！ alert('为什么还是——HelloWorld');   }  

两种方法，感觉还是第二种比较javascript一点，比较原味简单好使，而第一种就经过ext封装过了，如果ext不是很熟悉，就用第二种吧。码字辛苦啊，走过路过请点个赞~