PDA

View Full Version : Ext.select with .query selects complete row instead of cell



MarkMan55
21 Dec 2011, 11:51 AM
This one seems so simple but I've not yet figured it out. Using Ext 3.2.1 and the GridPanel, I just want to manipulate the cell in the first column of a row when it is clicked. When the first column cell in a row is clicked I want to simply change the first cell's background color.

I detect if the first column is clicked then run this code to grab the row:


if(rowIndex== 0) { // need this hack for index = 0 or else the whole grid gets the style change :-(
rowEl = Ext.select(".x-grid3-row-first");
} else {
rowEl = Ext.get(Ext.get("ext-gen30").query("div:nth-child(" + (rowIndex+ 1) + ")"));
}


...and this works great. Here I can manipulate the style of the complete row if needed. There does not seem to be a problem when mixing 'get' and 'query'.

But I just want to put a gray background color in the first cell of the row. There is no id associated with it so I must use 'select' instead of 'query':

The div I want to 'select':

<div class="x-grid3-cell-inner x-grid3-col-0" unselectable="on">&nbsp;</div>

Each row has only one div with a class of 'x-grid3-col-0', so I use:

var firstCell = rowEl.select(".x-grid3-col-0");
firstCell.applyStyles({backgroundColor:"#EEEEEE"});

... however, the whole row gets the background color, not just the first cell with the 'x-grid3-col-0' class.


Any suggestions would be greatly appreciated! thanks

mitchellsimoens
21 Dec 2011, 4:00 PM
On the grid view... there is a getCell method that will return the html node when you pass the row index and which column you want.

MarkMan55
22 Dec 2011, 1:16 PM
Excellent suggestion, thanks!

I see that the GridView method of getCell() returns the grid's HTML TD element at the specified coordinates.

this works:

thisVar = grid.getView().getCell(rowIndex, colIndex);
thisVar.style.backgroundColor="red";


I'd really like to get to the bottom of the 'query' not working as expected since that is a powerful tool to use.