[1.0] Grid RowActions Plugin

[jsakalos]

MAJOR UPDATE

I have updated RowAction to RowActions (plural) that provides much more features. See http://rowactions.extjs.eu for details. See also Grid CellActions Plugin to get the full concept of grid actions.

Cheers,
Saki

Note: You don't need RowAction + RowActions, use only RowActions. I keep RowAction here only as a reference for users who already used it.

-------- Original post follows -------

Hi folks,

this plugin has been around on the Premium Help Forum for some time and I'm keeping referencing it in some of my answers so I thought that it would deserve it's own thread.

What is it for? Imagine you need some icons in a grid that you want to bind some actions to: delete row, edit row, whatever. That is exactly what this plugin makes easy. It displays an icon and fires two events: beforeaction (return false to cancel) and action (here you put the action you want to execute). Arguments to event contain reference to grid, record of store of row being clicked and index of row.

Code of plugin:

// vim: ts=4:sw=4:nu:fdc=2:nospell
/**
 * RowAction plugin for Ext grid
 *
 * Contains renderer for an icon and fires events when icon is clicked
 *
 * @author    Ing. Jozef Sakalos <jsakalos at aariadne dot com>
 * @date      December 29, 2007
 * @version   $Id: Ext.ux.grid.RowAction.js 126 2008-01-31 03:33:50Z jozo $
 *
 * @license Ext.ux.grid.RowAction is licensed under the terms of
 * the Open Source LGPL 3.0 license.  Commercial use is permitted to the extent
 * that the code/component(s) do NOT become part of another Open Source or Commercially
 * licensed development library or toolkit without explicit permission.
 * 
 * License details: http://www.gnu.org/licenses/lgpl.html
 */

Ext.ns('Ext.ux.grid');

/**
 * @class Ext.ux.grid.RowAction
 * @extends Ext.util.Observable
 *
 * Creates new RowAction plugin
 * @constructor
 * @param {Object} config The config object
 *
 * @cfg {String} iconCls css class that defines background image
 */
Ext.ux.grid.RowAction = function(config) {
    Ext.apply(this, config);

    this.addEvents({
        /**
         * @event beforeaction
         * Fires before action event. Return false to cancel the subsequent action event.
         * @param {Ext.grid.GridPanel} grid
         * @param {Ext.data.Record} record Record corresponding to row clicked
         * @param {Integer} rowIndex 
         */
         beforeaction:true
        /**
         * @event action
         * Fires when icon is clicked
         * @param {Ext.grid.GridPanel} grid
         * @param {Ext.data.Record} record Record corresponding to row clicked
         * @param {Integer} rowIndex 
         */
        ,action:true
    });

    Ext.ux.grid.RowAction.superclass.constructor.call(this);
};

Ext.extend(Ext.ux.grid.RowAction, Ext.util.Observable, {
     header:''
    ,sortable:false
    ,dataIndex:''
    ,width:20
    ,fixed:true
    ,lazyRender:true
    ,iconCls:''

    // private - plugin initialization
    ,init:function(grid) {
        this.grid = grid;
        var view = grid.getView();
        grid.on({
            render:{scope:this, fn:function() {
                view.mainBody.on({
                    click:{scope:this, fn:this.onClick}
                });
            }}
        });
        if(!this.renderer) {
            this.renderer = function(value, cell, record, row, col, store) {
                cell.css += (cell.css ? ' ' : '') + 'ux-grid3-row-action-cell';
                var retval = '<div class="' + this.getIconCls(record, row, col) + '"';
                retval += this.style ? ' style="' + this.style + '"' : '';
                retval += this.qtip ? ' ext:qtip="' + this.qtip +'"' : '';
                retval += '> </div>';
                return retval;
            }.createDelegate(this);
        }
    } // eo function init

    // override for custom processing
    ,getIconCls:function(record, row, col) {
        return this.boundIndex ? record.get(this.boundIndex) : this.iconCls;
    } // eo function getIconCls

    // private - icon click handler
    ,onClick:function(e, target) {
        var record, iconCls;
        var row = e.getTarget('.x-grid3-row');
        var col = this.grid.getView().getCellIndex(e.getTarget('.ux-grid3-row-action-cell'));

        if(false !== row && false !== col) {
            record = this.grid.store.getAt(row.rowIndex);
            iconCls = this.getIconCls(record, row.rowIndex, col);
            if(Ext.fly(target).hasClass(iconCls)) {
                if(false !== this.fireEvent('beforeaction', this.grid, record, row.rowIndex)) {
                    this.fireEvent('action', this.grid, record, row.rowIndex, e);
                }
            }
        }
    } // eo function onClick
});

// eof 

You need also css:

.ux-grid3-row-action-cell .x-grid3-cell-inner {
    padding: 1px 0 0 0;
}
.ux-grid3-row-action-cell .x-grid3-cell-inner div {
    background-repeat:no-repeat;
    width:16px;
    height:16px;
    cursor:pointer;
}

And an example usage would be:

var action = new Ext.ux.grid.RowAction({iconCls:'xxx',qtip:'yyy'});
var grid = new Ext.grid.GridPanel({
    columns:[action, ....],
    plugins:[action, ....]
});
action.on('action', function(grid, record) {...}); 

[vendiddy]

Thanks! I had some hacked-together code to accomplish something like this, but this is much better.

I tried it and it works without any issues.

[sfwalter]

I tried creating two instances but the my action listener seems to get called for all the instance. For example if I have 2 instances (a delete and a rollback button). When I click on the "rollback" button the delete action gets executed and vice versa.

any thoughts?

[jsakalos]

You need to have one instance per column. I'd suspect there some mismatch there - I use several row actions in one grid w/o troubles.

[jsakalos]

Some code that illustrates that:

    ,initComponent:function() {

        this.actionOpen = new Ext.ux.grid.RowAction({
             iconCls:'icon-go-tab'
            ,qtip:this.openSetText
        });
        this.actionDelete = new Ext.ux.grid.RowAction({
             iconCls:'icon-trash-closed'
            ,qtip:this.deleteText
        });
        Ext.apply(this, {
            ......
            ,plugins:[
                 new Ext.ux.grid.Search({position:'top'})
                ,this.actionDelete
                ,this.actionOpen
            ]
        ..... 

[jerrybrown5]

Saki,
It looks really nice, but out of curiosity how difficult would it be to allow multiple actions to be in the same column? To take it to the final wish list step would it be possible to put an action item in the middle of a field while using a custom renderer on a grid column?

Best regards,
Jerry Brown

[jsakalos]

Saki,
It looks really nice, but out of curiosity how difficult would it be to allow multiple actions to be in the same column? To take it to the final wish list step would it be possible to put an action item in the middle of a field while using a custom renderer on a grid column?

Best regards,
Jerry Brown

Something like on screenshot? I'll take a look

[jerrybrown5]

Thanks Saki. That is part of what I'm looking for. Also, I was thinking if you can put an action in a custom renderer (of course I would have to put a certain class name around the action button div) then I'll be able to put an action button in a grid grouping row.

Best regards,
Jerry Brown

[jsakalos]

You can set your renderer from outside even in the current version. Take a look at the code.

[jsakalos]

MAJOR UPDATE

I have updated RowAction to RowActions (plural) that provides much more features. See http://rowactions.extjs.eu for details.

Cheers,
Saki