-
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:
Code:
<%@ 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"
Selectonfocus="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
-
RE: Icon ComboBox
*Very nice. *I did the same thing and also had to create a new IconListItem. *
-
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.
Code:
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
-
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
Code:
<%@ 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"
Selectonfocus="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>
-
RE: Icon ComboBox
great!
Thanx mindcore1
Matteo
-
RE: Icon ComboBox
Good submission, the first one IconCombo is extremely useful.
Cheers,
Timothy
-
RE: Icon ComboBox
<U>how can i configure to use it for this Example? Please, help me!</U>
-
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
-
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)
