Search code examples
sencha-touchsasscompass-sass

Set a default UI across all components in Sencha Touch

Within Sencha Touch, is it possible to define a default UI , like "light" or "dark", that applies to all components (unless overwritten explicitly)?

The aim is to avoid having to declare ui: "dark", or any custom UI that is made, for every element.

Cheers!

Solution

  • You can try this:

    Ext.apply(Ext.Component.prototype, {
    getUi: function() {
        var defaultUi = 'light';
        // value of [this.config.ui] is ignored here
        // we can use something like forcedUi
        return (this.forcedUi) ? this.forcedUi : defaultUi;
    }
})

    The disadvantage of this code is that we need to specify another variable for applying ui different from 'light' (because variable 'ui' via getUi() will always return 'light'):

    ...
items: [{
    xtype: 'button',
    forcedUi: 'dark'
}]
...