firefoxextjsmigrationoverridingfirebug

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

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?

Solution

  • 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
       }
    }   
});