PDA

View Full Version : How to set style of childNode?



dbassett74
15 Aug 2010, 2:34 PM
I'm creating a custom widget that extends BoxComponent. It is a UL with many LI as the child nodes. I'm trying to figure out how to set the style of the child nodes (LI) but not having any luck. Here is the code I'm trying, but it errors out:

this.el.dom.childNodes[0].applyStyles("background-color: Red;");

Any help would be appreciated.

evant
15 Aug 2010, 4:48 PM
You can't call applyStyles on it because it's a DOM element, not an Ext.Element.

You want something like:



this.el.select('li').setStyle('background-color', 'red');

dbassett74
15 Aug 2010, 6:05 PM
That works! But, how do I only select a specific child? This code selects all of the child elements.

evant
15 Aug 2010, 6:40 PM
It's just a css selector, so modify the selector:

http://dev.sencha.com/deploy/dev/docs/?class=Ext.DomQuery

dbassett74
15 Aug 2010, 6:49 PM
There is no unique name or value for each of the child nodes. It is a UL with any number of LI child nodes. I want to select the first 5 LI child nodes for example and set the style. I tried something like:

this.el.select('li')[0].setStyle('background-color', 'red');

But it doesn't work. How does DomQuery help me here?

ashaihullin
15 Aug 2010, 8:21 PM
I guess with DomQuery you can select any element or group of typical elements with DomQuery.jsSelect(). Just read how to use it

evant
15 Aug 2010, 8:25 PM
You should read the docs for this, it will really take out a lot of the guess work:



this.el.select('li').filter(function(el, index){
return index < 5;
}).setStyle('background-color', 'red');

Animal
15 Aug 2010, 9:00 PM
I'm creating a custom widget that extends BoxComponent. It is a UL with many LI as the child nodes. I'm trying to figure out how to set the style of the child nodes (LI) but not having any luck. Here is the code I'm trying, but it errors out:

this.el.dom.childNodes[0].applyStyles("background-color: Red;");

Any help would be appreciated.

It sounds like subclassing DataView might be a good idea.