[1.0] Grid RowActions Plugin

[pramodkhare]

Hi,
I am using rowactions plugin, and for normal row-action the hideIndex is working fine.
But i have a requirement where the groupaction buttons will show/hide depending on data i.e.like hideIndex for normal actions.

I read the API and checked actual implementation code of Ext.ux.grid.RowActions plugin.
And i found out both normal row-actions(actions for normal grid rows) and groupactions, both are processed by
processactions internal function where it checks for hideIndex value.

Now my problem is, even if give hideIndex (i.e. data index of store according to which this action to show/hide), it is always showing, so i was wondering ....is it possible to have groupactions which are data /situation dependent i.e. hide/show.

If yes can anyone give me any example, how to do it?

My Code is -

Users.getGroupActions = function(){
var items = new Array();
items.push({
        iconCls : 'icon-user-lock',
        qtip : "Lock User Account",
        hideIndex : 'hideLockUser',
        align : 'left',
        callback : function(grid, records, action, groupId) {
            var operation = Enum.Users.Operations.LOCKUSER;
            alert("Account locked");
            //UsersHandlers.handleGroupAction(grid, records,action, groupId, operation);
        }//eo callback
    });
    
    items.push({
        iconCls : 'icon-user-unlock',
        qtip : "Unlock User Account",
        align : 'left',
        hideIndex : 'hideUnlockUser',
        hide : true,
        callback : function(grid, records, action, groupId) {
            var operation = Enum.Users.Operations.UNLOCKUSER;
            //UsersHandlers.handleGroupAction(grid, records,action, groupId, operation);
            alert("Account Unlocked");
        }//eo callback
    });
}

this.action = new Ext.ux.grid.RowActions({
                    header : 'Actions',//TODO: Add this to column headers namespace
                    keepSelection : true,
                    /**
                     * The different actions performed on any row (Roles) are
                     * listed in actions The callback function performs the
                     * necessary action
                     */
                    actions : [{
.......
}],

groupActions : Users.getGroupActions()//gets group(user) actions

Data sent also has hideIndexes properly configured.

example data -

forget unnecessary indexes.... other hide indexes ...those are which i was trying......
{
    "class": "consult.framework.util.JsonObjectResponse",
    "data": [
        {
            "application": "IPAD",
            "casebase": "APPLE",
            "class": "consult.framework.VO.UsersVO",
            "email": "sdfsf@sdfsdf.cv",
            "fullname": "ADMIN1",
            "hideLockUser": false,
            "hideRoleNew": true,
            "hideRolesDelete": false,
            "hideUnlockUser": true,
            "hideUserDelete": false,
            "hideUserEdit": true,
            "id": "58",
            "isAccountLocked": "0",
            "name": "ADMIN1",
            "permversion": "0",
            "role": "Admin",
            "userid": "67"
        },
        {
            "application": "IPHONE",
            "casebase": "APPLE",
            "class": "consult.framework.VO.UsersVO",
            "email": "sdfsf@sdfsdf.cv",
            "fullname": "ADMIN1",
            "hideLockUser": false,
            "hideRoleNew": true,
            "hideRolesDelete": false,
            "hideUnlockUser": true,
            "hideUserDelete": false,
            "hideUserEdit": true,
            "id": "59",
            "isAccountLocked": "0",
            "name": "ADMIN1",
            "permversion": "0",
            "role": "Admin",
            "userid": "67"
        },
        {
            "application": "IPOD",
            "casebase": "APPLE",
            "class": "consult.framework.VO.UsersVO",
            "email": "sdfsf@sdfsdf.cv",
            "fullname": "ADMIN1",
            "hideLockUser": false,
            "hideRoleNew": true,
            "hideRolesDelete": false,
            "hideUnlockUser": true,
            "hideUserDelete": false,
            "hideUserEdit": true,
            "id": "60",
            "isAccountLocked": "0",
            "name": "ADMIN1",
            "permversion": "0",
            "role": "Admin",
            "userid": "67"
        },
        {
            "application": "IPAD",
            "casebase": "APPLE",
            "class": "consult.framework.VO.UsersVO",
            "email": "sdfsdf@dfsd.cvdf",
            "fullname": "AUTHOR1",
            "hideLockUser": false,
            "hideRoleNew": true,
            "hideRolesDelete": false,
            "hideUnlockUser": true,
            "hideUserDelete": false,
            "hideUserEdit": true,
            "id": "52",
            "isAccountLocked": "0",
            "name": "AUTHOR1",
            "permversion": "0",
            "role": "Author",
            "userid": "65"
        },
        {
            "application": "IPHONE",
            "casebase": "APPLE",
            "class": "consult.framework.VO.UsersVO",
            "email": "sdfsdf@dfsd.cvdf",
            "fullname": "AUTHOR1",
            "hideLockUser": false,
            "hideRoleNew": true,
            "hideRolesDelete": false,
            "hideUnlockUser": true,
            "hideUserDelete": false,
            "hideUserEdit": true,
            "id": "53",
            "isAccountLocked": "0",
            "name": "AUTHOR1",
            "permversion": "0",
            "role": "Author",
            "userid": "65"
        },
        {
            "application": "IPOD",
            "casebase": "APPLE",
            "class": "consult.framework.VO.UsersVO",
            "email": "sdfsdf@dfsd.cvdf",
            "fullname": "AUTHOR1",
            "hideLockUser": false,
            "hideRoleNew": true,
            "hideRolesDelete": false,
            "hideUnlockUser": true,
            "hideUserDelete": false,
            "hideUserEdit": true,
            "id": "54",
            "isAccountLocked": "0",
            "name": "AUTHOR1",
            "permversion": "0",
            "role": "Author",
            "userid": "65"
        },
        {
            "application": "ALL",
            "casebase": "ALL",
            "class": "consult.framework.VO.UsersVO",
            "email": "pramod.kh2are@rget.com",
            "fullname": "pramodkhare23",
            "hideLockUser": false,
            "hideRoleNew": true,
            "hideRolesDelete": false,
            "hideUnlockUser": true,
            "hideUserDelete": false,
            "hideUserEdit": true,
            "id": "48",
            "isAccountLocked": "0",
            "name": "Pramod",
            "permversion": "1",
            "role": "Super Admin",
            "userid": "63"
        },
        {
            "application": "IPAD",
            "casebase": "APPLE",
            "class": "consult.framework.VO.UsersVO",
            "email": "asdfsdf@sdfsd.com",
            "fullname": "REVIEWER1",
            "hideLockUser": false,
            "hideRoleNew": true,
            "hideRolesDelete": false,
            "hideUnlockUser": true,
            "hideUserDelete": false,
            "hideUserEdit": true,
            "id": "55",
            "isAccountLocked": "0",
            "name": "REVIEWER1",
            "permversion": "1",
            "role": "Reviewer",
            "userid": "66"
        },
        {
            "application": "IPHONE",
            "casebase": "APPLE",
            "class": "consult.framework.VO.UsersVO",
            "email": "asdfsdf@sdfsd.com",
            "fullname": "REVIEWER1",
            "hideLockUser": false,
            "hideRoleNew": true,
            "hideRolesDelete": false,
            "hideUnlockUser": true,
            "hideUserDelete": false,
            "hideUserEdit": true,
            "id": "56",
            "isAccountLocked": "0",
            "name": "REVIEWER1",
            "permversion": "1",
            "role": "Reviewer",
            "userid": "66"
        },
        {
            "application": "IPOD",
            "casebase": "APPLE",
            "class": "consult.framework.VO.UsersVO",
            "email": "asdfsdf@sdfsd.com",
            "fullname": "REVIEWER1",
            "hideLockUser": false,
            "hideRoleNew": true,
            "hideRolesDelete": false,
            "hideUnlockUser": true,
            "hideUserDelete": false,
            "hideUserEdit": true,
            "id": "57",
            "isAccountLocked": "0",
            "name": "REVIEWER1",
            "permversion": "3",
            "role": "Reviewer",
            "userid": "66"
        }
    ],
    "errorCode": null,
    "message": "USERS_LOADED_SUCCESSFULLY",
    "success": true,
    "totalRows": 18
}

Can anyone help?

[pramodkhare]

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) {...}); 

