0

在 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');
                }

推送视图时会调用警报（'他们已更改'），但导航视图未更改颜色。

谢谢你的帮助

4

1 回答 1

0

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

于 2013-05-27T12:17:37.750 回答