Sencha Touch - Custom Component not functioning well on 'production' build

Question

I have the following custom component build

Ext.define('TRA.view.MainMenuItemView', {
    xtype: 'mainmenuitem',
    extend: 'Ext.Container',

    text: 'Menu text',
    icon: './resources/icons/Icon.png',

    tap: function(){

    },

    config: {
        layout: {
            type: 'vbox',
            pack: 'center',
            align: 'center'
        },
        items: [
            {
                width: '115px',
                height: '115px',
                style: 'border-radius: 50%; background-color: #e4e4e6',
                items: [
                    {
                        xtype: 'image',
                        src: '',
                        width: '65px',
                        height: '65px',
                        centered: true
                    }
                ]
            },
            {
                xtype: 'label',
                html: '',
                margin: '5px 0',
                style: 'color: #455560; text-align: center; text-transform: uppercase; font-weight: bold;'
            }
        ]
    },

    initialize: function() {
        var me = this;

        me.callParent(arguments);





        //set icon
        me.getAt(0).getAt(0).setSrc(me.icon);

        //set text
        me.getAt(1).setHtml(me.text);



        //setup componet event
        me.element.onAfter('tap', me.tap);


    }
})

and I'm using it on other containers as this

{

                        xtype: 'mainmenuitem',
                        text: 'Signal Coverage',
                        icon: './resources/images/icon-signal-coverage.png',

                        tap: function() {
                            var nav = Ext.ComponentQuery.query('#mainnavigationview')[0];


                            nav.push({
                                title: 'Signal Coverage',
                                html: 'test Signal Coverage'
                            });

                        }
                    }

Quite strangely it all works all well normally except when I build the sencha app for native or for web build using sencha cmd

sencha app build production

the production version does not overwrite icon and text properties of my custom component. while it all works well on normal version. what could be issue?

Answer 1

first of all, some ideas to make your code easier readable for others:

1) the first item does neither have an xtype nor does a defaultType define it

2) width: '115px', height: '115px', just could be width:115,height115

3) instead of me.getAt().getAt() define an itemId for these and use me.down('#theItemId')

3a) or use Ext.Component to extend from and add a template with references. That way it's me.referenceElement

4) me.onAfter('tap',... not sure if this will work on an item that does not support the tap event. you might need to set a tap event to me.element and from there you can use a beforetap

5) instead of add me.getAt().getAt().setText(me.text) use the updateText: function(newValue) {this.getAt().getAt().setText(newValue)}
Same for the icon

then my personal opion

Personally I never expected this code to run anyways. But the fix might be to write me.config.icon and me.config.text

Solution

It's a matter of timing. While the constructor runs there are no icon or text defined inside the config.

This happends only on initialize. there you have them inside the config.

go and add icon: null, text: '' to the config of the component and it will word with getter and setter.