Adding graphical elements to a combobox

[antun]

You can add a graphical element to the <textlistitem>s in the new combobox that ships with LPS 2.0. Here we're inserting a colored view to reflect the color described in that option. The text is offset to the left by 20px (using the text_x) attribute, and the colored box is positioned inside of the <textlistitem>:


<canvas debug="true">
<combobox width="130" editable="false"
shownitems="6">
<textlistitem text="Other Color" />
<textlistitem text="Beige/Tan" text_x="20">
<view x="5" y="5" width="10" height="10" bgcolor="#C7B299"/>
</textlistitem>
<textlistitem text="Black" text_x="20">
<view x="5" y="5" width="10" height="10" bgcolor="#000000"/>
</textlistitem>
<textlistitem text="Blue" text_x="20">
<view x="5" y="5" width="10" height="10" bgcolor="#0000FF"/>
</textlistitem>
<textlistitem text="Blue - Metallic" text_x="20">
<view x="5" y="5" width="10" height="10" bgcolor="#4D4DFF"/>
</textlistitem>
<textlistitem text="Brown" text_x="20">
<view x="5" y="5" width="10" height="10" bgcolor="#603811"/>
</textlistitem>
<textlistitem text="Burgundy/Maroon" text_x="20">
<view x="5" y="5" width="10" height="10" bgcolor="#790025"/>
</textlistitem>
<textlistitem text="Gold" text_x="20">
<view x="5" y="5" width="10" height="10" bgcolor="#B48B00"/>
</textlistitem>
<textlistitem text="Gray" text_x="20">
<view x="5" y="5" width="10" height="10" bgcolor="#999999"/>
</textlistitem>
<textlistitem text="Green" text_x="20">
<view x="5" y="5" width="10" height="10" bgcolor="#38B549"/>
</textlistitem>
<textlistitem text="Green - Metallic" text_x="20">
<view x="5" y="5" width="10" height="10" bgcolor="#608824"/>
</textlistitem>
<textlistitem text="Purple" text_x="20">
<view x="5" y="5" width="10" height="10" bgcolor="#662C91"/>
</textlistitem>
<textlistitem text="Red" text_x="20">
<view x="5" y="5" width="10" height="10" bgcolor="red"/>
</textlistitem>
<textlistitem text="Red - Metallic" text_x="20">
<view x="5" y="5" width="10" height="10" bgcolor="#ED1B23"/>
</textlistitem>
<textlistitem text="Silver" text_x="20">
<view x="5" y="5" width="10" height="10" bgcolor="#8E9296"/>
</textlistitem>
<textlistitem text="Teal" text_x="20">
<view x="5" y="5" width="10" height="10" bgcolor="#00A99D"/>
</textlistitem>
<textlistitem text="White" text_x="20">
<view x="5" y="5" width="10" height="10" bgcolor="black"/>
<view x="6" y="6" width="8" height="8" bgcolor="white"/>
</textlistitem>
<textlistitem text="Yellow" text_x="20">
<view x="5" y="5" width="10" height="10" bgcolor="#FFF200"/>
</textlistitem>
</combobox>
</canvas>


Notice for the white view, how a black sibling view is positioned to create the border?

Enjoy!