ExtJs5 - overriding native method defined inside ext-all-debug.js

Question

Suppose i want to override a function inside the native code provided by Sencha in the file ext-all-debug.js.

The function is defined inside the Ext.util.Renderable-class and has the name cacheRefEls.

The overriding should take place inside the index.html of the project to make it easier to maintain for future releases.

I have already tried out the override solutions proposed inside this thread:

Steps to overriding Sencha ExtJS standard component functionality (Ext.tree.Panel & Ext.data.TreeStore as two examples)

My index.html looks as follows:

<html>
...
<script type="text/javascript">
    Ext.define('Myapp.view.Renderable', {
        override: 'Ext.util.Renderable',
        cacheRefEls: function(el) {
              console.log("in overider method");
             //my adapted version of it
        }   
    });
</script>
...
</html>

Unfortunately after accessing the localhost:8080 over Firefox-33 it is visible from the Firebug-2-Console-log that it still uses the native version of the function.

What am i missing here?

cacheRefEls is a private method and cannot be overridden. If you created your override successfully you should be seeing: Ext.util.Renderable: Public method "cacheRefEls" conflicts with private framework method declared by Ext.util.Renderable — Guilherme Lopes

Justin Justin · Accepted Answer · 2015-03-26T18:30:58

In ExtJS 5, you need to move these methods to the privates configuration.

You should have seen the error:

Public method "cacheRefEls" conflicts with private framework method declared by Ext.util.Renderable

You can still override the private method. In your case, the solution would be:

Ext.define('Myapp.view.Renderable', {
    override: 'Ext.util.Renderable',
    privates: {
       cacheRefEls: function(el) {
          console.log("in overider method");
         //my adapted version of it
       }
    }   
});

ExtJs5 - overriding native method defined inside ext-all-debug.js

1 Answers