Hi
I know groupactions are static ones and dont support hideIndex.
But according to my requirements, it is necessary to implement,
I tried to tweak Rowactions source code but it gives error saying .. "values is undefined" in firebug.

I changed grouptpl from original

tplGroup : '<tpl for="actions">'
            + '<div class="ux-grow-action-item<tpl if="\'right\'===align"> ux-action-right</tpl> '
            + '{cls}" style="{style}" qtip="{qtip}">{text}</div>' + '</tpl>'

and added {hide} to style attribute of div

tplGroup : '<tpl for="actions">'
            + '<div class="ux-grow-action-item<tpl if="\'right\'===align"> ux-action-right</tpl> '
            + '{cls}" style="{style}" qtip="{hide}{qtip}">{text}</div>' + '</tpl>'

but it doesn't work...

Consider if i have to do it ...then what else should i modify...
i tried giving same valve of tplaction to tplgroup (with necessary) modifications but still its giving js error..

Is there any other way to do it?
I am tring out different things but yet unsuccessful...

[max.bertolini]

Does it works on ExtJs 4.x ?

[NoahK17]

Does it works on ExtJs 4.x ?

RowActions are built into 4.x. Look up "ActionColumn"

[carlosgoias]

RowActions are built into 4.x. Look up "ActionColumn"

http://www.sencha.com/forum/showthre...-for-Ext-4.0.2

[leonardodaza]

Very useful. Thanks for your input brizardh.

[Zolcsi]

Open up your Ext.ux.RowActions.js file and find the tplGroup/tplRow definition section and change it to this:

    tplGroup:
         '<tpl for="actions">'
        +'<div class="ux-grow-action-item<tpl if="\'right\'===align"> ux-action-right</tpl> '
        +'{cls}" style="{style}" ext:qtip="{qtip}">{text}</div>'
        +'</tpl>'

    ,tplRow:
         '<div class="ux-row-action">'
        +'<tpl for="actions">'
        +'<div class="ux-row-action-item {cls} <tpl if="text">'
        +'ux-row-action-text</tpl>" style="{hide}{style}" ext:qtip="{qtip}">'
        +'<tpl if="text"><span ext:qtip="{qtip}">{text}</span></tpl></div>'
        +'</tpl>'
        +'</div>'

Note the change of qtip to ext:qtip.

That worked like a charm for me, thank you very much!