SelectionEnabler Plugin for ExtJS

I recently found myself writing the same bit of code for the one-millionth time, and that's when it hit me: "this could easily be a plugin".

The code in question is quite simple, but just enough lines to warrant some thought about how to make it simpler (read as: make my fingers type less). It disables Components based upon the SelectionModel of another component. With a plugin, we can attach events to the selection model automagically through our plugin, and run a chunk of code that would look around for related Components that need to be enabled or disabled. Setting a special config in each Component that you wish to disable or enable will determine what happens to that Component.

The SelectionEnabler

Lets say we have a grid, and we want to disable or enable the infamous "Delete" button, we would first add this plugin, and since this plugin works around the idea of having groups of Components to enable or disable we will tell it what 'group' to look for - in this case its 'deletegrid'.

{ xtype: 'grid', ..., plugins: [new Ext.ux.SelectionEnabler({enablerGroup: 'deletegrid'})], ... }

What this does is tell our grid that it should look for Components in that same group when a selection has been made, and disable or enable them accordingly. The next part of this process is to add the Components that we actually want to be disabled and enabled.

Welcome to "Delete"

As the SelectionEnabler plugin gets the message that a selection has changed, it searches within the layout of the current Component for other Components with the enableOnSinge or enableOnMultiple configs set, and if the group name matches, it enables or disables that Component appropriately. Here we have a button with enableOnSingle set to 'deletegrid' which will enable the button when a single selection is made, but disable it for multiple or no selection.

{ xtype: 'grid', ..., plugins: [new Ext.ux.SelectionEnabler({enablerGroup: 'deletegrid'})], ... bbar: [{ text: 'Single', enableOnSingle: 'deletegrid', disabled: true, handler: deleteRow }] }

That is all that needs to happen for an ExtJS Component (a Button in this case) to be disabled or enabled upon selection. This same method can be used to disable any type of Component, such as Panels, form fields, etc. Currently it works with Grid and Tree selection models (both multiple and single selections) and can enable or disable any component existing in the same layout that has a disable/enable handler.

Screencast Demo

Sometimes a picture (or video) just says it all, so I took this screencast of some simple example uses, which are also included in the code repo.

My next goal with this is to put some type of caching in place for this plugin so it will not be so resource intensive every time a selection change happens.

http://code.google.com/p/ext-ux-selectionenabler/

Additionally, I want to thank Home & Stone for allowing me to contribute this code back to the community, along with the previous release of the HtmlEditor buttons.