Results 1 to 3 of 3

Thread: How to add an Extjs button into an extjs grid cell

  1. #1
    Sencha User
    Join Date
    Oct 2008
    Posts
    39

    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

    Default

    Please post in the correct forum.

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

  3. #3

    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

Posting Permissions

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