css - 在 sencha touch 中为 Ext.list 设置不同的背景图片

Question

我正在开发 Sencha touch 应用程序。

我使用 sencha touch 的 Ext.list 组件创建了 ListView 。

我已经使用 CSS 为所有列表项设置了背景图片

.x-list .x-list-item {
 position: absolute !important;
 left: 0;
 top: 0;
 width: 100%;
 height:20px;
 background: url('../images/list_1.png');
 background-repeat: no-repeat;
 background-size: 97% 98%;
}

现在我想为不同的列表项设置不同的图像。这可能吗？

Answer 1

如果您使用 tpl 生成您的列表项，只需给您的列表项一个类名，例如:

tpl: '<div class="{bgimage}">This is list item 1.</div>'

然后更改您设置到列表的 data 的 bgimage 属性，应该这样做:

prepareData: function(data, index, record) {
    data.bgimage = "bg-" + index;
}

然后在你的 CSS/SASS 中，你可以做

.x-list-item.bg-1 {
 background-image: url('../images/list_1.png')
}
.x-list-item.bg-2 {
 background-image: url('../images/list_2.png')
}
…

您可以根据需要对其进行自定义，但这应该可以帮助您入门。

如果您正在使用列表项组件(即您的列表没有 tpl 配置，但有 itemCmp 配置)，只需设置 cls 配置每个元素以获得相同的结果。