PDA

View Full Version : [CLOSED] ext:ComboBox: IconCombo. Select a item in codebehind



supera
Apr 04, 2012, 12:53 PM
Hi,

I follow this example...

http://examples2.ext.net/#/Form/ComboBox/IconCombo/

and works fine... but I need select a item in the iconcombo in codebehind... How I do it?

I'm creating the datasource with a code in array. I wish select the item on list of combo with this code:



Protected Function storeStatus_GetData() As Object()
Dim vRet As Object() = { _
New Object() {0, "tarefas-status-criado-icon", "Criada"}, _
New Object() {1, "tarefas-status-completa-icon", "Completa"}, _
New Object() {2, "tarefas-status-cancelado-icon", "Cancelada"}, _
New Object() {3, "tarefas-status-em-andamento-icon", "Em andamento"}, _
New Object() {5, "tarefas-status-conferida-icon", "Conferida"} _
}

Return vRet

End Function

Daniil
Apr 04, 2012, 3:16 PM
Hi,



but I need select a item in the iconcombo in codebehind... How I do it?


Please populate the ComboBox SelectedItems collection.

During DirectEvent you will also need to call its UpdateSelectedItems method.

supera
Apr 04, 2012, 9:40 PM
Hi Daniil!

I am sorry, but I don't understand when I do this.

SelectItems collection accepts only Ext.net.ListItem objects... and I have only the ID as a integer value.

I create a sample... When click in the button, I need select the respective item in combobox.



<%@ Page Language="vb" %>
<%@ 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 Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
Dim store As Ext.Net.Store = Me.ComboBox1.GetStore()

store.DataSource = New Object() { _
New Object() {0, ResourceManager.GetIconClassName(Icon.FlagFr), "France"}, _
New Object() {1, ResourceManager.GetIconClassName(Icon.FlagCa), "Canada"}, _
New Object() {2, ResourceManager.GetIconClassName(Icon.FlagDe), "Germany"}, _
New Object() {3, ResourceManager.GetIconClassName(Icon.FlagUs), "United States"}, _
New Object() {4, ResourceManager.GetIconClassName(Icon.FlagIt), "Italy"} _
}

store.DataBind()

Me.ResourceManager1.RegisterIcon(Icon.FlagFr)
Me.ResourceManager1.RegisterIcon(Icon.FlagCa)
Me.ResourceManager1.RegisterIcon(Icon.FlagDe)
Me.ResourceManager1.RegisterIcon(Icon.FlagUs)
Me.ResourceManager1.RegisterIcon(Icon.FlagIt)

End Sub

Protected Sub selectItem(sender As Object, evt As Ext.Net.DirectEventArgs)
ComboBox1.Select(evt.ExtraParams("ID"))
End Sub

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></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" Locale="pt-BR" />
<form id="form1" runat="server">
<ext:ComboBox
ID="ComboBox1"
runat="server"
Width="250"
Editable="false"
DisplayField="name"
ValueField="name"
QueryMode="Local"
TriggerAction="All"
EmptyText="Select a country...">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="iconCls" />
<ext:ModelField Name="name" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ListConfig>
<ItemTpl ID="ItemTpl1" runat="server">
<Html>
<div class="icon-combo-item {iconCls}">
{name}
</div>
</Html>
</ItemTpl>
</ListConfig>
<Listeners>
<Select Handler="this.setIconCls(records[0].get('iconCls'));" />
</Listeners>
</ext:ComboBox>
<ext:Button runat="server" ID="btn1" Text="Click to select item 'Germany' in combobox">
<DirectEvents>
<Click OnEvent="selectItem">
<ExtraParams>
<ext:Parameter Name="ID" Value="2" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:Button runat="server" ID="Button1" Text="Click to select item 'Italy' in combobox">
<DirectEvents>
<Click OnEvent="selectItem">
<ExtraParams>
<ext:Parameter Name="ID" Value="4" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
</form>
</body>
</html>

Daniil
Apr 05, 2012, 11:44 AM
At the first of all you should wrap the Page_Load code in

If Not ExtNet.IsAjaxRequest Then
...
End If
to avoid a data to bind on each request.

And yes, you can use the Select method instead of populating SelectedItems.

But you should:

1. Set up

ValueField="ID"
for the ComboBox. In this case the ID field will be consider as a ComboBox value.

2. Use

ComboBox1.Select(CObj(CInt(evt.ExtraParams("ID"))))

Converting to integer is required because there are integer values of the ID field.

Converting to object is required to choose a correct overloaded version of the Select method.

supera
Apr 05, 2012, 12:45 PM
Hi Daniil! Thanks for your help...

Works fine... the item is selected in combobox... but text only... the icon not is rendered.

There are a any way that paint the icon? When I select with the mouse pointer, the incon is rendered... will be interesting get the same effect when the item is selected in codebehind.

supera
Apr 05, 2012, 12:48 PM
Oops... new information.

