What's New?

[CLOSED] Icon in MultiCombo

Page 2 of 2 FirstFirst 12
  1. #11
    Oct 10, 2012, 3:07 PM
    hi,

    please mark as closed.
  2. #12
    Dec 17, 2012, 7:40 AM
    With the latest sources from SVN it is possible to set up ListConfig.ItemTpl.

    It allows to don't override the getPicker method. But, in a common case, it might break the functionality. So, a developer is responsible for setting up this property.

    Example
    <%@ Page Language="C#" %>
  
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
  
<!DOCTYPE html>
  
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.MultiCombo1.GetStore();
            store.DataSource = new object[]
            {
                new object[] { ResourceManager.GetIconClassName(Icon.FlagFr), "France"},
                new object[] { ResourceManager.GetIconClassName(Icon.FlagCa), "Canada"},
                new object[] { ResourceManager.GetIconClassName(Icon.FlagDe), "Germany"},
                new object[] { ResourceManager.GetIconClassName(Icon.FlagUs), "United States"},
                new object[] { ResourceManager.GetIconClassName(Icon.FlagIt), "Italy"}
            };

            store.DataBind();

            ResourceManager1.RegisterIcon(Icon.FlagFr);
            ResourceManager1.RegisterIcon(Icon.FlagCa);
            ResourceManager1.RegisterIcon(Icon.FlagDe);
            ResourceManager1.RegisterIcon(Icon.FlagUs);
            ResourceManager1.RegisterIcon(Icon.FlagIt);
        }
    }
</script>
  
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
  
    <style type="text/css">
         .icon-combo-item {
            background-repeat: no-repeat ! important;
            background-position: 3px 50% ! important;
            padding-left: 24px ! important;
        }
    </style>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
          
    <ext:MultiCombo
        ID="MultiCombo1"
        runat="server"
        Width="250"
        DisplayField="name"
        QueryMode="Local"
        EmptyText="Select countries...">
        <Store>
            <ext:Store runat="server">
                <Model>
                    <ext:Model runat="server">
                        <Fields>
                            <ext:ModelField Name="iconCls" />
                            <ext:ModelField Name="name" />
                        </Fields>
                    </ext:Model>
                </Model>            
            </ext:Store>    
        </Store>
        <ListConfig runat="server">
            <ItemTpl runat="server">
                <Html>
                    <div class="x-combo-list-item {[this.getItemClass(values)]}">                      
                        <div class="x-mcombo-text icon-combo-item {iconCls}">{name}</div>
                    </div>
                </Html>
            </ItemTpl>
        </ListConfig>
    </ext:MultiCombo>    
</body>
</html>
  3. #13
    Feb 09, 2013, 9:01 PM

    Simple way to customize list items 

    protected object ColorGroups
{
    get { return ctx.ColorGroups.Select(c => new object[] { c.id, "#" + c.Color, c.ColorName }); }
}
    <ext:MultiCombo runat="server" FieldLabel="COLOR GROUP" ID="COLOR_GROUP" ValueField="id"
    DisplayField="ColorName" QueryMode="Local">
    <Store>
        <ext:Store runat="server" Data="<%# ColorGroups %>">
            <Model>
                <ext:Model runat="server" IDProperty="id">
                    <Fields>
                        <ext:ModelField Name="id" />
                        <ext:ModelField Name="Color" />
                        <ext:ModelField Name="ColorName" />
                    </Fields>
                </ext:Model>
            </Model>
            <Reader>
                <ext:ArrayReader IDProperty="id" />
            </Reader>
        </ext:Store>
    </Store>
    <Listeners>
        <BeforeRender Handler="this.getPicker().tpl.html = 
			'<ul>'+
				'<tpl for=&quot;.&quot;>'+
					'<li role=&quot;option&quot; class=&quot;x-boundlist-item&quot;>'+
						'<div class=&quot;x-combo-list-item {[this.getItemClass(values)]}&quot;>'+
							'<div class=&quot;x-mcombo-text&quot;>'+
								'<span style=&quot;background:{Color}; border: solid 1px silver;&quot;>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;{ColorName}'+
							'</div>'+
						'</div>'+
					'</li>'+
				'</tpl>'+
			'</ul>';" />
    </Listeners>
</ext:MultiCombo>
    Click image for larger version.  Name: multicombo.jpg  Views: 128  Size: 28.3 KB  ID: 5577
    Last edited by gappov; Feb 09, 2013 at 11:00 PM.
  4. #14
    Feb 11, 2013, 4:11 AM
    Hi @gappov,

    Thank you for sharing. Actually, you do the same - override the default template.
Page 2 of 2 FirstFirst 12

Similar Threads

  1. [CLOSED] Icon in MultiCombo
    By RCM in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Oct 08, 2012, 8:07 AM
  2. [CLOSED] MultiCombo: Place Indicator Icon next to FieldLabel rather than Drop down
    By sadaf in forum 1.x Legacy Premium Help
    Replies: 19
    Last Post: Oct 21, 2011, 1:56 PM
  3. [CLOSED] [1.0] Ellipsis FieldTrigger Icon displays as the normal combo icon
    By r_honey in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Aug 02, 2010, 8:44 AM
  4. [CLOSED] [1.0] MultiCombo Field Trigger Icon=Ellipsis is showing Icon = Combo
    By bsnezw in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 20, 2010, 7:48 PM
  5. [CLOSED] Icon ComboBox does not show the icon when the item slected value is setted by code?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Mar 05, 2010, 3:15 PM

Tags for this Thread

Posting Permissions