将工具栏中的默认ui值从暗更改为浅

Question

我在sencha touch移动应用程序中有一些文本放在dataview的标题配置中。此数据视图又存在于导航视图中，导航视图本身位于容器内。

我在这里面临的问题是，我希望工具栏显示在顶部，因为使用导航视图可以 ui：＆＃39; light＆＃39; 。默认情况下，如果我使用chrome的网络检查工具查看在DOM中应用的类，则会显示 .x-toolbar-dark 类应用于它。如何更改此ui：dark属性，默认情况下应用于工具栏，因为我使用了导航视图。

我正在自定义默认主题，我已经更改了主题的基色。但是由于黑色ui被应用于工具栏，更暗的颜色被应用于工具栏。

我知道自定义mixins的用法然后将这些mixins应用到工具栏我们可以自定义它...但我不是在这里任何地方创建工具栏所以我不能为它应用mixins。

上图显示了工具栏中由于ui：dark引起的颜色差异。左边的颜色是原始颜色

这里的基本问题是你如何决定哪种ui样式适用于由于使用导航视图等任何组件而出现的工具栏，或者当你提供标题时为ex？

以下是我的导航视图代码

Ext.define('MobileApp.view.Offers.OffersNewNavigationView', {
   extend: 'Ext.navigation.View',
   xtype: 'offersnewnavigationview',
   config: {
      fullscreen: true,
      height: '100%',

      autoDestroy: false,
      defaultBackButtonText: '',
      navigationBar: {             
         items: [{
            align: 'left',
            id: 'newSlideBut',
            iconCls: 'list',
            ui: 'plain'
         }
         ]
      },
      items: [
      {
         xtype: 'offersnewdataview'
      }]

   }
});

Answer 1

我的坏......那太傻了！ 只需要在代码中将 ui 配置添加到 navigationBar 配置属性...立即完成工作。

Ext.define('MobileApp.view.Offers.OffersNewNavigationView', {
   extend: 'Ext.navigation.View',
   xtype: 'offersnewnavigationview',
   config: {
      fullscreen: true,
      height: '100%',

      autoDestroy: false,
      defaultBackButtonText: '',
      navigationBar: {
         ui:'light',
         items: [{
            align: 'left',
            id: 'newSlideBut',
            iconCls: 'list',
            ui: 'plain'
         }
         ]
      },
      items: [
      {
         xtype: 'offersnewdataview'
      }]

   }
});