3

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

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

谢谢

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

4

4 回答 4

2

您可以尝试使用简单的 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

于 2012-05-15T14:42:32.870 回答
1

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

于 2012-11-01T20:12:45.220 回答
0

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

这是我最终做到的方式：

  • 在您的 itemTpl 中，使用模型的属性“id”向您的 <div> 添加一个类：

    itemTpl:'< div class="my_list_item_{id}"> ... 内容 ... </div>'

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

    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') )

希望这可以帮助...

于 2012-04-16T10:06:26.330 回答
0

从Sencha Touch 2.2.1开始，也可以使用striped参数（更多信息在这里）。它会将x-list-item-odd类添加到列表中的奇数项。

于 2013-07-04T11:50:28.213 回答