PDA

View Full Version : Icon ComboBox


mindcore1
Jan 28, 2009, 1:30 PM
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
jchau
Jan 28, 2009, 11:40 PM
 Very nice.  I did the same thing and also had to create a new IconListItem.  
jchau
Jan 28, 2009, 11:50 PM
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(EmptyDesign er))> _
   <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).IsAs signableFrom(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
mindcore1
Jan 29, 2009, 12:43 AM
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>
methode
Jan 29, 2009, 11:41 AM
great!

Thanx mindcore1

Matteo
Timothy
Jan 31, 2009, 6:00 PM
Good submission, the first one IconCombo is extremely useful.

Cheers,
Timothy
Nghieppham
Oct 27, 2009, 1:53 AM
<U>how can i configure to use it for this Example? Please, help me!</U>
mindcore1
Oct 28, 2009, 12:43 AM
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
Fabrizio
Dec 01, 2009, 10:42 AM
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)