My SuperBoxSelect element is being populated from a remote store.
I am looking to assign a different color to each tag when it is selected. The color value for each tag comes from the store.
Currently, I am attempting to achieve this by using the following code:
displayFieldTpl: '<tpl for="."><div class="x-superbox-item"
style="background:{color};">{text}</div> </tpl>'
However, the tpl function creates its own elements inside the tag (which is a list element containing another element for the close button/X).
As a result, I have colored smaller boxes within the tags and the background still remains the default color.
What I actually need is a way to change the background color of the list elements themselves, not create new elements inside them. Unfortunately, tpl does not appear to be suitable for achieving this. Also, the colors are not fixed - they should be customizable later on in the configuration for each specific tag.
The HTML for it looks like the following:
<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>