在Extjs Grid扩展一个链接按钮列

问题

想要在Extjs grid每一行添加一个链接或者添加一个按钮，怎么办？

解决方法

实现方法一是用renderer，但是这个链接的方法必须调用全局的变量。
方法二就是我将要介绍的。

ActionColumn是显示一个图标按钮，而我需要一个链接按钮呢？改写ActionColumn代码即可。
代码如下，主要是修改了renderer，如果你想改成button也是可以的：

/*!
 * Ext JS Library 3.3.1
 * Copyright(c) 2006-2010 Sencha Inc.
 * [email protected]
 * http://www.sencha.com/license
 */
Ext.grid.LinkColumn = Ext.extend(Ext.grid.Column, {
    header: ' ',
    linkIdRe: /x-link-col-(\d+)/,
 
    constructor: function(cfg) {
        var me = this,
            items = cfg.items || (me.items = [me]),
            l = items.length,
            i,
            item;
 
        Ext.grid.LinkColumn.superclass.constructor.call(me, cfg);
 
        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-link-col-cell';
            for (i = 0; i < l; i++) {
                item = items[i];
                v += '<a href="javascript:;" class="x-link-col-icon x-link-col-' + String(i) + ' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope||this.scope||this, arguments) : '') + '"' +
                    ((item.tooltip) ? ' ext:qtip="' + item.tooltip + '"' : '') + '>' + (item.text||'') + '</a>';
                if (i < l - 1) v += '&nbsp;&nbsp;&nbsp;&nbsp;';
            }
            return v;
        };
    },
 
    destroy: function() {
        delete this.items;
        delete this.renderer;
        return Ext.grid.LinkColumn.superclass.destroy.apply(this, arguments);
    },
 
    /**
     * @private
     * Process and refire events routed from the GridView's processEvent method.
     * Also fires any configured click handlers. By default, cancels the mousedown event to prevent selection.
     * Returns the event handler's status to allow cancelling of GridView's bubbling process.
     */
    processEvent : function(name, e, grid, rowIndex, colIndex){
        var m = e.getTarget().className.match(this.linkIdRe),
            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.LinkColumn.superclass.processEvent.apply(this, arguments);
    }
});
 
//register ptype
Ext.preg('linkcolumn', Ext.grid.LinkColumn);
 
// register Column xtype
Ext.grid.Column.types.linkcolumn = Ext.grid.LinkColumn;
使用方法
引用扩展的文件后，在grid columns加一个xtype: ‘linkcolumn’的列
    {
            xtype: 'linkcolumn',
            header: '操作',
            width: 100,
            sortable: true,
            items: [{
                text: '查看',
                handler: function(grid, rowIndex, colIndex) {
                    var record = grid.store.getAt(rowIndex);
                    new stat_task_his_win({
                        record: record
                    });
                }
            }]
    }

方法：覆盖actioncolumn类，修改代码 

 Ext.define('ActionTextColumn', {
     extend: 'Ext.grid.column.Action',
     alias: ['widget.actiontextcolumn'],
     constructor: function(config) {
         var me = this,
             cfg = Ext.apply({}, config),
             items = cfg.items || [me],
             l = items.length,
             i,
             item;
         delete cfg.items;
         me.callParent([cfg]);
         me.items = items;
         me.renderer = function(v, meta) {
             v = Ext.isFunction(cfg.renderer) ? cfg.renderer.apply(this, arguments)||'' : '';
             meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
             for (i = 0; i < l; i++) {
                 item = items[i];
                 item.disable = Ext.Function.bind(me.disableAction, me, [i]);
                 item.enable = Ext.Function.bind(me.enableAction, me, [i]);
                 /*v += '<img alt="' + (item.altText || me.altText) + '" src="' + (item.icon || Ext.BLANK_IMAGE_URL) +
                     '" class="' + Ext.baseCSSPrefix + 'action-col-icon ' + Ext.baseCSSPrefix + 'action-col-' + String(i) + ' ' + (item.disabled ? Ext.baseCSSPrefix + 'item-disabled' : ' ') + (item.iconCls || '') +
                     ' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope||me.scope||me, arguments) : (me.iconCls || '')) + '"' +
                     ((item.tooltip) ? ' data-qtip="' + item.tooltip + '"' : '') + ' />';*/

                 v += '<a href="javascript:void(0);"' +
                     ' class="' + Ext.baseCSSPrefix + 'action-col-icon ' + Ext.baseCSSPrefix + 'action-col-' + String(i) + ' ' + (item.disabled ? Ext.baseCSSPrefix + 'item-disabled' : ' ') + (item.cls || '') +
                     ' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope||me.scope||me, arguments) : (me.iconCls || '')) + '"' +
                     ((item.tooltip) ? ' data-qtip="' + item.tooltip + '"' : '') + '>' + (item.text || me.text) + '</a>';
             }
             return v;
         };
     }
 });