What's New?

Combobox with Icon

  1. #1
    Sep 02, 2010, 8:35 PM

    Combobox with Icon

    Hi!
    Is it possible register all Icons automatically? I want to create Combobox with all ICON´s,
    but I do not want to manually. 
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        this.Store1.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"}
        };
        
        this.Store1.DataBind();

        ResourceManager1.RegisterIcon(Icon.FlagFr);
        ResourceManager1.RegisterIcon(Icon.FlagCa);
        ResourceManager1.RegisterIcon(Icon.FlagDe);
        ResourceManager1.RegisterIcon(Icon.FlagUs);
        ResourceManager1.RegisterIcon(Icon.FlagIt);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>IconCombo</title>
    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
         .icon-combo-item {
            background-repeat: no-repeat ! important;
            background-position: 3px 50% ! important;
            padding-left: 24px ! important;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="iconCls" />
                        <ext:RecordField Name="name" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>            
        </ext:Store>

        <ext:ComboBox 
            ID="ComboBox1" 
            runat="server"
            StoreID="Store1" 
            Width="250"
            Editable="false"
            DisplayField="name"
            ValueField="name"
            Mode="Local"
            TriggerAction="All"
            EmptyText="Select a country...">
            <Template runat="server">
                <Html>
					<tpl for=".">
                        <div class="x-combo-list-item icon-combo-item {iconCls}">
                            {name}
                        </div>
                    </tpl>
				</Html>
            </Template>  
            <Listeners>
                <Select Handler="this.setIconCls(record.get('iconCls'));" />
            </Listeners>  
        </ext:ComboBox>    
    </form>
</body>
</html>
    Maia
    Coolite 1.0
  2. #2
    Sep 02, 2010, 9:41 PM
    Hi,

    Just use one method
    public string GetIconClassName(Icon icon)
{
      ResourceManager1.RegisterIcon(icon);
      return ResourceManager.GetIconClassName(icon);
}

this.Store1.DataSource = new object[]
        {
            new object[] { GetIconClassName(Icon.FlagFr), "France"},
            new object[] { GetIconClassName(Icon.FlagCa), "Canada"},
            new object[] { GetIconClassName(Icon.FlagDe), "Germany"},
            new object[] { GetIconClassName(Icon.FlagUs), "United States"},
            new object[] { GetIconClassName(Icon.FlagIt), "Italy"}
        };
  3. #3
    Sep 03, 2010, 1:17 PM
    Hi Vladsch!
    It´s not work.
          protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                // Listar Combobox os Nomes do Icones disponíveis.
                List<string> icons = Enum.GetNames(typeof(Icon)).ToList<string>();
                List<object> data = new List<object>(icons.Count);
                icons.ForEach(icon => data.Add(
                    new
                    {
                        name = icon,
                        url = this.ResourceManagerProxy1.GetIconUrl((Icon)Enum.Parse(typeof(Icon), icon)),
                        image = GetIconClassName((Icon)Enum.Parse(typeof(Icon), icon))
                    }
                ));
                this.StoreIcon.DataSource = data;
                this.StoreIcon.DataBind();
            }
        }

        public string GetIconClassName(Icon icon)
        {
            ResourceManagerProxy1.RegisterIcon(icon);
            return ResourceManager.GetIconClassName(icon);
        }
    <ext:Store ID="StoreIcon" runat="server"  AutoLoad="true">
        <Reader>
            <ext:JsonReader>
                <Fields>
                    <ext:RecordField Name="name" />                    
                    <ext:RecordField Name="url" />   
                    <ext:RecordField Name="image" />
                </Fields>
            </ext:JsonReader>
        </Reader>
</ext:Store>   

 <ext:ComboBox  ID="cbxIcone" runat="server"                                                                                                                                
                                               TypeAhead="true" 
                                               Mode="Local"
                                               ForceSelection="true" 
                                               Editable="false"
                                               TriggerAction="All" 
                                               FieldLabel="Icone"
                                               AllowBlank="false"                                 
                                               StoreID="StoreIcon" 
                                               ValueField="name"                                                             
                                               DisplayField="name"
                                               Width="200"                                                                                                
                                               >                                                 
                                                <Template ID="Template1" runat="server">
                                                    <Html>
                                                        <tpl for=".">
                                                            <div class="x-combo-list-item icon-combo-item {image}">
                                                                {name}
                                                            </div>
                                                        </tpl>
                                                    </Html>
                                                </Template>                                                 
                                            </ext:ComboBox>
    Attached Thumbnails Click image for larger version.  Name: menu.png  Views: 313  Size: 17.6 KB  ID: 1566  
  4. #4
    Sep 03, 2010, 2:43 PM
    Hi,

    Works fine for me
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        this.Store1.DataSource = new object[]
        {
            new object[] { GetIconClassName(Icon.FlagFr), "France"},
            new object[] { GetIconClassName(Icon.FlagCa), "Canada"},
            new object[] { GetIconClassName(Icon.FlagDe), "Germany"},
            new object[] { GetIconClassName(Icon.FlagUs), "United States"},
            new object[] { GetIconClassName(Icon.FlagIt), "Italy"}
        };
        
        this.Store1.DataBind();
    }

    public string GetIconClassName(Icon icon)
    {
        ResourceManager1.RegisterIcon(icon);
        return ResourceManager.GetIconClassName(icon);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>IconCombo</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>
    <form runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="iconCls" />
                        <ext:RecordField Name="name" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>            
        </ext:Store>

        <ext:ComboBox 
            ID="ComboBox1" 
            runat="server"
            StoreID="Store1" 
            Width="250"
            Editable="false"
            DisplayField="name"
            ValueField="name"
            Mode="Local"
            TriggerAction="All"
            EmptyText="Select a country...">
            <Template runat="server">
                <Html>
					<tpl for=".">
                        <div class="x-combo-list-item icon-combo-item {iconCls}">
                            {name}
                        </div>
                    </tpl>
				</Html>
            </Template>  
            <Listeners>
                <Select Handler="this.setIconCls(record.get('iconCls'));" />
            </Listeners>  
        </ext:ComboBox>    
    </form>
</body>
</html>
    I noticed that you use ResourceManagerProxy1. Is it ResourceManagerProxy? You have to use real ResourceManager to register the icon
    ResourceManager.GetInstance(this)
  5. #5
    Sep 03, 2010, 2:50 PM
    Hi!
    I´m using the "ResourceManagerProxy1" because my page is ASCX.

    Maia.
    Coolite 1.0
  6. #6
    Sep 03, 2010, 2:58 PM
    Hi,

    Use
    ResourceManager.GetInstance(this.Page)
  7. #7
    Sep 03, 2010, 5:27 PM
    Hi,
    Works fine now, but, after selecting the display is not ok.
    <ext:ComboBox  ID="cbxIcone" runat="server"                                                                                                                                
                                               TypeAhead="true" 
                                               Mode="Local"
                                               ForceSelection="true" 
                                               Editable="false"
                                               TriggerAction="All" 
                                               FieldLabel="Icone"
                                               AllowBlank="false"                                 
                                               StoreID="StoreIcon" 
                                               ValueField="name"                                                             
                                               DisplayField="name"
                                               Width="300"                                                                                                
                                               >  
                                               <SelectedItem Value="Application" /> 
                                                <Template ID="Template1" runat="server">
                                                    <Html>
                                                        <tpl for=".">
                                                            <div class="x-combo-list-item icon-combo-item {image}">
                                                                {name}
                                                            </div>
                                                        </tpl>
                                                    </Html>
                                                </Template>                                              
                                             <Listeners>
                                                <Select Handler="this.setIconCls(record.get('image'));" />
                                            </Listeners>
     <style type="text/css">
         .icon-combo-item {
            background-repeat: no-repeat ! important;
            background-position: 3px 50% ! important;
            padding-left: 24px ! important;
        }
    </style>
    Maia
    Coolite 1.0
    Attached Thumbnails Click image for larger version.  Name: menu.png  Views: 252  Size: 13.3 KB  ID: 1570  
  8. #8
    Sep 03, 2010, 5:32 PM
    Hi,

    Need full sample from you which can be tested localy

Similar Threads

  1. [CLOSED] MVC Icon ComboBox
    By RCM in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Apr 26, 2012, 12:58 AM
  2. How To Add Custom Icon in Ext:Combobox.
    By Rupesh in forum 1.x Help
    Replies: 2
    Last Post: Sep 21, 2010, 6:34 AM
  3. [CLOSED] Problem using icon comboBox
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 11, 2010, 10:33 AM
  4. [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

Posting Permissions