extjs 3 SuperBoxSelect tag colors

Question

I have a SuperBoxSelect element, populated from remote store.

I need different color for each tag ( set on rowselect). Color value comes with store.

Now i end up trying with:

displayFieldTpl: '<tpl for="."><div class="x-superbox-item" 
style="background:{color};">{text}</div>  </tpl>'

However tpl creates its on elements inside the tag ( which is a list element that has another element inside for the close button / X).

What happens is that it now has colored smaller box inside it and background still has default color.

What i would need is a way to change the list elements own background color not create a new element inside it. But tpl doesn't seem to be good enough for that. These are not fixed colors - they can be anything later set in the config for each specific tag.

The html for it is:

<ul id="ext-gen747">
    <li id="ext-gen1001" class="x-superbox-item x-superbox-item x-superbox-item-hover">
        "TestTag2"
        <a class="x-superbox-item-close" tabindex="0" href="#" id="ext-gen1002"></a>
    </li>
</ul>

Answer 1

You can define classField or styleField in combo definition which may come handy in this case.

For example if you have colors as names (eg red, green) you can set classField to color and define proper styles in css. To use styleField you should define calculated field in each record to provide so it returns proper style tag.

You can also override addItemBox method.