icons do not get displayed in tabpanel items nested inside container

Question

I am developing a sencha touch mobile app and i have a a tab panel which contains four navigation views as items. I have also assigned iconCls config property to each item so as to show icons for each navigation in bottom for navigation to different views. Below is the code for this tabpanel

 Ext.define('MobileApp.view.Offers.OffersPanel', {
   extend: 'Ext.tab.Panel',
   xtype: 'offerspanel',
   config: {
      tabBarPosition: 'bottom',
      //styleHtmlContent:true,
      width: '100%',
      cls: 'offersTab',
      id: 'offersPanel',
      ui: 'light',
      items: [{
            iconCls: 'new',
            xtype: 'offersnewnavigationview'
         }, {
            xtype: 'offershotdealsnavigationview',
            iconCls: 'hot'
         }, {
            iconCls: 'favourite',
            xtype: 'offersfavnavigationview'
         }, {
            iconCls: 'searchd',
            xtype: 'offerssearchnavigationview'
         }]
   }
});

above tab panel is inside a MainViewContainer , which itself is inside Main.js container. Code for both files is shown below

Ext.define('MobileApp.view.MainContainerView', {
   extend: 'Ext.Container',
   xtype: 'mainContainerView',
   requires: [
      'Ext.TitleBar'
   ],
   config: {
      layout: 'fit',


      // shadow for the left edge
      style: 'box-shadow: rgba(0, 0, 0, 0.8) 0 0.2em 0.6em;',

      /* 
       * This is the main view used to switch view or add view 
       * when selecting from sidebar menu 
       */
      items: [{
        xtype:'offerspanel'
      }]
   }
});

Ext.define('MobileApp.view.Main', {
   extend: 'Ext.Container',
   xtype: 'main',
   config: {
      layout: 'fit',
      //fullscreen: true,
      items: [{
         xtype: 'sidebar'
      }, {
         xtype: 'mainContainerView'
      }]
   }
});

I can see in the DOM that markup for the icon and tab panel item is present but it is hidden by sencha touch and .x-item-hidden css class get applied to it somehow (i can't figure out why). Below is image showing the dom for tab panel item

the tabpanel view with hidden items (4 tab items with icons should be present here)

Answer 1

i got icons to appear correctly by using fullscreen:true config property in each of the navigation views inside OffersPanel view file.

Technically i am yet to find out how did that solve the issue but as of now it is working correctly.