Many times Ext JS developers are required to extend or add functionality to a widget in the framework.  Some of the solutions include creating an actual extension using Ext.extend or even creating a plugin.  If the requirement is a only for a single-use and is relatively simple to implement, creating an extension or plugin class is overkill.   So the question is, what is the best solution for this type of situation?

I say it’s override and extend on-the-fly at the configuration object, which is possible for just about every class in the framework.   We’ll go into exactly how this works in just a bit.  Before that, I’d like for you to ponder a simple requirement, and we’ll explore an extremely simple one-off solution.

Requirement: Display an Ext JS Window that when closed, a confirmation dialog is requested.  If the actor presses “yes”, then the instance of Window actually closes with an alert confirming the window closing.  OK, I know that it sounds a little silly.  Trust me, in the nearly four years I’ve been developing applications with this framework, silly requirements like this have been presented to me.

OK, how do we solve this easily?  Here is an example that extends the close method, and introduces a new method (alertClose) to the instance of Ext.Window to be created.

Here’s how this works.  In the above code, we extend the close method.  The reason I choose the word “extend” is because, just like when creating an actual extension, we have the ability to call the Window.prototype.close method, which actually will complete the original execution flow.  If we chose not to call the prototype.close method, then this technically would be an override.

The close method will display the Ext.MessageBox.confirm dialog.  The dialog’s callback is an anonymous method that is scoped to the instance of Window that is being created.  It inspects the Button id, which defaults to ‘yes’ or ‘no’.  If the actor clicks ‘yes’, then the  newly added this.alertClose method is called,  alerting the actor that the window closed.  This is  followed by an Ext.Window.prototype.close is call, actually closing (and destroying) the instance of Window that is created.

If the actor clicks the “no” button, then the confirmation dialog hides and all is well again.  Below is the UI flow of the code above.

I’m sure you’re probably thinking: “Wait a minute?!  How the heck is that possible?”  It’s possible because in most classes, the following line exists in the constructor:
Ext.apply(this, config);

This line basically applies whatever is in the configuration object to the instance of the class (this), thus setting override parameters and methods.  This, of course, includes any new methods, such as alertClose (above).

Here it is in Ext.Component (Ext.Window is a descendant of Ext.Component):

And there you have it, you now know how to extend and override a single instance of a class without creating an extension or override.

Extensions and plugins are not obsolete however.  They still retain their value and hold their place in this world.  After I write the “Extensions and Plugins” chapter of Ext JS in Action, I’ll follow up with a somewhat comprehensive guide to constructing these.

Today, the Ext JS team decided to release the blog post that I wrote that details how to make drag and drop possible with generic DOM elements. It teaches the very fundamentals of how this stuff actually works and breaks down the class hierarchy into a readable segments.  Click the link (or image) below to read the blog article.

http://www.extjs.com/blog/2009/09/13/5-steps-drag-and-drop-with-ext-js/

Many thanks to Abe, Shea Frederick (author of Learning Ext JS) and all who have provided feedback for this. I look forward to writing more content for the ExtJS.com blog.

Below is a quick demonstration of the Drag and drop with elements that is covered in chapter 11 of Ext JS in Action.

Here is a quick demonstration of what the plugin will do to Ext JS windows.

I’m elated to share the news that the August edition of JSMag is out today, complete with a five page article that I wrote regarding development of plugins with ExtJS. This article explains the very basics of the Component model and how plugins are brought to life and play a role in the Component model. This article is a mere $4.99, and is worth every penny from my point of view.

Also in this month’s edition is an excellent spread from Shea Frederick, author of Learning Ext JS, which covers events from the ground up. Shea is a leading ExtJS community member and can be contacted via http://vinylfox.com

As a blog visitor, you have an opportunity to get a free copy of this edition of JSMag. Simply click the link above, register and proceed to checkout. Use the following coupon code: xpqjg. Hurry! This is only available to the first 10 customers.

As always, thank you very much for your support in my efforts to bring new and exciting material to help the development community.