css - 自定义 css x 类型列表 Sencha

Question

我们正在为我们的应用程序使用 Sencha Touch 2.3.0 框架。我们有一个按日期分组的元素列表。我们正在尝试使用 css 调整组标题的布局。 Internet 上的所有文档都说我们必须添加 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>'
}

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 元素时，使用浏览器的检查器找出正确的 DOM 元素: