0

在我的应用程序中，我正在尝试更改标题的颜色。为此，我将一些主题放在 app.scss 文件中。我可以更改标题栏的背景颜色。但是标题的颜色没有改变。我的 app.scss 文件是这样的：

    $base-color: #588aad; // go big blue!$include_default_icons: false;
@import 'sencha-touch/default/all';
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-form;
@include sencha-msgbox;
@include sencha-loading-spinner;


@include pictos-iconmask("bookmarks");
@include pictos-iconmask("compose");
@include pictos-iconmask("trash");
@include pictos-iconmask("search");
@include pictos-iconmask("bookmark2");


@include sencha-toolbar-ui('blue', #EEEEEE,'matte');
.x-toolbar .x-toolbar-title {
    color: #5a3d23;
}

这是我的面板代码：

  Ext.define('MyApp.view.TitlePanel', {
    extend: 'Ext.Panel',

    config: {
        modal: false,
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                height: 120,
                ui: 'blue',
                title: 'Teritree Bussiness Portal',
                items: [
                    {
                        xtype: 'image',
                        docked: 'left',
                        height: 118,
                        width: 202,
                        src: 'resources/images/Logo.PNG'
                    }
                ]
            }
        ]
    }

});

有人可以帮忙吗？？？提前致谢..

4

1 回答 1

8

使用Firebug 或 Safari（或 Chrome）检查器来找出 div 是如何嵌入到 DOM 中的。

如果我检查标题栏的标题，这就是我所拥有的

您可以看到一个带有my-titlebarclass 的 div，其中包含另一个带有 class的 div x-title。如果你看右边，你可以看到颜色属性是由x-titleCSS 类携带的。因此，您需要覆盖这个类，而不是向另一个类添加颜色属性。

在此处输入图像描述

所以这是你应该做的：

将 cls 属性添加到标题栏

xtype: 'titlebar',
cls:'my-titlebar',
docked: 'top',
height: 120,

编写 CSS

.my-titlebar .x-title{
  color:white;
}

给你：

在此处输入图像描述

!important最后一条建议，只有在别无选择时才应使用。否则没有意义。

希望这可以帮助

于 2012-07-03T17:55:24.820 回答