jquery - 动态改变导航栏的颜色

Question

在 sencha touch 2 应用程序中，我正在使用导航栏

var homeNavigation = {
    extend: 'Ext.navigation.View',
    xtype : 'homeView',
    config : {
        autoDestroy: false,
        iconCls : 'homeicon',
        title : 'Home',
        navigationBar: {
            items: [
                myInfoButton,
                addButton
            ]
        },

        items: [
            {
                xtype : 'homeIndexView'
            }
        ]

    }
};

Ext.define('MyAPP.view.Home', homeNavigation);

我需要将它的颜色更改为红色渐变。

为此我做了以下是 css 表:

.x-toolbar-dar {
  background-image: none;
  background-color: #5a000b;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b98182), color-stop(50%, #781a2c), color-stop(51%, #5a000b), color-stop(100%, #4a020e));
  background-image: -webkit-linear-gradient(top, #b98182, #781a2c 50%, #5a000b 51%, #4a020e);
  background-image: linear-gradient(top, #b98182, #781a2c 50%, #5a000b 51%, #4a020e);
  border-color: #4a020e;
}

它工作正常并且导航栏具有所需的颜色。

问题

我需要动态更改它的颜色，这是我遇到问题的地方。当在导航中推送 View 时，我需要检查它的颜色

在 Controller 中我创建了这个函数:

applyThemeToNavigationBar : function() {
                        $(".x-toolbar-dark").css({
                            "backgroundImage": "none",
                            "backgroundColor": "#5a000b",
                            "backgroundImage": "-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b98182), color-stop(50%, #781a2c), color-stop(51%, #5a000b), color-stop(100%, #4a020e))",
                            "backgroundImage": "-webkit-linear-gradient(top, #b98182, #781a2c 50%, #5a000b 51%, #4a020e)",
                            "backgroundImage": "linear-gradient(top, #b98182, #781a2c 50%, #5a000b 51%, #4a020e)",
                            "backgroundColor": "#4a020e"
                        });

                }

在 View 的推送事件中:push : 'onViewPush' 我调用上面的函数来更改 CSS:

onViewPush: function(view, item) {
                    applyThemeToNavigationBar();
                    alert('theme changed');
                }

当 View 被推送但导航 View 没有改变颜色时，警报('他们改变了')被调用。

感谢您的帮助

Answer 1

由于工具栏也是一个组件，您应该能够使用 addCls & removeCls将其 cls 属性更改为您想要的任何 CSS 类。