关于CSS：在sencha touch中将不同的背景图像设置到Ext.list


set different background images to Ext.list in sencha touch

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

我已经使用sencha touch的Ext.list组件创建了列表视图。

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

1
2
3
4
5
6
7
8
9
10
.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%;
}

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

相关讨论

如果使用tpl生成列表项，只需为列表项指定一个类名，例如：

1
tpl: 'This is list item 1.'

然后更改您设置为列表的data的bgimage属性，应执行以下操作：

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

然后在CSS / SASS中可以执行

1
2
3
4
5
6
7
.x-list-item.bg-1 {
 background-image: url('../images/list_1.png')
}
.x-list-item.bg-2 {
 background-image: url('../images/list_2.png')
}
a€|

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

如果您正在使用列表项组件(即您的列表不具有tpl配置但具有itemCmp配置)，只需在每个项目上设置cls配置即可获得相同的结果。 >

如果使用nth-child定位它们不起作用，则可能必须走些麻烦的路线，并将单独的类附加到html中的每个列表项，然后通过更改每个CSS的background属性在CSS中操纵它们的背景图像单独地