Extjs多图标表格操作按钮列组件实现

最新推荐文章于 2022-08-30 10:59:57 发布

最新推荐文章于 2022-08-30 10:59:57 发布 · 441 阅读

文章标签：

#extjs #表格列组件 #图片按钮列组件

Extjs 专栏收录该内容

4 篇文章

订阅专栏

写此组件是看了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+'" onclick="(' + this.clickDelegate + ').call(this, event)"></button>&nbsp;'
					}
				}
				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+'" onclick="(' + this.clickDelegate + ').call(this, event)"></button>&nbsp;'
					}
					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
							}]
		
		})

到此一个完整的表格列组件开发完成。