Question

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

Answer 1

试试这个：

.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元素：

enter image description here

Answer 2

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

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

如果是这样，在构建期间，应用程序会执行罗盘编译并从MyApp/resources/sass/app.scss文件重新创建app.css文件。您在.css文件中编写的具有匹配的sass / scss文件的任何内容都将被覆盖。

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

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

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

确保你的css在app.css之后加载，方法是将它放在app.css引用之后。

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

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

自定义css x-type列表Sencha

2 个答案: