图标不会显示在嵌套在容器内的tabpanel项目中

Question

我正在开发一个sencha touch移动应用程序，我有一个选项卡面板，其中包含四个导航视图作为项目。我还为每个项目分配了iconCls配置属性，以便在底部显示每个导航的图标，以便导航到不同的视图。以下是此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内部，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中看到图标和标签面板项目的标记存在但是它被sencha touch隐藏了.x-item-hidden css类以某种方式应用于它（我无法弄清楚）为什么）。下面是显示标签面板项目的dom的图像

带有隐藏项目的tabpanel视图（此处应显示带有图标的4个标签项目）

Answer 1

我通过在OffersPanel视图文件中的每个导航视图中使用fullscreen:true配置属性来正确显示图标。

从技术上讲，我还没有找到解决问题的方法，但截至目前它已正常运作。