PDA

View Full Version : How to add button in DataGrid cell to each row?



Westside
30 Apr 2009, 9:35 AM
Hi,

I have a datagrid that is working fine. I would like to add a button in a cell for each row in my grid. How can I do this?

I know this is a basic question, I searched the forum but couldn't find anything.

Thanks,

:)

-ws

Condor
1 May 2009, 3:18 AM
It's not advisable to add components to rows, because the row will be destroyed and recreated when the data changes, without the component ever knowing it has become invalid.

Instead I would suggest using RowActions or CellActions (see here (http://extjs.com/forum/showthread.php?t=29961)).

eyurdakul
1 May 2009, 4:26 AM
you can try row actions class and add the interactivity in your grids. This extension makes the ExtJS complete.


//this is the definition of the component
var upaction = new Ext.ux.grid.RowActions({
dataIndex: 0,
actions: [{
qtip: 'Move top',
iconCls: 'up-action',
callback: function(grid, record, action, rowIndex, colIndex){
Ext.Ajax.request({
url: 'ajax.php',
params: {
id: record.data.id,
con: 'games',
act: 'movetoup'
},
success: function(response){
league_grid_store.load();
},
failure: function(response){
Ext.Msg.alert('ERROR', 'Error loading leagues!');
league_grid_store.load();
},
scope: this
});
}
}]
});
//and this is where you declare it
columns: [
{your column model bla bla},
upaction, downaction
],
//and also define the plugins property
plugins: [upaction, downaction],
//and don't forget to add
<script type="text/javascript" src="js/Ext.ux.grid.RowActions.js"></script>

i feel really comfortable with the interactive grids since i use this class

KJedi
4 May 2009, 4:17 AM
Does this work in Ext 3?
I tried porting my Ext 2 application to Ext 3 and found some issues, which I've fixed, but this one seems quite strange. It should work, but it doesn't.
No errors, it just doesn't render at all, no DOM element inside the cell.
Here is how I do this (yes, I know that's old style, but should work anyway):


App.Admin.ManageUsers = function(config)
{
...
this.RowActions = new Ext.ux.grid.RowActions({
header:'Widgets',
actions:[{
iconCls:'viewUserWidgets',
tooltip:'View user widgets'
}],
listeners:{
'action':{
fn:this.onAction,
scope:this
}
},
align:'center',
autoWidth:false,
width:60
});
.....
this.ColModel = new Ext.grid.ColumnModel([
......
this.RowActions

]);
config = Ext.applyIf(config, {
title:txt.Users,
store:this.Store,
view:this.GridView,
cm: this.ColModel,
frame:false,
border:0,
clicksToEdit:2,
tbar: [{
.....
}],
plugins:[this.RowActions]
});
App.Admin.ManageUsers.superclass.constructor.call(this, config);
}
Ext.extend(App.Admin.ManageUsers, Ext.grid.EditorGridPanel, {
....
};


I've omitted irrelevant fragments, maybe missed something, I just wanted to illustrated approach I used it was working in Ext 2.2.1, so should work here too.

Any ideas?