动态更改导航栏

的颜色在煎茶触摸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; 
}

其正常工作和导航栏有想要的颜色。

问题

我需要改变它的颜色dynamicallym这就是我有问题。我需要checge它的颜色，当一个视图导航

推在我创造了这个功能的控制器：

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

当按下视图但导航视图不改变颜色时，将调用alert（'them changed'）。

感谢所有帮助

来源

2013-05-27 Youssef

这个$从哪里来？你也有jQuery？你也有任何控制台中的错误？ –

是的，我有jquery并正常使用它。控制台中没有错误。它试图提醒'$（“。x-toolbar-dark”）。length我得到5，这意味着对象被定义，而不是null – Youssef

由于工具栏也是你应该能够使用addCls & removeCls改变其CLS组件属性到任何你想要的CSS类。

来源

2013-05-27 12:17:37 ThinkFloyd

动态更改导航栏

回答

相关问题