Question

我有一个ExtJS 4.2 view.View（dataView）使用模板，存储和模型;就像文档描述的那样，信息显示得很好。

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

没有任何简单的配置选项可以像Sencha Touch striped: true那样执行此操作，或者像grid.Panel中那样固有的样式;我找了一个允许为每个项目设置tpl和itemSelector的听众，但似乎没有列出任何足够的内容。

代码：

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

Answer 1

您正在使用视图，这意味着您要使用XTemplate自行定义要生成的HTML。这就是为什么条带行没有内置功能的原因，因为框架根本不知道将呈现哪个HTML。

最简单的解决方案是向模板中的每一行添加class属性，指示行号是奇数还是偶数，然后使用CSS相应地设置行的样式。

实际上Ext.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>'
 );

相应的CSS代码如下所示：

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

ExtJS视图中的备用行颜色。查看

1 个答案: