Icon ComboBox

  1. #1

    Icon ComboBox

    Here is an extension to the ComboCox control to give your ListItems an Icon. The JavaScript is part of the ExtJs wiki example for illustrating how to extend Ext2 classes (http://extjs.com/learn/Tutorial:Extending_Ext2_Class).

    To use, extract the attachment to the ..\Coolite\Coolite.Ext.Web\Ext\Extensions path of the Coolite Toolkit source. In visual studio, add the folder under the respective folder. Ensure that the JS and CSS resources are configured as embedded resources. Then recompile the toolkit.

    Here is an example:

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>IconCombo Test</title>
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!Ext.IsAjaxRequest)
                {
                    SM1.RegisterIcon(Icon.FlagUs);
                    SM1.RegisterIcon(Icon.FlagCa);
                    SM1.RegisterIcon(Icon.FlagRu);
                    SM1.RegisterIcon(Icon.FlagDe);
                    SM1.RegisterIcon(Icon.FlagIt);
                }
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
    
            <ext:ScriptManager runat="server" ID="SM1" ScriptMode="Debug" />
    
            <ext:IconCombo 
                ID="IconComboTest" 
                TriggerAction="All"
                Mode="Local"
                Editable="false"
                ForceSelection="true"
                Select&#111;nfocus="true"
                EmptyText="Select a country"
                runat="server">
                <Items>
                    <ext:IconListItem Text="United States" Icon="FlagUs" Value="US" />
                    <ext:IconListItem Text="Canada" Icon="FlagCa" Value="CA" />
                    <ext:IconListItem Text="Russia" Icon="FlagRu" Value="RU" />
                    <ext:IconListItem Text="Germany" Icon="FlagDe" Value="DE" />
                    <ext:IconListItem Text="Italy" Icon="FlagIt" Value="IT" />
                </Items>
            </ext:IconCombo>
        </form>
    </body>
    </html>
    One thing that I would like to add is functionality to automagically register the icons to the scriptmanager, but no success in my initial attempts. Also, I feel that I had to do a little too much work to extend the framework. It was impossible for me to extend from ComboBoxBase class because the underlying Items collection is locked into using the ListItem class. Maybe the Coolite Team can look into a solution for this; I'm thinking generics.

    -MC
  2. #2

    RE: Icon ComboBox

     Very nice.  I did the same thing and also had to create a new IconListItem.  
  3. #3

    RE: Icon ComboBox

    I was able to inherit from regular ComboBox and just added a new IconItems collection.  Of course, this assumes the user will not use both Items AND IconItems at the same time.


    
    Imports Coolite.Ext.Web
    Imports System.Drawing
    Imports System.Web.UI
    Imports System.ComponentModel
    
    
    <Assembly: WebResource("XXX.XXX.XXX.IconCombo.js", "application/x-javascript")> 
    <Assembly: WebResource("XXX.XXX.XXX.IconCombo.css", "text/css")> 
    
    
    Namespace Controls
    
    
        <ToolboxData("<{0}:IconCombo runat=""server""></{0}:IconCombo>")> _
        <ParseChildren(True)> _
        <PersistChildren(False)> _
        <SupportsEventValidation()> _
        <Xtype("iconcombo")> _
        <ClientStyle(Type:=GetType(IconCombo), WebResource:="XXX.XXX.XXX.IconCombo.css")> _
       <ValidationProperty("SelectedItem")> _
       <System.ComponentModel.Designer(GetType(EmptyDesigner))> _
       <InstanceOf(ClassName:="Ext.ux.IconCombo")> _
       <System.ComponentModel.Description("A combobox control for displaying icon and text")> _
       Public Class IconCombo
            Inherits Coolite.Ext.Web.ComboBox
    
    
    #Region " Constructor "
            Public Sub New()
                MyBase.New()
    
    
                Me.Mode = DataLoadMode.Local
                Me.Editable = False
                Me.ForceSelection = True
                Me.TriggerAction = Coolite.Ext.Web.TriggerAction.All
            End Sub
    #End Region
    
    
    #Region " Properties "
    
    
            ''' <summary>
            ''' "The underlying data icon to bind to this ComboBox  Note: use of a valueField requires the user to make a selection in order for a value to be mapped."
            ''' </summary>
            <ClientConfig()> _
            <Category("Config Options")> _
            <DefaultValue("")> _
            <Description("The underlying data icon to bind to this ComboBox  Note: use of a valueField requires the user to make a selection in order for a value to be mapped.")> _
            Public Overridable Property IconClsField() As String
                Get
                    Return If(DirectCast(Me.ViewState("IconClsField"), String), "icon")
                End Get
                Set(ByVal value As String)
                    Me.ViewState("IconClsField") = value
                End Set
            End Property
    
    
            Private _IconItems As IconComboItemCollection
    
    
            <PersistenceMode(PersistenceMode.InnerProperty)> _
            <ClientConfig("store", GetType(IconComboItemCollectionJsonConverter))> _
            Public ReadOnly Property IconItems() As IconComboItemCollection
                Get
                    If _IconItems Is Nothing Then
                        _IconItems = New IconComboItemCollection()
                    End If
    
    
                    Return _IconItems
                End Get
            End Property
    
    
    
    
    #End Region
    
    
        End Class
    
    
    #Region " IconComboItem "
    
    
        Public Class IconComboItem
    
    
    #Region " Constructor "
            Public Sub New()
    
    
            End Sub
    #End Region
    
    
    #Region " Properties "
            Private _Text As String = String.Empty
            Public Property Text() As String
                Get
                    Return _Text
                End Get
                Set(ByVal value As String)
                    _Text = value
                End Set
            End Property
    
    
            Private _Icon As String = String.Empty
            Public Property Icon() As String
                Get
                    Return _Icon
                End Get
                Set(ByVal value As String)
                    _Icon = value
                End Set
            End Property
    
    
            Private _Value As String = String.Empty
            Public Property Value() As String
                Get
                    Return _Value
                End Get
                Set(ByVal value As String)
                    _Value = value
                End Set
            End Property
    #End Region
    
    
        End Class
    
    
        Public Class IconComboItemCollection
            Inherits Generic.List(Of IconComboItem)
    
    
        End Class
    
    
    #End Region
    
    
    #Region " IconComboItemCollectionJsonConverter "
    
    
        Public Class IconComboItemCollectionJsonConverter
            Inherits Newtonsoft.Json.JsonConverter
    
    
            Public Overrides Function CanConvert(ByVal objectType As System.Type) As Boolean
                Return GetType(IconComboItemCollectionJsonConverter).IsAssignableFrom(objectType)
            End Function
    
    
            Public Overrides Function ReadJson(ByVal reader As Newtonsoft.Json.JsonReader, ByVal objectType As System.Type) As Object
                Throw New System.NotImplementedException()
            End Function
    
    
            Public Overrides Sub WriteJson(ByVal writer As Newtonsoft.Json.JsonWriter, ByVal value As Object)
                Dim items As IconComboItemCollection = TryCast(value, IconComboItemCollection)
                If items IsNot Nothing AndAlso items.Count > 0 Then
                    Dim sb As New System.Text.StringBuilder("new Ext.data.SimpleStore({fields:['text','value','icon'],data:[")
                    For Each item As IconComboItem In items
                        sb.Append("[")
                        sb.Append(JSON.Serialize(item.Text))
                        sb.Append(",")
                        sb.Append(JSON.Serialize(item.Value))
                        sb.Append(",")
                        sb.Append(JSON.Serialize(item.Icon))
                        sb.Append("],")
                    Next
    
    
                    sb.Remove(sb.Length - 1, 1)
                    sb.Append("]})")
    
    
                    writer.WriteRaw(sb.ToString)
                End If
            End Sub
    
    
        End Class
    
    
    #End Region
    
    
    End Namespace
  4. #4

    RE: Icon ComboBox


    Here is another gift. Here is the Coolite Toolkit interfacing the Google API to translate text. You just enter the text, select the language and presto!

    -MC


    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>IconCombo Test</title>
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!Ext.IsAjaxRequest)
                {
                    SM1.RegisterIcon(Icon.FlagUs);
                    SM1.RegisterIcon(Icon.FlagFr);
                    SM1.RegisterIcon(Icon.FlagRu);
                    SM1.RegisterIcon(Icon.FlagDe);
                    SM1.RegisterIcon(Icon.FlagIt);
                }
            }
        </script>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load('language', '1');
            
            translate = function(text, lang, target) {
                google.language.translate(
                    text,
                    '',
                    lang,
                    function(result) {
                        if (result.translation) {
                            target.setValue(result.translation);
                        }
                    }
                );
            }
        </script>
        
    </head>
    <body>
        <form id="form1" runat="server">
    
            <ext:ScriptManager runat="server" ID="SM1" ScriptMode="Debug" Locale="English">
            <Listeners>
                <DocumentReady Handler="google.language.getBranding('branding');translate(#{text}.getValue(), #{combo}.getValue(), #{translated});" />
            </Listeners>
            </ext:ScriptManager>
    
            <ext:Window ID="TransWindow" Title="Translate" Icon="World" Width="300" Resizable="false" Height="250" Modal="true" runat="server">
            <Body>
                <div style="padding:10px;">
                    <br />
                    Original Text: <br />
                    <ext:TextField ID="text" Width="250" Text="Hello World!" runat="server" /><br />
                    
                    <br />
                    Language: <br />
                    <ext:IconCombo 
                        ID="combo" 
                        TriggerAction="All"
                        Mode="Local"
                        Editable="false"
                        ForceSelection="true"
                        Select&#111;nfocus="true"
                        runat="server">
                    <Items>
                        <ext:IconListItem Text="English" Icon="FlagUs" Value="en" />
                        <ext:IconListItem Text="French" Icon="FlagFr" Value="fr" />
                        <ext:IconListItem Text="Russian" Icon="FlagRu" Value="ru" />
                        <ext:IconListItem Text="German" Icon="FlagDe" Value="de" />
                        <ext:IconListItem Text="Italian" Icon="FlagIt" Value="it" />
                    </Items>
                    <SelectedItem Value="en" />
                    <Listeners>
                        <Select Handler="translate(#{text}.getValue(), #{combo}.getValue(), #{translated});" />
                    </Listeners>
                    </ext:IconCombo><br />
    
                    <br />
                    Translated Text: <br />
                    <ext:TextField ID="translated" Width="250" runat="server" /><br />
                    
                    <br />
                    <div id="branding">
    
                
    
            </Body>
            </ext:Window>
    
        </form>
    </body>
    </html>
  5. #5

    RE: Icon ComboBox

    great!

    Thanx mindcore1

    Matteo
  6. #6

    RE: Icon ComboBox

    Good submission, the first one IconCombo is extremely useful.

    Cheers,
    Timothy
  7. #7

    RE: Icon ComboBox




    <U>how can i configure to use it for this Example? Please, help me!</U>
  8. #8

    RE: Icon ComboBox

    Nghieppham,

    Which example do you need help with, the IconCombo or the example of this control using the Google Translation API? What kinda problems are you having? I'm sure a few things may need refactoring since I created this control using Coolite version 0.7.

    -MC
  9. #9

    RE: Icon ComboBox

    Sorry but I do not understand where the file IconCombo.zip must be unzipped.For example in my coolite project path:
    "Coolite Toolkit Professional v0.8.1 \ Source Project \ Coolite.Ext.Web \ Ext", there is no "Extensions" directory.
    If you , please, could explain better how to use it to those like me who have just started using coolite i'd be really grateful.
    Thanks a lot
    Fabrizio (Italy)

Similar Threads

  1. [CLOSED] MVC Icon ComboBox
    By RCM in forum 1.x 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. Combobox with Icon
    By Maia in forum 1.x Help
    Replies: 7
    Last Post: Sep 03, 2010, 5:32 PM
  4. [CLOSED] Problem using icon comboBox
    By flormariafr in forum 1.x Premium Help
    Replies: 4
    Last Post: Mar 11, 2010, 10:33 AM
  5. Replies: 5
    Last Post: Mar 05, 2010, 3:15 PM

Posting Permissions