PDA

View Full Version : Apply style at line level on ext.data.Store



epean
13 May 2013, 8:56 AM
Hi,

I have 2 ext.data.Stores that compose a multiselect, which is in an ItemSelector, itself in a FormPanel. What I'd like to do is to highlight that an item was moved/deleted compared to the original containers.

I added a callback after add method on the 2 stores of the multiselect :



pool_cnx_to_rule.afterMethod('add', function ()
{
// Compare with reference store
for (var i = 0; i < pool_cnx_to_rule.data.length; ++i)
{
var pool_descr_ = pool_cnx_to_rule.data.items[i].data.pool_descr;
var changed = true;
for (var j = 0; j < pool_cnx_to_rule_ref.length; ++j)
{
if (pool_cnx_to_rule_ref[j] == pool_descr_)
{
changed = false;
break;
}
}

// If newly added item
if (changed)
{
// rule_cnx is the FormPanel : get its ID
var id_container = rule_cnx.items.items[0].container.dom.id;
var elms = document.getElementById(id_container).getElementsByTagName("em");
// Now loop on all children to find my HTML EM tag thanks to its content
for (var i = 0; i < elms.length; i++) {
if (elms[i].textContent == pool_descr_) {
//elms[i].style.color = 'red';
elms[i].className = 'new_item';
break;
}
}
}
}
});


As you can see, I built the reference before, and I just compare the current store with the original. Then I try to apply CSS style to the line corresponding to the element that was changed, but that does not work (some ExtJS style is applied afterwards and removes mine). :s

I did not find any style-related element at Store level, is there a way to differentiate the lines in my Stores ? I'm aware that what I do looks quite complex and that I should be able to do it more "ExtJS-like", but I'm a beginner and I don't know all features...

Thanks a lot for your help ! :D