How to Override a class in Sencha Touch

Question

Could anyone let me know in simple steps that how how can I override a core component in Sencha code classes using the sencha architect 3 ?

I am struggling and trying to override the class as shown in this post.

to get the default navigation back buttons to work with the sencha touch.

Could anyone please help me out ?.

Answer 1

I assume you mean you want to override a core component like button? Basically, every time you drag a button on to your canvas, you are creating an override of button. That is to say, if I take a button from my Sencha Architect toolbar for example and say "convert to component", the button code looks like this:

Ext.define('MyApp.view.MyButton', {
  extend: 'Ext.button.Button',
  alias: 'widget.mybutton',

  itemId: 'addButton',
  icon: 'resources/images/add.png',
  text: 'Add Record',

    initComponent: function() {
        var me = this;

    me.callParent(arguments);
 }

});

You know have your own button that you can create either using the alias mybutton, or

 var myNewButton = Ext.create("MyApp.view.MyButton",{...});

You did ask specifically about override which means something different in architect. I think you were thinking about what I have above but I'm not sure. Override has to do with creating code that gets inserted into the above code but creating it as a second file with some inheritance tricks to merge it in.

Sorry for the long winded answer. Let me know if I missed the mark.