PDA

View Full Version : Conditional List Item Background Color



stan229
26 Apr 2011, 8:21 AM
I'm trying to shade/color/highlight/fill a list item based on a certain condition. I have the condition part in the XTemplate right but if I create a div class with a wrapper it will be the child of the div with the class "x-list-item-body" meanwhile I want to apply background-color to the div with class "x-list-item"

Any suggestions?

Thanks,
Stan

stan229
26 Apr 2011, 10:25 AM
I came up with one solution:
I added an listener on the store's load event



//note: myList is a reference to a list element from view.

app.stores.myList = new Ext.data.Store({
model: 'app.models.MyInfo',
listeners: {
load: {
fn: function () {
var itemList = myList.el.dom.getElementsByClassName("x-list-item")
for (var i = 0; i < itemList.length; i++) {
var severeItem = itemList[i].getElementsByClassName("severeItem");
if (severeItem.length > 0) {
itemList[i].className += "severeItem "
} else {
var mildItem = itemList[i].getElementsByClassName("mildItem");
if (mildItem.length > 0) {
itemList[i].className += "mildItem "
}
}
}
}
}
}
});