View Full Version : Ext.ux.RowWithCellSelectionModel

Steffen Hiller
27 Jun 2008, 9:59 AM
I recently published another Ext JS extension at http://github.com/steffen/ext.ux.rowwithcellselectionmodel/ I want to let you know about.


This Ext JS extension enables the user to activate the editor of an editable cell in an Ext.grid.EditorGridPanel
through a double click, to navigate through the cells via the cursor keys and select one or multiple rows through
the mouse or through the cursor keys, if no cell is currently selected.
In summary, this selection model is a combination of the two built-in selection models Ext.grid.RowSelectionModel
and Ext.grid.CellSelectionModel.
I created it out of the need to be able to add, edit and delete records in an EditorGridPanel. To delete one or
multiple records, the user needs to select one or multiple rows which is not possible when using the default


git clone git://github.com/steffen/ext.ux.rowwithcellselectionmodel.git
download the files from http://github.com/steffen/ext.ux.rowwithcellselectionmodel/tarball/master
and put them in a public accessible folder.
Include the RowWithCellSelectionModel.js file in the header of your html page after the Ext JS files.


new Ext.grid.EditorGridPanel({
ds: your_data_store,
cm: your_column_model,
sm: new Ext.ux.RowWithCellSelectionModel()


There exists another extension called Ext.ux.grid.RowAction by Jozef Sakalos, aka Saki, which enables you to add
icons with actions to grid rows. You can't delete multiple records at once, but it's worth a look. See http://rowactions.extjs.eu/ for more infos.

12 Aug 2008, 1:24 PM
Hi Steffen,

This plugin is what I've been looking for. I've used it and it works quite well, however I do have one question about it.

I've noticed whenever I edit and update a cell in an EditorGridPanel, the row highlight dissappears. Now, would you happen to know whether there is a way to persist the row highlight immediately after augmenting and updating the cell's value, or did you design this plugin to remove the row highlight after a cell update? Any input would be appreciated.

Steffen Hiller
12 Aug 2008, 2:23 PM
Hey silvertear,

yes, it's supposed to deselect the row after it as been edited. There was actually a bug with this which I recently fixed and just pushed to the github repo. Before it removed the highlighting but had the row still marked as selected internal, which resulted in not being able to select the row again after editing.
Well, to get your desired behaviour, I would suggest setting an edit listener at the end of the initEvents method (where the afteredit listener is set) which has a handler that calls this.selectRow(e.row).

I hope that helps,

12 Aug 2008, 2:38 PM
Ok, thanks for letting me know that the deselect is the programmed behavior. I've tried adding an "afteredit" listener to the grid at the end of the initEvents inside the "isEditor" check as follows:

this.grid.on("beforeedit", this.beforeEdit, this);
//Adding the "afteredit" event listener to call "this.selectRow(e.row, false)"
this.grid.on("afteredit", this.afterEdit, this);

I've tried this; and while the "this.afterEdit" function is called immediately after the cell is edited and updated, this does not result in the highlighting of the row.

5 Mar 2009, 2:37 AM
This SelectionModel is great; exactly what i needed.

I've found the following bug:
I have an EditorGridPanel with a PaggingToolBar boath bind to a store.
When initially rendered, my grid shows 2 rows loaded via the store from the server.

To reproduce the bug:

I add a 3td row (clicking a button that executes grid.store.add() method) and select a cell of the new row; then i click the refresh button of the PagginToolBar, the grid is loaded again with the original 2 rows; Now, if i try to click any row, i get an error:
"this.getRow(row) is undefined".

It seems like the grid still thinks that the selected row is the previously added row, witch no longer exists.

This doesn't happen if i add the new row and then change the selection clicking on any of the 2 first rows and then refreshing the grid.

I couldn't get what to modify or even when the selection is not getting updated.

Please if you could help me found a solution i'd be really thankfull.

5 Mar 2009, 1:36 PM
This would do the trick:

onRefresh: function() {

Still have a problem left; if i add a new row, select a cell in the row, and then add another new row without changing the actual selection, when i click the refresh buton i get the error "this.getRow(row) is undefined" right away.

I'll try to find a solution and i'll post it.

5 Mar 2009, 1:49 PM
Ok, that was easy, the view was trying to get access to a cell witch no longer exist,
so i have to avoid that when clearing the selection by passing true.

onRefresh: function() {

5 Mar 2009, 4:55 PM
Another Fix:

If you have more than one selected row, and startedit a cell by code (not by user interaction) the rows remain selected.
I fix it by clearing all selected rows before edit not just the row where the edited cell is.

beforeEdit : function(e){
this.select(e.row, e.column, false, true, e.record);