Extjs Grid ActionColumn 操作按钮

最近项目使用Ext，其中Grid的操作列使用了扩展Ext.ux.grid.RowActions，但在IE下有点问题，单击按钮时，不会自动选中该行，能正确触发事件，其实也不会是问题。

今天偶然发现原来Ext中就有一个叫Ext.grid.ActionColumn的列类型。看了下与RowActions很相似，但只能显示图标且不接受iconCls，只接受图片路径，于是把RowActions的搬了来过与扩展ActionColumn，这样ActionColumn就像RowActions一样了，使用上更方便，因为RowActions是plugin

扩展代码如下：
文件：Ext.ux.grid.ActionColumn.js

Ext.ns("Ext.ux.grid");
/**
 * 结合rowAction和ActionColumn写的图标操作列
	 * 示例：<pre><code>
	 * 			{
					xtype:'uxactioncolumn',
					header:this.actionColumnHeader,
					autoWidth:false,
					width:this.actionColumnWidth,				
					items: [{
					iconCls:'icon-edit',
					tooltip:'示例',
					text:'示例',
					stopSelection:false,
					scope:this,
					handler:function(grid, rowIndex, colIndex){
						this.onUpdate();
					}
				}
			</code></pre>
 * @class Ext.ux.grid.ActionColumn
 * @extends Ext.grid.ActionColumn
 */
Ext.ux.grid.ActionColumn = Ext.extend(Ext.grid.ActionColumn, {
	constructor: function(cfg) {
        var me = this,
            items = cfg.items || (me.items = [me]),
            l = items.length,
            i,
            item;

        Ext.grid.ActionColumn.superclass.constructor.call(me, cfg);

//      Renderer closure iterates through items creating an <img> element for each and tagging with an identifying 
//      class name x-action-col-{n}
        me.renderer = function(v, meta) {
//          Allow a configured renderer to create initial value (And set the other values in the "metadata" argument!)        	
            v = Ext.isFunction(cfg.renderer) ? cfg.renderer.apply(this, arguments)||'' : '';
            meta.css += ' x-action-col-cell';
            for (i = 0; i < l; i++) {
                item = items[i];
                var cls = Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope||this.scope||this, arguments) : '';
                var tooltip = item.tooltip ? (' ext:qtip="' + item.tooltip + '"') : '';
				v+='<div class="ux-action-col-item '+(item.iconCls||'')+' x-action-col-' + String(i) + ' '
				+ (item.text? 'ux-action-col-text ':'')
				+ cls + '"'
				+ tooltip +' >'
				+ (item.text? '<span '+ tooltip +'>'+item.text+'</span>':'') 
				+'</div>';
            }
            return v;
        };
    },
    
//	constructor: function(cfg) {
//        var me = this,
//            items = cfg.items || (me.items = [me]),
//            l = items.length,
//            i,
//            item;
//
//        Ext.grid.ActionColumn.superclass.constructor.call(me, cfg);
//
////      Renderer closure iterates through items creating an <img> element for each and tagging with an identifying 
////      class name x-action-col-{n}
//        me.renderer = function(v, meta) {
////          Allow a configured renderer to create initial value (And set the other values in the "metadata" argument!)
//            v = Ext.isFunction(cfg.renderer) ? cfg.renderer.apply(this, arguments)||'' : '';
//
//            meta.css += ' x-action-col-cell';
//            for (i = 0; i < l; i++) {
//                item = items[i];
//                v += '<img alt="' + (item.altText || me.altText) + '" src="' + (item.icon || Ext.BLANK_IMAGE_URL) +
//                    '" class="x-action-col-icon x-action-col-' + String(i) + ' ' + (item.iconCls || '') +
//                    ' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope||this.scope||this, arguments) : '') + '"' +
//                    ((item.tooltip) ? ' ext:qtip="' + item.tooltip + '"' : '') + ' />';
//            }
//            return v;
//        };
//    },
    
    processEvent : function(name, e, grid, rowIndex, colIndex){   	
        var t = e.getTarget('.ux-action-col-item');
        if(t){
	        var m = t.className.match(this.actionIdRe),item, fn;
	        if (m && (item = this.items[parseInt(m[1], 10)])) {
	            if (name == 'click') {
	                (fn = item.handler || this.handler) && fn.call(item.scope||this.scope||this, grid, rowIndex, colIndex, item, e);
	            } else if ((name == 'mousedown') && (item.stopSelection !== false)) {
	                return false;
	            }
	        }
        }
        return Ext.grid.ActionColumn.superclass.processEvent.apply(this, arguments);
    }
});
Ext.apply(Ext.grid.Column.types, {
	uxactioncolumn : Ext.ux.grid.ActionColumn
});

CSS文件：Ext.ux.grid.ActionColumn.css

/* styles for rows */
.ux-action-col-cell .x-grid3-cell-inner {
	padding:1px 0 0 0;
}
.ux-action-col-item {
	float:left;
	min-width:16px;
	height:16px;
	background-repeat:no-repeat;
	margin: 0 3px 0 2px;
/*	margin: 1px 5px 0 2px; */
	cursor:pointer;
	overflow:hidden;
}
.ext-ie .ux-action-col-item {
	width:16px;
}
.ext-ie .ux-action-col-text {
	width:auto;
}
.ux-action-col-item span {
	vertical-align:middle;
	/** modify by wukq at 2012-03-28 **/
	padding:0 0 0 18px;
	/**padding:0 0 0 20px;**/
	line-height:18px;
}
.ext-ie .ux-action-col-item span {
	width:auto;
}

使用时，在grid的columns中配置项就行:

{
					xtype:'uxactioncolumn',
					header:'操作',
					autoWidth:false,
					width:80,				
					items: [{
					iconCls:'icon-edit',
					tooltip:'示例',
					text:'示例',
					stopSelection:false,
					scope:this,
					handler:function(grid, rowIndex, colIndex){
						this.onUpdate();
					}
				}

或

{
				name:'pingResult',
				xtype:'uxactioncolumn',
				header:'ping结果',
				autoWidth:false,
				sortable : true,
				width:50,				
				items: [
					{
						getClass: function(html, meta, rec) {          // Or return a class from a function
							var v = rec.get("pingResult");
	                        if (v == 1) {
	                            this.items[0].tooltip = '通';
	                            return 'icon-circle-green';
	                        }else{
	                            this.items[0].tooltip = '不通';
	                            return 'icon-circle-red';
	                        }
	                    }
					}
				]
			}