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?
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
}
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With