применение альтернативного цвета строки к таблице ext js tpl - PullRequest
Новая
       47

применение альтернативного цвета строки к таблице ext js tpl

0 голосов
/ 05 августа 2020

у меня ниже 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 для этого?

1 Ответ

0 голосов
/ 05 августа 2020

enter image description here

HTML:


    
        
            tr.my-custom-css:nth-child(even) {
                background-color: #f2f2f2;
            }

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(
                    '' +
                    ' '+ "" + " "+" "+" Count "+ // Завершающий PLUS забыт в вашем коде""+""+" "+" "+ // Чет / Нечет CSS" {value}"+""+""+"  "+"")}], renderTo: Ext.getBody ()}) }});
...