将交替行颜色应用于 ext js tpl table

Question

我有低于 tpl

items: [{
                xtype: 'container',
                data: record.data,
                tpl: new Ext.XTemplate(
                    '<tpl>' +
                    '<div id="table-w"><div id="table-s"><table class="count-grid"  >' +
                    "<tr>" +
                    "<tpl for='.'>" +
                    "<th align='left' class='x-grid-subtable-header'>" + "Count"
                    "</tpl>" +
                    "</tr>" +
                    "<tpl for='user'>" +
                    "<tr>" +
                    "<td align='left'class='x-grid-subtable-cell x-grid-cell-inner'>{value}</td>" +
                    "</tr>" +
                    "</tpl>" +
                    "</table></div></div>" +
                    "</tpl>")
            }],

根据上面的代码，我想对这些行应用替代颜色

"<tr>" +
                        "<td align='left'class='x-grid-subtable-cell x-grid-cell-inner'>{value}</td>" +
                        "</tr>"

有人可以帮忙 css 吗？

Answer 1

HTML:

<html>
    <head>
        <style>
            tr.my-custom-css:nth-child(even) {
                background-color: #f2f2f2;
            }
        </style>
    </head>
    <body>
        
    </body>
</html>

JS:

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'user'
    }]
});
Ext.application({
    name : 'Fiddle',

    launch : function() {
        var record = Ext.create('User', {
            user: [{
                value: "User One"
            }, {
                value: "User Two"
            }, {
                value: "User Three"
            }]
        });

        Ext.create('Ext.panel.Panel', {
            title: "Panel",
            height: 500,
            items: [{
                xtype: 'container',
                data: record.data,
                tpl: new Ext.XTemplate(
                    '<tpl>' +
                    '<div id="table-w"><div id="table-s"><table class="count-grid"  >' +
                    "<tr>" +
                    "<tpl for='.'>" +
                    "<th align='left' class='x-grid-subtable-header'>" + "Count" + // Trailing PLUS is forgotten in your code
                    "</tpl>" +
                    "</tr>" +
                    "<tpl for='user'>" +
                    "<tr class='my-custom-css'>" + // Odd/Even CSS
                    "<td align='left'class='x-grid-subtable-cell x-grid-cell-inner'>{value}</td>" + 
                    "</tr>" +
                    "</tpl>" +
                    "</table></div></div>" +
                    "</tpl>")
            }],
            renderTo: Ext.getBody()
        })
    }
});

将交替行颜色应用于 ext js tpl table

applying alternate row color to ext js tpl table

html

css

extjs