ExtJS view.view中的交替行颜色

我有一个使用模板、存储和模型的ExtJS4.2视图（dataView）；正如文档所描述的，信息显示得很好

我现在需要交替每个项目的背景色。这是如何最好地完成的？

没有任何像Sencha Touch的striped:true那样的简单配置选项，也没有任何像grid.Panel那样的固有样式；我一直在寻找一个可以为每个项目设置

tpl

和

itemSelector

的侦听器，但似乎没有列出任何足够的内容

代码：

Ext.define（'productionHistoryModel'{
扩展：“Ext.data.Model”，
字段：['日期'，'姓名'，'事件'，'注释']
});
var productionHistoryStore=Ext.create（'Ext.data.Store'{
id:“productionHistoryStore”，
storeId:“productionHistoryStore”，
模型：“productionHistoryModel”
});
var historyTpl1=新的Ext.XTemplate(
'',
'',
“{Date}:{Event}（{Fore_Name}）”，
“
{Comments}”，
'',
''
);
var productionHistoryView=Ext.create（'Ext.view.view'{
id:“productionHistoryView”，
商店：productionHistoryStore，
tpl：历史TPL1，
itemSelector:'div.x-grid-row'，
emptyText:'没有可用的日志'，
disableSelection:正确，
autoScroll：是的，
最大高度：500
});

您使用的视图意味着您正在使用

XTemplate

定义要自己生成的HTML。这就是为什么条带行没有内置特性的原因，因为框架根本不知道将呈现哪个HTML

最简单的解决方案是为模板中的每一行添加一个

class

属性，指示行号是奇数还是偶数，然后使用CSS相应地设置行的样式

实际上，文档中已经有一个示例（向下滚动到“使用特殊内置模板变量执行任意内联代码”）：

---

谢谢你告诉我模板是解决这个问题的关键；考虑到如何创建dataview的“完整性”，我认为该模板不够复杂，无法完成类似的操作。

Ext.define('productionHistoryModel', {
    extend: 'Ext.data.Model',
    fields: [ 'Date', 'Fore_Name', 'Event', 'Comments' ]
});

var productionHistoryStore = Ext.create('Ext.data.Store', {
    id: 'productionHistoryStore',
    storeId: 'productionHistoryStore',
    model: 'productionHistoryModel'
});

var historyTpl1 = new Ext.XTemplate(
    '<tpl for=".">',
    '<div style="margin-bottom: 10px;" class="x-grid-row">',
    '<span style="font-weight: bold;">{Date}: {Event} ({Fore_Name})</span>',
    '<br/><span>{Comments}</span>',
    '</div>',
    '</tpl>'
);

var productionHistoryView = Ext.create('Ext.view.View', {
    id: 'productionHistoryView',
    store: productionHistoryStore,
    tpl: historyTpl1,
    itemSelector: 'div.x-grid-row',
    emptyText: 'No logs available',
    disableSelection: true,
    autoScroll: true,
    maxHeight: 500
});

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

.odd {
    background-color: white;
}
.even {
    background-color: gray;
}