Extjs Grid ActionColumn 작업 단추

최근 프로젝트는 Ext를 사용합니다. 그 중에서 Grid의 작업 열은 Ext.ux를 확장합니다.grid.RowActions, 그러나 IE 아래에 문제가 있습니다. 단추를 눌렀을 때 이 줄이 자동으로 선택되지 않고 이벤트를 정확하게 터치할 수 있지만 문제가 되지 않습니다.
오늘 우연히 원래 Ext 중에 Ext.grid라는 것이 있다는 것을 발견했다.ActionColumn의 열 유형입니다.아래를 보면 Row Actions와 매우 비슷하지만 아이콘만 표시할 수 있고 iconCls를 받아들이지 않고 그림 경로만 받아들입니다. 그래서 Row Actions의 이전과 확장 ActionColumn을 옮겼습니다. 이렇게 하면 ActionColumn은 Row Actions처럼 사용하기 편합니다. Row Actions는 플러그인이기 때문입니다.
확장 코드는 다음과 같습니다.
파일: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';
	                        }
	                    }
					}
				]
			}