PDA

View Full Version : How to add an Extjs button into an extjs grid cell



rahesh
25 Apr 2009, 1:57 AM
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

tryanDLS
25 Apr 2009, 7:29 AM
Please post in the correct forum.

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

KingKahn
26 Apr 2009, 2:48 PM
Cut and paste this 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