PDA

View Full Version : Change class of List item



naggy
9 Sep 2011, 6:30 AM
Hi all,

Maybe this is a beginner's question, but I'm struggling with it.

I would like to change the background of my List items based on certain conditions (i.e. after the user has tapped on them and entered some information).

What I tried is to retrieve the item's HTMLElement using .getNode() and then to set .className to "my-class" instead of "x-list-item", which leads to the desired background change but screws up my app (does not react on mouse clicks any more).

I guess this way is wrong, but is there a "standard" way to do such things?

Thanks,
Markus

NickT
9 Sep 2011, 7:18 AM
you can configure different css classes for list items for specific events...

There is an overItemCls, a selectedItemCls and a pressedCls for those specific events. There is also an itemCls that you can use to override the default item cls for all items. If you require additional events, you would probably want to create an extension class of the List component and add those events in a similar fashion to this predefined functionality.

NickT
9 Sep 2011, 7:31 AM
these are config properties by the way so you just add them inline when you instantiate your list...


var list = new Ext.List({
fullscreen: true, itemTpl : '{firstName} {lastName}', grouped : true, indexBar: true, pressedCls: 'custom-pressed-item', store: store}); list.show();

naggy
9 Sep 2011, 8:11 AM
Thanks, NikT.

Not exactly what I needed, but looking at the source code of DataView helped a lot :).

The thing, I was look for is: Ext.fly().addCls() and Ext.fly().removeCls()

My code to change the color in an event handler (in this case itemTap) to add a different class looks like this:


listeners: {
itemTap: {
fn: function(view, index, item, e) {
Ext.fly(view.getNode(index)).addCls('my-class');
}
}
}


The css class looks like this:

.x-list .x-list-item.my-class {
background-color: #ffccff;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.96, rgb(216,177,242)),
color-stop(0.59, rgb(174,118,237))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(216,177,242) 96%,
rgb(174,118,237) 59%
);
}



Thanks anyway,
Markus