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;
}

它正常工作，导航栏有所需的颜色。

问题

我需要动态地改变它的颜色，这是我遇到问题的地方。在导航中按下视图时，我需要检查它的颜色

在控制器中我创建了这个功能：

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"
                        });

                }

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

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

当按下视图但导航视图没有改变颜色时，正在调用警报（'他们已更改'）。

感谢您的帮助

Answer 1

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

动态更改导航栏的颜色

1 个答案: