Sencha Touch 2 列表背景更改答案

【问题标题】：Sencha Touch 2 list background changeSencha Touch 2 列表背景更改
【发布时间】：2012-04-15 20:25:24
【问题描述】：

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

我已经创建了一个模板，但如果让每个更改颜色的背景变得更好。

谢谢

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

【问题讨论】：

标签： list sencha-touch-2 dataview

【解决方案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

【讨论】：

【解决方案2】：

我在 Ext.query('class').up().addCls('backgroundClass'); 上看到了很多变体； hack，这对我来说很有意义，但我的问题是什么时候人们打电话给这个？我不能把它放在“painted”中，因为 DOM 似乎还不存在。你们在哪里/何时执行 Ext.get(..) 调用？

【讨论】：

【解决方案3】：

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

这就是我最终做到的方式：

在您的 itemTpl 中，使用模型的属性“id”向您的

添加一个类：
itemTpl:'

...内容...
'
棘手的部分是，如果你想设置整个项目区域的背景颜色，你必须使用包装你的 itemTpl 的类 'x-item-label' 访问。这是我的做法（以第一项为例）：

Ext.select('.my_list_item_1').first().up('div.x-list-item-label').addCls('background_item');

“background_item”是一种 CSS 样式，用于定义背景颜色。

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

希望这会有所帮助...

【讨论】：

谢谢你，我稍后会看看这个。我暂时使用按钮来解决我的问题。但是斜纹看看我能不能征服你所解释的并让你们都知道
@borck，您可能对长度方法感兴趣：这是一个示例项目Tpl:'

{cmets.length - 2} old cmets
'（引号很重要）但我从未在根元素上尝试过

【解决方案4】：

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

【讨论】：