Results 1 to 10 of 965

Thread: [1.0] Grid RowActions Plugin

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664
    Vote Rating
    403
      0  

    Default [Now Ext 3.0 Compatible] Grid RowActions Plugin

    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:
    PHP Code:
    // 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(thisconfig);

        
    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.RowActionExt.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:thisfn:function() {
                    
    view.mainBody.on({
                        
    click:{scope:thisfn:this.onClick}
                    });
                }}
            });
            if(!
    this.renderer) {
                
    this.renderer = function(valuecellrecordrowcolstore) {
                    
    cell.css += (cell.css ' ' '') + 'ux-grid3-row-action-cell';
                    var 
    retval '<div class="' this.getIconCls(recordrowcol) + '"';
                    
    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(recordrowcol) {
            return 
    this.boundIndex record.get(this.boundIndex) : this.iconCls;
        } 
    // eo function getIconCls

        // private - icon click handler
        
    ,onClick:function(etarget) {
            var 
    recordiconCls;
            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(recordrow.rowIndexcol);
                if(
    Ext.fly(target).hasClass(iconCls)) {
                    if(
    false !== this.fireEvent('beforeaction'this.gridrecordrow.rowIndex)) {
                        
    this.fireEvent('action'this.gridrecordrow.rowIndexe);
                    }
                }
            }
        } 
    // eo function onClick
    });

    // eof 
    You need also css:
    Code:
    .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:

    PHP Code:
    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(gridrecord) {...}); 
    Attached Images Attached Images
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •