自定义 css x-type 列表 Sencha答案

【问题标题】：custom css x-type list Sencha自定义 css x-type 列表 Sencha
【发布时间】：2014-04-25 10:56:40
【问题描述】：

我们正在为我们的应用程序使用 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>'
}

【问题讨论】：

标签： css listview sencha-touch sencha-touch-theming sencha-touch-2.3

【解决方案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 元素：

【讨论】：

嗨，Darin，很遗憾，它不起作用。仍然是蓝色的分组标题。由于某种原因，我无法更改它。
你有没有在inspector中检查生成的html。该示例来自我的应用程序，并且可以正常工作。
我试过了，但是它是一个 iPhone 应用程序，我们无法进入检查器，对复杂的 MVCS 框架进行操作。有没有办法直接加载页面？
但是您可以使用 Safari 的检查器为您的 iPhone 移动应用程序：browsers.about.com/od/allaboutwebbrowsers/ss/iphonedebugger.htm 在普通浏览器中加载 Sencha 应用程序的问题在哪里？我一直在 Chrome 上测试
找到了解决方案。但是，结构看起来是一样的。但是 CSS 不起作用。
4 月 28 日

【解决方案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。我不建议使用它们，因为它们可以在项目之间更改。

【讨论】：