CODEWITHSUNDEEP
css-selectorssencha-touch-2
borck
borck

Reputation: 926

sencha touch 2.0 : How to apply conditional background color to list item

I would like to apply a background-color style conditionally in the itemTpl of a list. Let's say my itemTpl looks something like:

itemTpl: '<tpl if="condition"> <div class="highlight"> ... </div> </tpl> '

The problem is that when I do that the style "highlight" doesn't apply to the whole list item.

If I inspect the DOM, I see that the content of my itemTpl is inside another div with class "x-list-item" containing another div with class "x-list-item-label". Therefore, applying a background style to my itemTpl does not fill the full area...

Does anyone know how to affect the whole area (thus the "x-list-item" or "x-list-item-label") ?

Is there a css/sass trick to affect the parent of my div ? Is there a sencha trick ?

thanks

Upvotes: 1

Views: 3997

Answers (1)

Thiem Nguyen
Thiem Nguyen

Reputation: 6365

Sorry for my misunderstood. Then the following will work. I'm sure.

Suppore that you set an id for your element (not component, I know), for eg:

<span id="something-here">{whatever you want to show}</span>.

Then:

  • Ext.get('something-here') returns your element
  • Ext.get('something-here').up('div.x-list-item') returns the nearest parent of that node which has tag div with class x-list-item

I've already tested this via show() and hide() and the element is interacted well.

To add CSS class to an element, simply use addCls('special-css-class')

Upvotes: 4

Related Questions