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.

Ext.form.FieldSet and Ext.layout.CardLayout

This post is a note to myself and maybe to some others, since I today searched for the second time for a solution for a misbehavior (bug) in Ext JS when using an Fieldset inside a Panel which belongs to a Panel with a CardLayout.
When I set the Panel with the Fieldsets as the active item via panel_with_card_layout.getLayout().setActiveItem('form_with_fieldsets_panel') everything was shown/rendered besides of the form fields inside the Fieldsets.
After a little debugging and breakpoints fun in Firebug, I decided to search in the Ext JS Forum and luckily found the solution for that problem fast, thanks to the Forum's Google Search.

The solution is that you have to call panel_with_card_layout.doLayout() after setting the active item.

In conclusion, the following two lines should always go together when using FieldSets in a CardLayout:

panel_with_card_layout.getLayout().setActiveItem('form_with_fieldsets_panel');
panel_with_card_layout.doLayout();

Here's the note from an Ext Support Team member regarding this problem, which notes that there is another solution when you are using the Ext.TabPanel (which has the CardLayout as default Layout):

This is exactly why layoutOnTabChange was added to tabpanel. Unfortunately this fix wasn't added to card layout, so you'll have to call cardPanel.doLayout(); yourself after cardPanel.render('showcard');
Quote from http://extjs.com/forum/showthread.php?p=156627


Luckily, this is one of the rare bugs you'll run in when working with Ext JS. Pretty much everything else works as expected. :-) After all, a Friday the 13th could be worse. ;-)