Extending and Overriding ExtJS5 components

Posted on: 2014-09-15 | Categories: JavaScript

ExtJS5Recently i was looking for tutorial about proper way of overriding ExtJS5 class methods but unfortunately i haven’t found anything interesting – maybe except one good tutorial about overriding in ExtJS 4 but for me that solution was not working in ExtJS 5. I have also not found sufficient information about proper way of overriding in ExtJS docs, so i decided write a few words of explanation.

Overriding ExtJS5

In my case i wanted to override Ext.data.proxy.Rest component’s buildUrl method add some custom logic.

According to the docs:

If further customization is needed, simply implement the buildUrl method and add your custom generated url onto the Request object that is passed to buildUrl.

Also to override:

To define an override, include the override property. The content of an override is aggregated with the specified class in order to extend or modify that class. This can be as simple as setting default property values or it can extend and/or replace methods. This can also extend the statics of the class.

Important: Ext.extend is deprecated and should not be used any more – use Ext.define instead. Ext.define is recommended solution for extending and overriding.

Now let’s take a look on our ExtJS5 application:

ExtJS5 app structure

There is already a folder for overrides that will be auto loaded:

With ExtJS 5 overriding is as simple as creating new component’s class in overrides folder with Ext.define method and providing class name to be overridden as override property.

Be convention overridden class name should looks like:

And that’s it, no extra code is necessary, all path and auto loading is set by default.  Sencha has designed a standard architecture to solve this kind of issue – code that we want to override should be placed in overrides folder in root folder of our application.

Important: An override is only included in a build if the class it overrides is required. Otherwise, the override, like the target class, is not included.

Extending ExtJS5

There is also proper way of extending ExtJS classes. New component should be placed in ux subfolder of our app and included in code with requires statement.

For example:

This post is also available in: Polish

« Previous post Next post »