Question

Why iconCls is not working in tab panel bar when tab bar position is top in sencha touch 2?

It work fine when tab bar position is bottom.
Why it is not working when tab bar position is top?

    Ext.create('Ext.TabPanel', {
    fullscreen: true,
    tabBarPosition: 'top',

    defaults: {
        styleHtmlContent: true
    },

    items: [
        {
            title: 'Home',
            iconCls: 'home',
            html: 'Home Screen'
        },
        {
            title: 'Contact',
            iconCls: 'user',
            html: 'Contact Screen'
        }
    ]
});

output of above code:

Ext.create('Ext.TabPanel', {
    fullscreen: true,
    tabBarPosition: 'bottom',

    defaults: {
        styleHtmlContent: true
    },

    items: [
        {
            title: 'Home',
            iconCls: 'home',
            html: 'Home Screen'
        },
        {
            title: 'Contact',
            iconCls: 'user',
            html: 'Contact Screen'
        }
    ]
});

output of above code:

Why it is not working in top position?

Answer 1

It’s the way that is defined in Sencha Touch framework classes.

If you want it your way, just override them 🙂