Question

我的应用程序中有一个列表，但是想知道是否可以让每个列表显示不同的背景颜色，而不是每个项目中的相同颜色？

我已经创建了一个模板，但很高兴获得每种颜色的背景。

由于

编辑：我也通过'Ext.dataview.component.DataItem'/'DataView'创建了相同的列表，所以如果这更容易单独控制那么好，因为我正在考虑干扰创建每个的过程并设置其背景，如果可能的话。

Answer 1

您可以尝试使用简单的XTemplate：

var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
        '<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
        '{name}',
        '</div>',
    '</tpl></p>'
);

看看他们的解释，可能会发现一些有趣的东西： http://docs.sencha.com/touch/2-0/#!/api/Ext.XTemplate

Answer 2

我在Ext.query（'class'）上看过很多变种.up（）。addCls（'backgroundClass'）; hack，这对我来说很有意义，但我的问题是 WHEN 是人们称之为？我不能把它放在'画'中，因为DOM似乎还不存在..你在哪里/什么时候执行Ext.get（..）调用？

Answer 3

我一直在寻找这个，我很难找到如何访问xlist的各个项目......

这是我最终做到的方式：

，将一个类添加到你的＆lt; div＆gt;，使用模型的属性'id'：

itemTpl：'＆LT; div class =“my_list_item_ {id}”＆gt; ......内容......＆lt; / DIV＆GT;'
棘手的部分是，如果要设置整个项目区域的背景颜色，则必须访问＆lt; div>与'x-item-label'类包装你的itemTpl＆lt; div＆gt;。我是这样做的（作为例子的第一项）：

Ext.select（ 'my_list_item_1。 '）第一（）向上（' div.x-列表项标签 '）addCls（' background_item'）;。。。

其中'background_item'是一种CSS样式，用于定义背景颜色。

（因为没有办法（至少我知道）获取'itemTpl'配置中项目的索引计数，我不得不使用我的模型/商店的自动'id'属性。请注意，如果您在商店中应用过滤/排序/ ...，则此属性将不再排序。因此，如果要将列表中显示的顺序链接到'id'属性，则必须执行类似'Ext.StoreManager.get（'MyStore'）的操作.getAt（indexInList）.get（'id'））< / em>的

希望这会有所帮助......

Answer 4

自 Sencha Touch 2.2.1 以来，也可以使用striped参数（more info here）。它会将x-list-item-odd类添加到列表中的奇数项目中。

Sencha Touch 2列出了背景变化

4 个答案: