[CLOSED] How to set default value on remote combobox

  1. #1

    [CLOSED] How to set default value on remote combobox

    Often times I have comboboxes on a form where the store is loaded remotely when user clicks the dropdown trigger on the combobox. On page load, I want to populate those comboboxes with default values. In Ext 1.0, this isn't an issue because I can set the EmptyText to my display value and set the combobox value to the default value. In Ext 2.0, the value doesn't get set because store is empty.

    Here's your Ajax Example and I am trying to set SelectedItem on PageLoad. It works fine for the local combobox but not for the remote combobox.
    
    
    <%@ Import Namespace="Ext.Net" %>
    <%@ Import Namespace="Ext.Net.Utilities" %>
    <%@ Import Namespace="System.Linq" %>
    <%@ Import Namespace="System.Xml.Linq" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
            
        Private Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
            If Not IsPostBack AndAlso Not Ext.Net.ExtNet.IsAjaxRequest Then
                Me.ComboBox1.SelectedItem.Value = "BR"
                
                Me.ComboBox2.SelectedItem.Value = "4"
                Me.ComboBox2.SelectedItem.Text = "City 4"
            End If
        End Sub
            
        Protected Sub CitiesRefresh(sender As Object, e As StoreReadDataEventArgs)
            Dim data = New Generic.List(Of Object)
            
            For i As Integer = 0 To 10
                data.Add(New With {.Id = i.ToString(), .Name = "City " & i})
            Next
            
            Me.CitiesStore.DataSource = data
            Me.CitiesStore.DataBind()
        End Sub
        
        
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" Theme="Gray"
            DisableViewState="true" />
        <ext:ComboBox ID="ComboBox1" runat="server" Editable="false" TypeAhead="true" QueryMode="Local"
            ForceSelection="true" TriggerAction="All" SelectOnFocus="true" EmptyText="Select a country">
            <Listeners>
                <Select Handler="#{ComboBox2}.clearValue(); #{CitiesStore}.reload();" />
            </Listeners>
            <Items>
                <ext:ListItem Text="Belgium" Value="BE" />
                <ext:ListItem Text="Brazil" Value="BR" />
                <ext:ListItem Text="Bulgaria" Value="BG" />
                <ext:ListItem Text="Canada" Value="CA" />
                <ext:ListItem Text="Chile" Value="CL" />
                <ext:ListItem Text="Cyprus" Value="CY" />
                <ext:ListItem Text="Finland" Value="FI" />
                <ext:ListItem Text="France" Value="FR" />
                <ext:ListItem Text="Germany" Value="DE" />
                <ext:ListItem Text="Hungary" Value="HU" />
                <ext:ListItem Text="Ireland" Value="IE" />
                <ext:ListItem Text="Israel" Value="IL" />
                <ext:ListItem Text="Italy" Value="IT" />
                <ext:ListItem Text="Lithuania" Value="LT" />
                <ext:ListItem Text="Mexico" Value="MX" />
                <ext:ListItem Text="Netherlands" Value="NL" />
                <ext:ListItem Text="New Zealand" Value="NZ" />
                <ext:ListItem Text="Norway" Value="NO" />
                <ext:ListItem Text="Pakistan" Value="PK" />
                <ext:ListItem Text="Poland" Value="PL" />
                <ext:ListItem Text="Romania" Value="RO" />
                <ext:ListItem Text="Slovakia" Value="SK" />
                <ext:ListItem Text="Slovenia" Value="SI" />
                <ext:ListItem Text="Spain" Value="ES" />
                <ext:ListItem Text="Sweden" Value="SE" />
                <ext:ListItem Text="Switzerland" Value="CH" />
                <ext:ListItem Text="United Kingdom" Value="GB" />
            </Items>
        </ext:ComboBox>
        <ext:ComboBox ID="ComboBox2" runat="server" TypeAhead="true" QueryMode="Local" ForceSelection="true"
            TriggerAction="All" DisplayField="name" ValueField="id" EmptyText="Loading..."
            ValueNotFoundText="Loading...">
            <Store>
                <ext:Store runat="server" ID="CitiesStore" AutoLoad="false" OnReadData="CitiesRefresh">
                    <Model>
                        <ext:Model ID="Model1" runat="server" IDProperty="Id">
                            <Fields>
                                <ext:ModelField Name="id" Type="String" Mapping="Id" />
                                <ext:ModelField Name="name" Type="String" Mapping="Name" />
                            </Fields>
                        </ext:Model>
                    </Model>
                    <Listeners>
                        <Load Handler="#{ComboBox2}.setValue(#{ComboBox2}.store.getAt(0).get('id'));" />
                    </Listeners>
                </ext:Store>
            </Store>
        </ext:ComboBox>
        </form>
    </body>
    </html>
    Last edited by Daniil; Apr 02, 2013 at 4:13 AM. Reason: [CLOSED]
  2. #2
    Hi @jchau,

    Yes, it works in Ext.NET v1, but it is a trick. I mean they don't specially support such behavior in v1.

    And, actually, in Ext.NET v2 it just stops working.

    What about to load an item? Just the only one you need to select.
  3. #3
    This sounds like a feature that should work out of the box since it renders remote comboboxes useless on forms that edit existing data. If I preload the item into the store, won't that mark the store as loaded so on trigger click, it won't do the remote load? Looking at the source code for ExtJS combobox.setValue, they seem to be doing something similar if value is not found in the store. I am hesistant to override setValue since it's such a core function of the control...
  4. #4
    Quote Originally Posted by jchau View Post
    If I preload the item into the store, won't that mark the store as loaded so on trigger click, it won't do the remote load?
    Well, it might. If it is not reloaded on trigger click, the this should help:
    delete comboBox.lastQuery;
    Quote Originally Posted by jchau View Post
    Looking at the source code for ExtJS combobox.setValue, they seem to be doing something similar if value is not found in the store.
    Could you clarify what exactly do you mean?

    Quote Originally Posted by jchau View Post
    I am hesistant to override setValue since it's such a core function of the control...
    I would also avoid overriding it.

    You also could try to add a required item to the ComboBox's Items. I mean the item that you need to select initially. But, personally, I would just preload this item.
  5. #5
    Can you reopen this thread and provide an acceptable solution to the original issue of not being able to set a default value for remote comboboxes? I still do not see an easy way to do this very simple and necessary concept. Again, this makes remote comboboxes completely useless on forms used to edit existing model.
  6. #6
    Try the following sample
    Changes:
    - Combobox2 has initial item (Citi4, 4)
    - Combobox2.AlwaysMergeItems = false

    Question: if you set initial selected value for Combobox1 then why don't you want to prepopulate Combobox2 with appropriate values also (why don't you want to bind Brazil cities initialy to combo2)?

    <%@ Page Language="VB" %>
    <%@ Import Namespace="Ext.Net" %>
    <%@ Import Namespace="Ext.Net.Utilities" %>
    <%@ Import Namespace="System.Linq" %>
    <%@ Import Namespace="System.Xml.Linq" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
             
        Private Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
            If Not IsPostBack AndAlso Not Ext.Net.ExtNet.IsAjaxRequest Then
                Me.ComboBox1.SelectedItem.Value = "BR"
                 
                Me.ComboBox2.SelectedItem.Value = "4"
                Dim item = New Ext.Net.ListItem("City 4", 4)
                Me.ComboBox2.Items.Add(item)
            End If
        End Sub
             
        Protected Sub CitiesRefresh(sender As Object, e As StoreReadDataEventArgs)
            Dim data = New Generic.List(Of Object)
             
            For i As Integer = 0 To 10
                data.Add(New With {.Id = i.ToString(), .Name = "City " & i})
            Next
             
            Me.CitiesStore.DataSource = data
            Me.CitiesStore.DataBind()
        End Sub
         
         
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" Theme="Gray"
            DisableViewState="true" />
        <ext:ComboBox ID="ComboBox1" runat="server" Editable="false" TypeAhead="true" QueryMode="Local"
            ForceSelection="true" TriggerAction="All" SelectOnFocus="true" EmptyText="Select a country">
            <Listeners>
                <Select Handler="#{ComboBox2}.clearValue(); #{CitiesStore}.reload();" />
            </Listeners>
            <Items>
                <ext:ListItem Text="Belgium" Value="BE" />
                <ext:ListItem Text="Brazil" Value="BR" />
                <ext:ListItem Text="Bulgaria" Value="BG" />
                <ext:ListItem Text="Canada" Value="CA" />
                <ext:ListItem Text="Chile" Value="CL" />
                <ext:ListItem Text="Cyprus" Value="CY" />
                <ext:ListItem Text="Finland" Value="FI" />
                <ext:ListItem Text="France" Value="FR" />
                <ext:ListItem Text="Germany" Value="DE" />
                <ext:ListItem Text="Hungary" Value="HU" />
                <ext:ListItem Text="Ireland" Value="IE" />
                <ext:ListItem Text="Israel" Value="IL" />
                <ext:ListItem Text="Italy" Value="IT" />
                <ext:ListItem Text="Lithuania" Value="LT" />
                <ext:ListItem Text="Mexico" Value="MX" />
                <ext:ListItem Text="Netherlands" Value="NL" />
                <ext:ListItem Text="New Zealand" Value="NZ" />
                <ext:ListItem Text="Norway" Value="NO" />
                <ext:ListItem Text="Pakistan" Value="PK" />
                <ext:ListItem Text="Poland" Value="PL" />
                <ext:ListItem Text="Romania" Value="RO" />
                <ext:ListItem Text="Slovakia" Value="SK" />
                <ext:ListItem Text="Slovenia" Value="SI" />
                <ext:ListItem Text="Spain" Value="ES" />
                <ext:ListItem Text="Sweden" Value="SE" />
                <ext:ListItem Text="Switzerland" Value="CH" />
                <ext:ListItem Text="United Kingdom" Value="GB" />
            </Items>
        </ext:ComboBox>
        <ext:ComboBox ID="ComboBox2" runat="server" TypeAhead="true" QueryMode="Local" ForceSelection="true"
            TriggerAction="All" DisplayField="name" ValueField="id" EmptyText="Loading..." AlwaysMergeItems="false"
            ValueNotFoundText="Loading...">
            <Store>
                <ext:Store runat="server" ID="CitiesStore" AutoLoad="true" OnReadData="CitiesRefresh">
                    <Model>
                        <ext:Model ID="Model1" runat="server" IDProperty="Id">
                            <Fields>
                                <ext:ModelField Name="id" Type="String" Mapping="Id" />
                                <ext:ModelField Name="name" Type="String" Mapping="Name" />
                            </Fields>
                        </ext:Model>
                    </Model>
                    <Listeners>
                        <Load Handler="if(this.getCount()>0) {#{ComboBox2}.setValue(#{ComboBox2}.store.getAt(0).get('id'));}" />
                    </Listeners>
                </ext:Store>
            </Store>
        </ext:ComboBox>
        </form>
    </body>
    </html>
  7. #7
    How do I set initial items in combobox2 when the data is remote? If I add items to the combobox, won't that override the remote store?

    As for binding combobox2, the whole point of having a remote store is to NOT load the data on initial page load. The list can be very long; that's why I am using a remote store. So maybe the answer is that I need to remote load JUST the selected record? And then on query, clear store and load it again?
  8. #8
    I created my own control that inherits from Ext.form.Combobox that will initially set the store.data property to the default items. When they hit the dropdown, it clears combobox.lastQuery to reload. So I am good now as long as I use this custom control.
  9. #9
    Quote Originally Posted by jchau View Post
    How do I set initial items in combobox2 when the data is remote?
    Well, the same way that Vladimir suggested. Does it not work?

    Quote Originally Posted by jchau View Post
    If I add items to the combobox, won't that override the remote store?
    This setting should do the job.
     Combobox2.AlwaysMergeItems = false
    Quote Originally Posted by jchau View Post
    As for binding combobox2, the whole point of having a remote store is to NOT load the data on initial page load. The list can be very long; that's why I am using a remote store. So maybe the answer is that I need to remote load JUST the selected record? And then on query, clear store and load it again?
    Well, I suggested it here.
    Quote Originally Posted by Daniil View Post
    What about to load an item? Just the only one you need to select.
    Re: your solution

    Quote Originally Posted by jchau View Post
    I created my own control that inherits from Ext.form.Combobox that will initially set the store.data property to the default items. When they hit the dropdown, it clears combobox.lastQuery to reload. So I am good now as long as I use this custom control.
    An interesting finding. I am not 100% sure that mixing up inline Data and a Proxy is good, but it appears to be working well.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.ComboBox1.GetStore();
                store.Data = new object[] 
                { 
                    new 
                    { 
                        value = "2", 
                        text = "Item 2" 
                    } 
                };
            }
        }
    
        protected void Store_OnReadData(object sender, StoreReadDataEventArgs e)
        {
            Store store = sender as Store;
            store.DataSource = new object[] 
            { 
                new object[] { "1", "Item 1" },
                new object[] { "2", "Item 2" },
                new object[] { "3", "Item 3" }
            };
            store.DataBind();
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:ComboBox
                ID="ComboBox1"
                runat="server"
                DisplayField="text"
                ValueField="value">
                <Store>
                    <ext:Store runat="server" OnReadData="Store_OnReadData">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="value" />
                                    <ext:ModelField Name="text" />
                                </Fields>
                            </ext:Model>
                        </Model>
                        <Proxy>
                            <ext:PageProxy>
                                <Reader>
                                    <ext:ArrayReader />
                                </Reader>
                            </ext:PageProxy>
                        </Proxy>
                    </ext:Store>
                </Store>
                <SelectedItems>
                    <ext:ListItem Index="0" />
                </SelectedItems>
            </ext:ComboBox>
        </form>
    </body>
    </html>

Similar Threads

  1. [CLOSED] GridFilter Remote ComboBox filter
    By kenanhancer in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 17, 2011, 3:20 PM
  2. Replies: 0
    Last Post: Oct 11, 2010, 4:38 AM
  3. Wrong default value in comboBox?
    By flormariafr in forum 1.x Help
    Replies: 4
    Last Post: Jan 26, 2010, 10:12 PM
  4. Hello, ComboBox Remote Query Question
    By bruce in forum 1.x Help
    Replies: 0
    Last Post: Mar 12, 2009, 10:55 PM
  5. ComboBox - Add Default Item
    By Tbaseflug in forum 1.x Help
    Replies: 0
    Last Post: Feb 03, 2009, 3:26 PM

Tags for this Thread

Posting Permissions