Overrides for classes in Sencha Touch

We stumbled upon a very weird bug while working on our new cross-platform network planning app. The app would either freeze or depict unpredictable every time the user did a double tap on any of the navigation bar buttons (in fact a double tap anywhere was an issue). It was found that whenever there was a double tap, a specific function ‘removeInnerItem’ in class Ext.layout.Default was throwing a null pointer exception. As none of us in the team are Sencha experts and even Google couldn’t help, we had no option but to raise this concern with Sencha support. We were also able to reproduce this issue in one of the demo apps that comes with Sencha architect.

The solution identified by Support team was to apply this override:-

Ext.define('Ext.layout.override.Default', {
    override: 'Ext.layout.Default',
 
    removeInnerItem: function(item) {
        // check for valid element
        if (item.element !== null) {
            item.element.detach();
        }
    }
 
});

Being a noob in Sencha Touch, I had no idea what this meant and where to put it. So apart from asking support again, I also tried searching the web, to see if I could find more information about creating an override for a class in Sencha Touch. There was no proper article on this and even sencha docs were not of much help.

What is an Override?

Ext is a very flexible framework, it is very easy to extend or change functionality of core classes in the framework. To create an override implies to change or extend the behavior of a class without creating a new subclass out of it.

Why Override?

If you ever want to change or expand the functionality of a core class without modifying the framework source code or to apply a hot fix for a bug in framework, like in my example above where Sencha devs forgot to add null checks in their code and it’s not likely they’ll ship a new version of the framework just for that small change.

Override vs Extend

Many blogs out there will have you confused between overriding and extending a class. One must understand the basic difference between both of them.

• Extend– when you extend a class in sencha, you are creating a new class definition all together. When using extend, Ext keeps a reference to the superclass. Whenever you drag and drop a tool (Container, Button, TextArea, etc.) to your canvas in Sencha Architect, you are basically extending that tool.
• Override– Overriding does not mean creating a new class definition. It just changes the behaviour of an existing class. The override you create is then applied to all instances of that class throughout the project.

Creating an override

Suppose we want to implement the fix provided by Sencha support in my situation i.e. we want to apply an override to change the functionality of ‘removeInnerItem’ function in class ‘Ext.layout.Default’.

As per Sencha conventions, we need to create a proper folder structure based on the class that you want to override. First you need to create an ‘override’ (NOT overrides) folder under ‘app’. If your project name is ‘TaskList’, then your folder hierarchy will be TaskList->app->override. All the files for override must go in one of the sub-folders of ‘override’ folder.

So to create an override for Ext.layout.Default, we need to create another folder ‘layout’ inside ‘override’ and then finally the code goes into the file ‘Default.js’, created in ‘layout’ folder. Finally your folder structure should look something like this-

And that’s it. Once you refresh or re-build the app, this particular definition of ‘removeInnerItem’ is going to be called for Ext.layout.Default class.

How to do it using Sencha Architect

The only bad thing about using Sencha Architect is, none of the blogs specify how to implement something in Sencha Architect. It is a bit tricky because there is a lot of generated code that you do not want to change and if you haven’t had a Sencha training then you probably don’t know most of the things in the IDE.

As Sencha docs specify, it is very easy to create an override for framework classes. All you need to do is right click on a class in toolbox and select ‘Create override for this Class’.

You can also create and override for one of your own classes by clicking on ‘create override’ button present at the top of editor window.

But, the question arises, how would you create an override for a class that is neither present in the toolbox, nor is available in the editor. To accomplish this, you need to add a js resource via project inspector

Write the code in your js file and then specify its URL to be the path as per the convention. For our example, it would be

app/override/layout/Default.js

Once you save, Sencha Architect will automatically create missing folders. All you need to do now is build your project or open your app in a browser.