Sencha Touch 2如何在每个列表行上设置不同的颜色

Question

我正在使用SenchaTouch 2如何在每个列表行上设置不同的颜色。

SenchaTouch小提琴示例：

http://www.senchafiddle.com/#MfLkR#wqVi1#eqWct

Answer 1

您可以使用css（例如

）为每一行添加特定颜色

.x-list-item:nth-child(1n){
/* First Row */
background-color: Green;

}
.x-list-item:nth-child(2n){
/* Second Row */
background-color: Blue;

}
.x-list-item:nth-child(3n){
/* third Row */
background-color: Yellow;

}

创建一个css文件，根据需要为其命名。将我的答案中的代码粘贴到该css文件中。在index.html中引用css文件。或者您可以将样式标记放在css代码周围，并将其直接放在index.html的头部。

<link rel="stylesheet" type="text/css" href="touch2/resources/css/apple.css">
<link rel="stylesheet" type="text/css" href="newCssCode.css">

Answer 2

您可以在数据中添加“bgcolor”字段并更改itemTpl：

 items: [ {
   xtype: 'list',
   itemTpl: '<div style="height:35px; background: {bgcolor};">{title}</div>',
      data: [
         { title: 'Red BackGround', bgcolor : 'red' } // same thing for all the other items

Answer 3

@bork

更改“x-list-item-label”的填充，使其与css

为0

然后创建一个新的div，它将成为模板中项目的一种新容器，更改此div的bckground颜色。