PDA

View Full Version : cellcontextmenu rowIndex cellIndex - get cell value



Troy Wolf
18 Oct 2007, 11:03 AM
I'm creating my first Ext grid, and of course I don't just need a simple grid. Oh no...I need column-specific context menus, custom column render functions, custom filterBy functions, etc. Fun stuff. Ext continues to amaze and deliver.

I have added a listener to my grid:

grid.addListener('cellcontextmenu', onCellContextMenu);

I've written a test handler. My goal is to learn how to know the value of the specific cell the user just right-clicked. Here is what I found that works:

var onCellContextMenu = function(grid, rowIndex, cellIndex, e) {
Ext.MessageBox.alert("debug", String.format("{0}", grid.store.data.items[rowIndex].data[grid.store.data.items[rowIndex].fields.keys[cellIndex]]));
};


My question is, do you know a better way to get the cell's value? Am I digging deeper into the object tree than necessary? Specifically, given the rowIndex and cellIndex, is this the best way to get the cell's value?:

grid.store.data.items[rowIndex].data[grid.store.data.items[rowIndex].fields.keys[cellIndex]]

Thanks! ~o)

tryanDLS
18 Oct 2007, 12:04 PM
Rather than trying to alert things to find out what's going on, you should set BPs in Firebug so you can look at what's going on.

grid.getSelectionModel().getSelected() returns an object that has all sorts of info and you can operate on the data for a single row rather than having to use the rowindex.



function onCtxHandler(grid,row,col) {
var sel = grid.getSelectionModel().getSelected();
var colName = sel.fields.keys[col];
var val = sel.data[colName];
}

Troy Wolf
18 Oct 2007, 12:10 PM
Rather than trying to alert things to find out what's going on, you should set BPs in Firebug so you can look at what's going on.
How do you know I did not do that? B) In fact, how in the world would I have figured out that grid has a store which has a data which has an items which has a fields....etc. I did use Firebug. In fact, as huge and object oriented as Ext is, without a tool such as Firebug, I believe it would be nearly impossible to write any Ext code except what you can copy directly from the examples. So yeah, I use Firebug...a lot.

Thanks for the advice regarding grid.getSelectionModel().getSelected();

Animal
18 Oct 2007, 12:37 PM
The above suggestions are not reliable.

The supported and reliable way is:



function onCtxHandler(grid,row,col) {
var rec = grid.getStore().getAt(row); // SelectionModel might not give you one single row!
var colName = grid.getColumnModel.getDataIndex(col); // Columns might move!
var val = rec.get(colName);
}

Troy Wolf
18 Oct 2007, 12:44 PM
function onCtxHandler(grid,row,col) {
var sel = grid.getSelectionModel().getSelected();
var colName = sel.fields.keys[col];
var val = sel.data[colName];
}

Hmmmm...apparently getSelectionModel() is only helpful if something is selected? Right-clicking a cell does not actually select anything. So the code example did not work in my cellcontextmenu event handler.

What I had works and seems just as simple--especially if rewritten to look like this:


var onCellContextMenu = function(grid, rowIndex, cellIndex, e) {
var row = grid.store.data.items[rowIndex];
var colName = grid.store.fields.keys[cellIndex];
var val = row.data[colName];
};


ACTUALLY, it does not quite work -- reason being, my column model does not EXACTLY match my store's columns. The cellIndex returned is the grid's column index, not the store's column index. So, what I REALLY need is this:


var onCellContextMenu = function(grid, rowIndex, cellIndex, e) {
var row = grid.store.data.items[rowIndex];
var colName = grid.colModel.config[cellIndex].dataIndex;
var val = row.data[colName];
};


And...for the benefit of others on the Ext journey, let me add a couple of key elements to this example along with comments:


var onCellContextMenu = function(grid, rowIndex, cellIndex, e) {
// Stop the normal browser handling of the event
// That is, cancel the standard context menu.
e.stopEvent();

// Get the cursor coordinates so we'll know where to show
// our custom context menu later.
var coords = e.getXY();

// Get the row object using the row index passed into this
// event handler.
var row = grid.store.data.items[rowIndex];

// Find the store's data column index name based on the
// column model using the column index that was passed in.
var colName = grid.colModel.config[cellIndex].dataIndex;

// Here is how you can grab the value of the cell that was
// right-clicked.
var val = row.data[colName];

// Do something here relevant to the column and/or the value
// In my case, I have a switch/case statement that calls custom
// context menus depending on the column.

// Display your custom context menu at the correct coordinates.
// Of course cellContextMenu was previously defined elsewhere by
// you, the elite Ext application builder.
cellContextMenu.showAt([coords[0], coords[1]]);
};


Animal's code looks like an even smarter way to access the row and column. Animal, are those get* methods simply wrappers to do what my code above does? I'd think what I did is reliable.

deskwideweb
16 Feb 2011, 10:40 AM
The above suggestions are not reliable.

The supported and reliable way is:



function onCtxHandler(grid,row,col) {
var rec = grid.getStore().getAt(row); // SelectionModel might not give you one single row!
var colName = grid.getColumnModel.getDataIndex(col); // Columns might move!
var val = rec.get(colName);
}


Any plans for a convenience method, getCellValue, that you just pass column & row indices into?

emily82
17 Feb 2011, 11:09 AM
thanks, deskwideweb!

gauravhrg
21 Sep 2011, 10:26 PM
Hi all,
I'm also using a grid in which I've to traverse through each cell
but the problem is that I'm adding a columns to my grid on clicking "add a column" button so my column number is not fix...so I can't use a logic like grid.getStore().getAt(0).data.Day1 in which Day1 is for the first column

Is there any solution for this problem?