1

我们正在为我们的应用程序使用 Sencha Touch 2.3.0 框架。我们有一个按日期分组的项目列表。我们正在尝试使用 css 调整组标题的布局。互联网上的所有文档都说我们必须添加cls:'CustomClass'项目，并将类添加到 app.css 文件中。该文件中的所有其他类工作正常。所以它不能是css文件。

我们做到了，但它不起作用，我们仍然看到默认布局。有人可以帮忙吗？

.groupedHeader .x-list-header{
    background-color: #C4C9CC !important;
    background-image: none !important;
    border-color: #C4C9CC !important;
    color: #fff;
    font-weight: none;
    text-shadow: none !important;
}

列表定义：

{    
    xtype: 'list',
    onItemDisclosure: false,
    scrollToTopOnRefresh: false,
    itemId: 'listOrderItemsId',
    id: 'listOrderItemsId',
    grouped: true,
    store: 'OrderStore',
    infinite: true,
    cls: 'groupedHeader',
    variableHeights: true,
    itemTpl: '<div style="padding: 12px 15px;border-top:1px solid #e6e6e6">{firstName} {lastName}</div>'
}
4

2 回答 2

0

尝试这个： 

.groupedHeader .x-list-header .x-innerhtml {
    background-color: #C4C9CC !important;
    background-image: none !important;
    border-color: #C4C9CC !important;
    color: #fff;
    font-weight: none;
    text-shadow: none !important;
}

使用浏览器的检查器找出正确的 DOM 元素，当你不确定你到底需要哪一个时：

在此处输入图像描述

于 2014-04-25T15:01:16.550 回答
0

您是否将css添加到resources/css/app.css文件中？

那么当你测试时你使用的是 Sencha CMD 吗？在测试您的更改之前可能运行$ sencha app watch或命令？$ sencha app build

如果在构建过程中是这样，则应用程序会进行指南针编译并从文件重新创建 app.cssMyApp/resources/sass/app.scss文件。您在 .css 文件中写入的任何具有匹配 sass/scss 文件的内容都将被覆盖。

您可能希望包含一个 css 文件，该文件可以位于 css 文件夹中，但您要对其进行唯一命名。也许称它为 overrides.css。

现在你需要让应用知道这个 css 文件。为此，您可以将其添加到 index.html 文件的头部，但我建议将其添加到MyApp/app.json文件中第 73 行附近。

"css": [
    {
        "path": "resources/css/app.css",
        "update": "delta"
    },                                    //<-- DON'T FORGET THAT COMMA :)
    {
        "path": "resources/css/overrides.css",
        "update": "delta"
    }
],

通过将其放在 app.css 引用之后，确保您的 css 在 app.css 之后加载。

清除缓存并刷新后，您应该希望看到您的更改。

如果您的 css 没有覆盖 Sencha，您可能需要更具体地定位 dom 项目。Sencha 为几乎每个元素生成一个 ID。我不建议使用它们，因为它们可以在项目之间更改。

于 2014-12-12T17:23:03.480 回答