If I don't open the list of combobox, when i click in buttons of the sample, only text appears (icon is not rendered)...
After I open the list of combobox, the icon is rendered when I click in buttons to select items in codebehind.

Daniil
Apr 05, 2012, 1:22 PM
Confirmed. Needs to fire the Select event also, because icon is set up within the Select listener.

Example

Dim id As Integer = CInt(evt.ExtraParams("ID"))
ComboBox1.Select(CObj(id))
Dim record As ModelProxy = ComboBox1.GetStore().GetById(id)
ComboBox1.FireEvent("select", Nothing, New Object() {New JRawValue(record.ModelInstance)})

supera
Apr 10, 2012, 1:53 PM
Hi Daniil!

If I use the buttons to select the item in combobox, works fine...
But, if I insert in page_load the code to select item in combobox, a error occurs.

The error is:
Runtime Error in Microsoft JScript: Can not get property value 'get': the object is null or not defined
4089

I made a new sample, without buttons (select in page_load only).


<%@ Page Language="vb" %>
<%@ 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 Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
Dim store As Ext.Net.Store = Me.ComboBox1.GetStore()
Dim record As Ext.Net.ModelProxy

If Not Ext.Net.ExtNet.IsAjaxRequest Then
store.DataSource = New Object() { _
New Object() {0, ResourceManager.GetIconClassName(Icon.FlagFr), "France"}, _
New Object() {1, ResourceManager.GetIconClassName(Icon.FlagCa), "Canada"}, _
New Object() {2, ResourceManager.GetIconClassName(Icon.FlagDe), "Germany"}, _
New Object() {3, ResourceManager.GetIconClassName(Icon.FlagUs), "United States"}, _
New Object() {4, ResourceManager.GetIconClassName(Icon.FlagIt), "Italy"} _
}

store.DataBind()

Me.ResourceManager1.RegisterIcon(Icon.FlagFr)
Me.ResourceManager1.RegisterIcon(Icon.FlagCa)
Me.ResourceManager1.RegisterIcon(Icon.FlagDe)
Me.ResourceManager1.RegisterIcon(Icon.FlagUs)
Me.ResourceManager1.RegisterIcon(Icon.FlagIt)

ComboBox1.Select(CObj(CInt(2)))
record = ComboBox1.GetStore().GetById(CInt(2))
ComboBox1.FireEvent("select", Nothing, New Object() {New Ext.Net.JRawValue(record.ModelInstance)})

End If

End Sub

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></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" Locale="pt-BR" />
<form id="form1" runat="server">
<ext:ComboBox
ID="ComboBox1"
runat="server"
Width="250"
Editable="false"
DisplayField="name"
ValueField="ID"
QueryMode="Local"
TriggerAction="All"
EmptyText="Select a country...">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="iconCls" />
<ext:ModelField Name="name" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ListConfig>
<ItemTpl ID="ItemTpl1" runat="server">
<Html>
<div class="icon-combo-item {iconCls}">
{name}
</div>
</Html>
</ItemTpl>
</ListConfig>
<Listeners>
<Select Handler="this.setIconCls(records[0].get('iconCls'));" />
</Listeners>
</ext:ComboBox>
</form>
</body>
</html>

Daniil
Apr 10, 2012, 3:36 PM
What about just

ComboBox1.Icon = Icon.FlagDe
ComboBox1.Select(CObj(CInt(2)))
in Page_Load?

supera
Apr 10, 2012, 4:04 PM
Hi Dannil...

Works... Thanks a lot.

Daniil
Apr 10, 2012, 4:11 PM
By the way, you can use

ComboBox1.SelectedItems.Add(New Ext.Net.ListItem() With {.Value = "2", .Mode = ParameterMode.Raw })
instead of

ComboBox1.Select(CObj(CInt(2)))

During DirectEvent you will also need to call

ComboBox1.UpdateSelectedItems()
the changes in SelectedItems to be affected.

Daniil
Apr 10, 2012, 5:12 PM
Vladimir has suggested the following changes to optimize the code.

1. Remove the Select listener of the ComboBox.

<Select Handler="this.setIconCls(records[0].get('iconCls'));" />

2. Set up the following Change listener for the ComboBox.

<Change Handler="if(this.valueModels && this.valueModels.length > 0) {
this.setIconCls(this.valueModels[0].get('iconCls'));
}" />

3. To select an item in Page_Load the following will be enough:

ComboBox1.SelectedItems.Add(New Ext.Net.ListItem() With {.Value = "2", .Mode = ParameterMode.Raw })

So, you can remove:

ComboBox1.Icon = Icon.FlagDe

4. To select an item during DirectEvent the following will be enough.

Protected Sub selectItem(sender As Object, evt As Ext.Net.DirectEventArgs)
ComboBox1.SelectedItems.Add(New Ext.Net.ListItem() With {.Value = evt.ExtraParams("ID"), .Mode = ParameterMode.Raw})
ComboBox1.UpdateSelectedItems()
End Sub