PDA

View Full Version : [CLOSED] ComboBox with image and text



jchau
Sep 18, 2008, 2:02 PM
Is there an example of filling a combobox with image and text for each item?

Vladimir
Sep 18, 2008, 5:35 PM
<ext:ComboBox ID="ComboBox1" runat="server">
<Items>
<ext:ListItem Text="<img src='accept.png'/>&amp;nbsp;Item1" Value="Item1" />
<ext:ListItem Text="<img src='accept.png'/>&amp;nbsp;Item2" Value="Item2" />
<ext:ListItem Text="<img src='accept.png'/>&amp;nbsp;Item3" Value="Item3" />
</Items>
</ext:ComboBox>

Vladimir
Sep 18, 2008, 5:41 PM
Oups,

Please don't use this example. It incorrect

geoffrey.mcgill
Sep 18, 2008, 5:43 PM
There's not the greatest code sample. The <img> tags should not be displayed in the input field. There is a way to render images using a Template, although we do not have a sample readily available. I'm researching a more comprehensive solution. 

Timothy
Sep 18, 2008, 6:29 PM
Here is an example of one I do with Credit Cards:



.x-combo-list .search-item {
border: 1px solid #fff;
border-bottom: 1px solid #eee;
padding: 2px;
white-space: normal;
}




<ExtJS:Store ID="CreditCards" runat="server" AutoLoad="True">
<Reader>
<ExtJS:JsonReader ReaderID="CreditCardId">
<Fields>
<ExtJS:RecordField Name="CreditCardId" Type="Auto" />
<ExtJS:RecordField Name="DisplayName" />
<ExtJS:RecordField Name="ImageUrl" />
</Fields>
</ExtJS:JsonReader>
</Reader>
</ExtJS:Store>
<ExtJS:ComboBox ID="drpCreditCard" runat="server" AutoPostBack="True" OnItemChanged="drpCreditCard_ItemChanged" StoreID="CreditCards" DisplayField="DisplayName" ValueField="CreditCardId" Editable="False" EmptyText="----" ForceSelection="True" ItemSelector="div.search-item" Mode="Local" Select&#111;nfocus="True" TriggerAction="All" Width="255">
<Template ID="Template1" runat="server">
<tpl for=".">
<div class="search-item">
<img src={ImageUrl} border="0" align="absmiddle" />
{DisplayName}


</tpl>
</Template>
</ExtJS:ComboBox>


Cheers,
Timothy

jchau
Oct 06, 2008, 4:07 PM
How would I wrap Timothy's solution into a reusable server control? Should my control contains a child store since the record columns have to be fixed?

Or is there a built-in solution now?