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

    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
    2
    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

    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar