Sencha Touch DataView 并在选中时突出显示一行答案

【问题标题】：Sencha Touch DataView and highlighting a row when selectedSencha Touch DataView 并在选中时突出显示一行
【发布时间】：2013-09-25 10:14:29
【问题描述】：

我在容器内有一个数据视图列表，该列表在视图内正确显示项目。但是，每当我单击一个项目时，它都不会突出显示。

我已将此添加到包含 DataView 列表的视图中：

  onItemTap: function (container, target, index, e) {
        var me = this;
        me.callParent(arguments);  // WARNING: without this call, the row will not become selected
    }

我了解到，如果我没有上述内容，该项目将不会被选中。我也可以看到这个事件被触发了。如果我通过 Sencha Touch 源代码进行调试，我可以看到 CSS 类 x-item-selected 被添加到包装列表项的 DIV 中，但没有突出显示该行。这在普通列表上工作正常，所以我错过了什么？

更新的 CSS 似乎可以正常工作。

.x-dataview .x-data-item.x-item-selected
{
    border-top-color: #006bb6;
    background-image: -webkit-linear-gradient(top, #0398ff, #007ad0 3%, #005c9d);
    color: white;
}

【问题讨论】：

标签： sencha-touch sencha-touch-2

【解决方案1】：

默认情况下，Sencha Touch Dataview 不提供任何突出显示。在.x-item-pressed 或.x-item-selected 类中添加背景或其他内容，您将获得所需的效果。

【讨论】：

在普通的列表视图中，此类被添加到选定的项目中，并显示为突出显示。看起来 CSS 为列表正确定义了这一点，但没有为数据视图中的选定项目定义 DOM 的结构。我不是 CSS 专家，我该如何解决这个问题？
谢谢，这就是我要做的。我得到的是使用我添加的上述代码进行选择。不确定这对 SASS 有多友好。我怀疑不是。

【解决方案2】：

在配置块中设置 selectedCls 怎么样？

查看以下链接了解详细信息

http://docs.sencha.com/touch/2.2.1/#!/api/Ext.dataview.List-cfg-selectedCls

【讨论】：