Sencha Touch 2 : Adding a css class dynamically to a div inside a template

Question

Lets assume i have a dataview with the following itemTpl

        itemTpl: [
        '<div class="category_entry_inner">',
        '    <div class="category_right">',
        '        <div class="category_quantity">{catQty}</div>',
        '    </div>',
        '    <div class="category_left">',
        '        <div class="category_left_content">',
        '            <div class="category_left_icon"></div>',
        '            <div class="category_left_text">{catName}</div>',
        '        </div>',
        '    </div>',
        '</div>'
    ],

Now what I would like to do is hook to the dataview refresh event and when fired select all divs that have a cass of category_entry_inner and add a simple class (.someclass{background:red}) to all those divs.

Answer 1

To select all the divs you want, you can do

var divs = Ext.DomQuery.select('div[class=category_entry_inner]');

It will return an array with all the divs and then you just need to loop through them and add a class :

var i,j;
for(i=0,j=divs.length;i<j;i++){
    divs[i].className += " bar";
}

Hope this helps