圖標不會顯示在嵌套在容器內的Tabpanel項目中

我正在開發一個sencha觸摸移動應用程序，並且我有一個包含四個導航視圖作爲項目的選項卡面板。我還爲每個項目分配了iconCls配置屬性，以顯示底部每個導航的圖標以導航到不同的視圖。下面是本個tabpanel圖標不會顯示在嵌套在容器內的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' 
     }] 
    } 
});

標籤面板上面的代碼是一個MainViewContainer，它本身是Main.js容器內的內部。規範這兩個文件如下所示

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' 
     }] 
    } 
});

我可以在標記的圖標和標籤面板項目DOM看到的是存在的，但它是由煎茶觸摸和.X項隱藏的CSS類隱得到應用它以某種方式（我不明白爲什麼）。下面是圖像表示用於標籤面板項 enter image description here