Changing default ui value in toolbar from dark to light

Question

i have some text put in title config of dataview in sencha touch mobile app. This dataview is in turn present inside a navigation view, which itself inside a container.

The issue i face here is that i want the toolbar that appears at the top because of using navigation view to have ui:'light' . By default if i use chrome's web inspector tool to view the class that is applied in the DOM it shows that .x-toolbar-dark class is applied to it. How do i change this ui:dark property which applies by default to the toolbar because i have used navigationview.

I am customizing default theme and i have changed the base color of the theme..but due to dark ui being applied to toolbar the darker color is being applied to toolbar.

I know about the usage of custom mixins and then applying those mixins to toolbar we can customize it...but i am not creating a toolbar anywhere here so i cannot apply mixins for it.

Above image shows the difference of color caused due to ui:dark in toolbar. Color on left is original color

The basic question herein is how do you decide which ui style will apply to such toolbars which appear due to use of any component such as navigation view or for ex when you supply a title ?

Below is my navigation view code

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

my bad..that was silly..! Just need to add ui config to navigationBar config property in the code...does the job now.

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

   }
});