将工具栏中的默认 ui 值从暗更改为亮答案

【问题标题】：Changing default ui value in toolbar from dark to light将工具栏中的默认 ui 值从暗更改为亮
【发布时间】：2014-04-07 21:48:12
【问题描述】：

我在 sencha touch 移动应用程序的 dataview 的标题配置中放置了一些文本。该数据视图依次出现在导航视图中，而导航视图本身位于容器中。

我在这里面临的问题是我希望工具栏出现在顶部，因为使用导航视图具有 ui:'light' 。默认情况下，如果我使用 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'
      }]

   }
});

【问题讨论】：

编码，永远编码！没有这个，我们应该做任何事情！
顺便说一下，你应该使用一个事件，比如afterrender。因为，页面已经渲染好了。
我有办法..我可以覆盖 .x-toolbar-dark 类并将我的自定义颜色放在那里，但这不是正确的方法..我想要一个 sass 或可以全局应用于整个应用程序的 css 解决方案...我不明白您所说的关于 afterrender 事件的内容

标签： extjs toolbar theming

【解决方案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'
      }]

   }
});

【讨论】：