PDA

View Full Version : Extending Ext objects



FoobarusMaximus
25 May 2011, 12:11 PM
In jQuery, I can write:

jQuery.fn.spiffify = function() {};

This allows me to select a DOM element wrapped as a jQuery object and call "spiffify":

$("#myDiv").spiffify();

How do I do this in Ext? For example:

Ext.get("myDiv").spiffify();

tryanDLS
25 May 2011, 2:26 PM
The big difference between jQuery and Ext is that unlike jQuery, Ext is not focused around wrapping a DOM element and then extending off that. While an Ext Element does wrap a DOM object (for the basic DOM manipulation functions), you won't see the type of object construction that jQuery does (or the extensive function chaining). Rather, Ext will construct wigets (e.g. spiffify) that will wrap functionality around one or more DOM elements. You instantiate an instance of the object and as part of it's config, you tell it what DOM element to operate on.

You might want to start with the tutorials here http://www.sencha.com/learn/Tutorials#Advanced which discuss how Ext does inheritance.

Also, you might start looking at the source code of Ext.Component and it's children, which are the building blocks for how you could start building your own widgets.

Keep in mind however that Ext provides many more of the type of widgets out of the box that you'd typically have to build by hand in jQuery (e.g. things from jQueryUI)