写此组件是看了joffice中的表格列中将操作用图标在一个列中实现,但看了源码他们采用的是在renderer中用拼接html标签实现,这样就难维护,不好使用,而且点击图片执行操作的时候作用域是指向整个window,并不能或用很不好的方式去获取表格本身这个对象,于是自己写了个,呈现的效果是一样,但使用更方便,作用域好控制,先晒一张效果图,在此展示下效果:
实现代码:
/** * 按钮列按钮表格控件 * @class Ext.ux.grid.MultiImageBtnColumn * @extends Ext.util.Observable * @author hanfei * @cfg buttons @type array or Object * @example : * buttons :[{text : '查看', cls : "btn-task", scope : this, handler : function(v,m,r){alert(r.get("key")+this.getTitle())} }] 需加入css样式 div button { border: none; cursor: pointer; width: 16px; height: 16px; } .btn-task { background: url(task.gif) no-repeat !important; } */ Ext.ux.grid.MultiImageBtnColumn = Ext.extend(Ext.util.Observable,{ constructor : function(config){ Ext.apply(this, config); Ext.ux.grid.MultiImageBtnColumn.superclass.constructor.call(this, config); }, renderer : function(v){ var str= "" ; if(!this.buttons){ return "no buttons"; } if(Ext.isArray(this.buttons)){//如果是数组 for(var i= 0;i<this.buttons.length;i++){ var id = Ext.id();//button id var item = this.buttons[i]; Ext.ux.grid.ColumnHandlers.add({ id: id, fn: item.handler, scope: item.scope || this,//设置作用域 params: Array.prototype.slice.call(arguments,0) }); if(!item.hiddenFn || item.hiddenFn.apply((item.scope || this),Array.prototype.slice.call(arguments,0))){ str+='<button id="' + id + '" title="'+item.text+' " value=" " style="border: none;cursor: pointer;width: 16px;height: 16px;" class="'+item.cls+'" οnclick="(' + this.clickDelegate + ').call(this, event)"></button> ' } } return str ; }else if(Ext.isObject(this.buttons)) {// var id = Ext.id();//button id var item = this.buttons; Ext.ux.grid.ColumnHandlers.add({ id: id, fn: item.handler, scope: item.scope || this,//设置作用域 params: Array.prototype.slice.call(arguments,0) }); if(!item.hiddenFn || item.hiddenFn.apply((item.scope || this),Array.prototype.slice.call(arguments,0))){ str= '<button id="' + id + '" title="'+item.text+' " value=" " style="border: none;cursor: pointer;width: 16px;height: 16px;" class="'+item.cls+'" οnclick="(' + this.clickDelegate + ').call(this, event)"></button> ' } return str; } }, clickDelegate : function(e){ var handler = Ext.ux.grid.ColumnHandlers.get(this.id); e = Ext.EventObject.setEvent(e); if(handler){ handler.fn.apply(handler.scope, handler.params.concat(e)); } } });
调用方式只需在定义表格列的时候像如下方式调用即可:
[new Ext.ux.grid.MultiImageBtnColumn({ header : '操作项', dataIndex : 'userId', width : 80, buttons : [{text : '编辑', cls : "btn-writeFlow", scope : this, handler : this.editUser },{ text :"删除", cls : "btn-viewFlow", scope : this, handler : this.delUser },{ text :"接收任务", cls : "btn-endFlow", scope : this, hiddenFn :function(v,m,r){//此方法用于是否显示该图标按钮 return Ext.isEmpty(r.get("assignee")); }, handler : this.reciveTask }] })
到此一个完整的表格列组件开发完成。