Question

I'm trying to get individual list items from a list to assign a specific itemCls to each one. I do not want them all to have the same item class.

I'm trying to add styles to only certain list items. I tried using the xTemplate route but I don't know how to get fields out of a record in order to do a list statement. Here's my xTemplate right now:

Any idea on how to get fields out of a record in a template or how to assign a itemCls to only list items of my choosing?

meterListObj.setItemTpl(
    "<tpl for=\".\">"+
    "<tpl if=\"!this.hasCurrMonthReading\">"+
        "<span class=\"upperLeft\">{meterNumber}</span><span class=\"upperRight\">{campus}</span>"+
        "<span class=\"upperMiddle\">No Readings for "+
            (settings.data.userDate.getUTCMonth()+1)+"/"+settings.data.userDate.getUTCFullYear()+" </span>"+
        "<span class=\"lowerLeft\">{utilityType}</span><span class=\"lowerRight\">{undefined}</span>"+
    "</tpl>"+
    "<tpl if=\"this.hasCurrMonthReading\">"+
        "<span class=\"upperLeft\">{meterNumber}</span><span class=\"upperRight\">{campus}</span>"+
        "<span class=\"lowerLeft\">{utilityType}</span><span class=\"lowerRight\">{undefined}</span>"+
    "</tpl>"+
    "</tpl>");
Was it helpful?

Solution

You could use getViewItems method, just like this

var items = this.getViewItems();
items.forEach(function(item){
            var itemElement = Ext.get(item.id);

            itemElement.addCls('selectGroup');              
});

or You could use css selector nth-child

Hope this helps.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top