Patterns – Using Ext JS Override
These Overrides are a way for us to change the way the base library works, usually because of a defect, but sometimes just because we don't like or agree with the way something works. Here we are going to cover how to write a basic Override that 'fixes' or adds a feature to something in the library.
The last thing we want to do is edit any of the Ext JS distribution files, such as ext-all.js or ext-core.js, we want to instead apply our changes into the library without touching the library files directly, using the library itself to overwrite specific functions where needed. Editing the library files directly would make upgrading nearly impossible. This is where the Override method comes in to help.
Overriding a base function causes an extra maintenance responsibility - a shift of responsibility - simple as that. Though less of a problem than say, editing the ext-all.js file. Every upgrade of the base library (Ext JS) we make requires that we re-examine all of our Overrides to make sure they still sync up with code from the base library, and that the problem were overriding has not been fixed by the Ext JS development team.
Were going to start with an override that adds a feature to the library that we desperately need! Or at least that's what our boss tells us.
We are adding an option to cascade the placement of new windows based on the position of the previous window. The reason I am adding this as an Override instead of a Plugin or Extension is because im lobbying to get it added as a feature to the library (not really) and when it gets added to the library and I upgrade, I will be able to simply remove my override and continue with life.
The goal is to end up with an no Overrides in your application, by reporting bugs and enhancements to the Ext JS team, and following through so they get fixed in the library.
The Override method of the Ext JS library will take the function(s) we pass to it and overwrite functions of the same name within the component specified. The previously defined function that were replacing are completely removed, and the new ones put in their place.
Two arguments are accepted for the Override method, the first is the class that we are overriding, and the second is an object with the methods we are overriding.
We start by copying the source of the original method from the Ext JS source files that come with the SDK download (located in the src folder), in this case it's the beforeShow method of Ext.Window (in Window.js). Using the source as a starting point, we can modify the function to do what we need.
Here it has been modified to add an if statement that looks at our new position config to see if its been set to 'cascade'. From there we can add 20 pixels to both the x and y axis of the previous window position to place it cascaded. The previous window position has been stored in the winPosx/y properties of the Ext object. The else simply runs the original window position code.
This is all overwriting the original beforeShow method of the Window, which simply placed the window in the center of it's container. This change applies to every single window that is created, even windows that might be extended from the base window class, it's essentially changing the source code of the Ext JS library, without touching the source files.
How About Fixes
Fixes are really the same thing, if were adding new features or fixing problems it's all the same as far as Overrides are concerned, though most of the time an Override would be used to fix a bug. Need I say more?
Overrides are great for adding features or fixes to the library code without disturbing the source files. Keep this in mind when you run into a bug in the library and need to 'patch' it to get things working, or have required features that should be part of the base library. The goal should be having NO overrides at all, which can be achieved by reporting bugs and posting feature requests. Enjoy!