1. #1
    Sencha User
    Join Date
    Oct 2008
    Posts
    39
    Vote Rating
    0
    rahesh is on a distinguished road

      0  

    Default How to add an Extjs button into an extjs grid cell

    hi

    Anybody know how to add Extjs buttons to the cells of gridpanel.
    I have added the button ,but failed to get the row index when click event occurs..

    Please help me in this...

    Thanks in Advance

    regards
    Rahesh

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    3
    tryanDLS is on a distinguished road

      -1  

    Default

    Please post in the correct forum.

    Start here http://extjs.com/learn/Ext_FAQ_Grid

  3. #3
    Ext User
    Join Date
    Apr 2009
    Posts
    34
    Vote Rating
    0
    KingKahn is on a distinguished road

      0  

    Default Here you go dude

    Cut and paste this code.
    Code:
        
    Ext.ns('Ext.ux.grid');
    Ext.ux.grid.RowAction = function(config) {
    Ext.apply(this, config);
    this.addEvents({
    beforeaction: true
    , action: true
    });
    Ext.ux.grid.RowAction.superclass.constructor.call(this);
    }; // EndConfig
    Ext.extend(Ext.ux.grid.RowAction, Ext.util.Observable, {
    header: 'Action'
    , dataIndex: ''
    , sortable: false
    , width: 75
    , align: 'center'
    , fixed: false
    , iconCls: ''
    , toolTip: 'Mark Attended'
    // 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 += '> </div>';
    return retval;
    } .createDelegate(this);
    }
    } // eo function init
    // override for custom processing
    , getIconCls: function(record, row, col) {
    returnthis.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
    });
    In your Ext.onReady() declare a variable of the type Ext.ux.Grid.RowAction and pass in the iconCls you want to use and the qtip if any. For example
    var action = new Ext.ux.grid.RowAction({ iconCls: 'xxx' });

    In your columnModel add action as the last column.

    In your store object add
    plugin:action

Thread Participants: 2