Friday, June 27, 2008

Ext.ux.RowWithCellSelectionModel

I recently published another Ext JS extension at http://github.com/steffen/ext.ux.rowwithcellselectionmodel/ I want to let you know about.

Ext.ux.RowWithCellSelectionModel

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 Ext.grid.CellSelectionModel.


Installation

Either
git clone git://github.com/steffen/ext.ux.rowwithcellselectionmodel.git
or 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.



Usage

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


Alternatives

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.

8 comments:

Anonymous said...

This is something that I was looking for. Though how do I get getSelectedCell() equivalent for your extension.

Basically I would want to get the selected rows, do the deletion on the server side and then delete the rows in the EditorGridPanel.

Thanks !

Steffen Hiller said...

Hey,

grid.getSelectionModel().selection for cell,
grid.getSelectionModel().selections for row(s).

There exists a getter method for selections which is getSelections(), maybe a getSelection() should be added by me sometime which conforms with the ext js standard. But accessing the properties directly should do it for now.

Regards,
Steffen

Songa said...

Hi Steffen,

Thanks for the great post, I am trying it out but since I am at a learning stage, I have to ask a stupid question, where do I put the usage javascript code and how do I implement the view?

Thanks!

Maxence said...

Nice work. Thanks for sharing.

Grzegorz Borkowski said...

I've found some small bug in your implementation. In standard RowSelectionModel, in Ext 2.2.1, the method initEvents ends with registration of three listeners on GridView:
view.on("refresh", this.onRefresh, this);
view.on("rowupdated", this.onRowUpdated, this);
view.on("rowremoved", this.onRemove, this);
In your implementation you have only "rowupdated" listener registered in the overriden method. This causes problems during grid refreshing and paging (selection is not visible, but the hasSelection() returns true). After adding two missing listeners into RowWithCellSelectionModel everything seems working again.

Steffen Hiller said...

Thanks for the info, Grzegorz!

I assume that it was added with Ext 2.2, and I only tested and used it with 2.1.

I'll try to fix that (as soon as I have time).

Thanks,
Steffen

Anonymous said...

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.

P.S: I've posted this on Ext forums as a replay to your post about this plugin

Pomuchi said...

Steffen,

I'm really new to Ext with Rails but I need to use a bunch of extensions/plugins from ext-ux on a grid. :S

I did a checkout of the latest version of the ux repository but where do I have to put it in my rails app?

I tried putting it under public/javascripts but I keep getting "Ext.ux.grid undefined" errors. Confused.

Thanks!