ExtJS modules and mixins
A few days back Praveen Ray posted about 'Traits' in Ext JS. What he described is pretty much what
Ext JS contains a function called Ext.override. Using this function allows you to add functionality to existing classes, as well as override properties of the class. For example, let's say we want to override how Ext.Windows are hidden:
Using Ext.override changes the prototype of the class you are overriding - all instances of Ext.Window will now use the new hide function in the example above.
Overriding other classes can be dangerous, especially when they are classes from a library not under your control. For example, if the Ext.Window class was refactored in a later version, your overrides may no longer work. In some situations you might choose to go down the safer route of augmenting the existing functionality without overriding it. Here's one way we can achieve this using a closure:
In the example above we set up a closure via an anonymous function which is executed immediately. This lets us keep a reference to the original hide function on Ext.Window. Underneath we perform the override itself, in which we provide our own logic.
The originalHide.apply(this, arguments) line is key to maintaining Ext.Window's original functionality. By using the apply keyword with the Window's usual scope ('this') and the function's arguments 'array', we can wrap our functionality before or after the original method.
Augmenting in this way is safer than simply overwriting the function, or copy & pasting Ext.Window's original hide function into your own, as you don't have to worry about breaking what Ext JS itself does (you're still responsible for making sure your own additions work after upgrading Ext though).
Be aware that this will affect all instances of Ext.Window (or whatever class you are overriding). If that isn't what you want, use Ext.extend to create your own subclasses instead.
Finally, note that you can use Ext.override on any class, not just the built-in Ext ones - all it does internally is call Ext.apply on the constructor function's prototype.
For a broader understanding of how to manage JavaScript objects within Ext JS, How Ext.apply works, and how to avoid a big headache provides detailed insights into the Ext.apply method. Additionally, exploring ExtJS modules and mixins could guide you in leveraging modular design patterns for code reusability and maintainability in your JavaScript applications.
A few days back Praveen Ray posted about 'Traits' in Ext JS. What he described is pretty much what
Ext.apply is one of those magic Ext JS methods which copies the essence of one object onto another.
Last week we unveiled a the brand new class system coming in Ext JS 4. If you haven’t seen the new s
Sencha Touch 1 used the class system from Ext JS 3, which provides a simple but powerful inheritance