What's New?

Populating ComboBox from Store on page load

  1. #1
    Feb 15, 2009, 10:38 PM

    Populating ComboBox from Store on page load

    Hi all,

    This seems trivial, but I can't seem to make it work. Can you guys help me? On page load, I want a ComboBox to load item from a Store. This is the code:

    <form id="form1" runat="server">

<ext:ScriptManager ID="ScriptManager1" runat="server"></ext:ScriptManager>

<ext:Store ID="Store1" runat="server" AutoLoad="true">
    <Proxy>
        <ext:ScriptTagProxy Url="http://localhost:2666/Api/ListPerson"></ext:ScriptTagProxy>
    </Proxy>        
    <Reader>
        <ext:JsonReader Root="root">
            <Fields>
                <ext:RecordField Name="id" Mapping="Id" Type="Auto"></ext:RecordField>
                <ext:RecordField Name="name" Mapping="Name"></ext:RecordField>
                <ext:RecordField Name="age" Mapping="Age" Type="Int"></ext:RecordField>
            </Fields>
        </ext:JsonReader>
    </Reader>
    
</ext:Store>
    
    
    <ext:ComboBox runat="server"
        ID="ComboBox1" 
        StoreID="Store1"
        ValueField="Id"
        DisplayField="Name"
        LoadingText="Loading..."
        Editable="false" 
        Mode="Local"
        TriggerAction="All"
        EmptyText="Empty"
        ValueNotFoundText="Not found">
    </ext:ComboBox>        


</form>
    The web service is being fetched properly since I can see the response using FireBug. Sample of the web service result:

    {
    root: [
        { Id: '1', Name: 'Person1', Age: 1},
        { Id: '2', Name: 'Person2', Age: 2},
        { Id: '3', Name: 'Person3', Age: 3},
        { Id: '4', Name: 'Person4', Age: 4}
    ]
}
    But the items never appear in the ComboBox, it shows "Empty" (the EmptyText) instead. Anything that I missed?
    Thanks.
  2. #2
    Jun 22, 2009, 6:04 AM

    RE: Populating ComboBox from Store on page load

    I have the same problem...someone know how to resolve it?
    Thanks
  3. #3
    Jun 22, 2009, 6:55 AM

    RE: Populating ComboBox from Store on page load

    Hi,

    Please note that ScriptTagProxy should be used if url from different domain then current page only (otherwise use HttpProxy)
    You use incorrect names in ValueField and DisplayField. You need use values from Name but you use values from Mapping.
    Correct values:
    ValueField="id"
    DisplayField="name"

    Remove Mode="Local" to showing loading animation

    Here is my sample
    <%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic"%>
<%@ 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 id="Head1" runat="server">
    <title></title>        
</head>
<body>    
    <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server"/>
        
        <ext:Store runat="server" ID="Store1" AutoLoad="true">
            <Proxy>
                <ext:ScriptTagProxy Url="http://extjs.com/forum/topics-browse-remote.php" />
            </Proxy>
            <Reader>
                <ext:JsonReader Root="topics">
                    <Fields>
                        <ext:RecordField Name="threadid" />
                        <ext:RecordField Name="title" />                        
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
        
        <ext:ComboBox runat="server"
            ID="ComboBox1" 
            Width="300"
            StoreID="Store1"
            ValueField="threadid"
            DisplayField="title"
            LoadingText="Loading..."
            Editable="false" 
            TriggerAction="All"
            EmptyText="Empty"
            ValueNotFoundText="Not found">
        </ext:ComboBox>        
    </form>
</body>
</html>
  4. #4
    Jun 22, 2009, 8:29 AM

    RE: Populating ComboBox from Store on page load

    Thank you!!

    I have another problem, my combobox is correctly filled... But the current item is not correctly set...

    I use a javascript to get the name of the current selection : 

     
var Renderer = function(value) {
            var r = ds.getById(value);

            if (Ext.isEmpty(r)) {
                return "No data";
            }

            return r.data.name;
        }
    I have the following store to get the data

    <ext:Store ID="ds" runat="server">
        <Proxy>
            <ext:HttpProxy Url="/Postes/GetAll/" />
        </Proxy>
        <Reader>
            <ext:JsonReader ReaderID="id" Root="data">
                <Fields>
                    <ext:RecordField Name="id" />
                    <ext:RecordField Name="name" />
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:Column ColumnID="id" DataIndex="id" Header="Site" Width="250">
                                <Renderer Fn="Renderer" />
                                <Editor>
                                    <ext:ComboBox 
                                        ID="cbx" 
                                        runat="server" 
                                        StoreID="ds" 
                                        DisplayField="name" 
                                        ValueField="id"
                                        LoadingText="Searching..."
                                        TriggerAction="All"
                                        AutoPostBack="True"
                                         />
                                </Editor>
                            </ext:Column>
    Whe the page is first loaded, my combobox is filled by "no data", but my "value" (in the javascript code) is not empty (i've try to get it with a Ext.Msg.alert()). I must to refresh the page to get it...

    Do you understand my problem?

    Thanks a lot!!!
  5. #5
    Jun 22, 2009, 8:37 AM

    RE: Populating ComboBox from Store on page load

    Hi,


    Just your Store which used by Combo is not loaded when grid is rendering. You need to wait that store loading and after that load store for grid (for example set AutoLoad="false" for grid's store and call GridStore1.load() in Load listener of ComboStore)

  6. #6
    Jun 22, 2009, 9:12 AM

    RE: Populating ComboBox from Store on page load

    Thanks again, I see the problem now, even if I don't understand why it's not so easy to do it.
    But how I can set a listener for the ComboStore? I don't see how to fix it... Where and how do I must put a listener? In the ComboBox? there is not Lisetener property...In the GridView?
  7. #7
    Jun 23, 2009, 7:46 AM

    RE: Populating ComboBox from Store on page load

    I've found a way to resolve my problem !

    I've put a listener after columnmodel

                        <Listeners>
                        <BeforeRender Handler="ds.load();" />
                    </Listeners>
    Thanks a lot !!
  8. #8
    Feb 06, 2012, 3:56 PM
    This works for me.

    Quote Originally Posted by Vladimir View Post
    Remove Mode="Local" to showing loading animation
    I'm searching how to not show loading animation when edit the combo in Grid Panel on edit mode.
    Because the first time the combobox show this load and close de edition mode... then I add Mode="Local" and now all works perfect.

    Maybe it help others. Add the code:

                                                <ext:Column ColumnID="Codigo" Header="<%$ Resources:BaseLocalizedText, CamposLlaves_Codigo_Titulo%>" DataIndex="Codigo" Width="250">
                                                <Editor>
                                                    <ext:ComboBox 
                                                        ID="cbCodigo" 
                                                        runat="server" 
                                                        StoreID="DfcCodigoStore"  ValueField="Codigo" DisplayField="Nombre" AllowBlank="false"
                                                        Editable="false" Mode="Local">
                                                        <Listeners>
                                                            <Select Handler="this.fireEvent('blur', this);" Delay="10" />
                                                        </Listeners>
                                                    </ext:ComboBox>
                                                </Editor>
                                                <Renderer Fn="DefinicionesRenderer"/>
                                            </ext:Column>
    Combobox and column are rededered by the same store.

Similar Threads

  1. how to set combobox default value when page load in mvc?
    By EagleShi in forum 1.x Help
    Replies: 0
    Last Post: Jun 03, 2011, 4:45 PM
  2. [CLOSED] Select First Entry in ComboBox on page load
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 29, 2011, 4:30 PM
  3. [CLOSED] Problem ComboBox with Listeners Load of Store
    By xeo4.it in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jan 18, 2011, 3:38 PM
  4. Populating form textboxes with data from a store.
    By Mike in forum 1.x Help
    Replies: 5
    Last Post: Jan 04, 2011, 8:09 PM
  5. [CLOSED] [1.0] combobox load blank rows from store
    By PoloTheMonk in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 30, 2010, 9:35 AM

Posting Permissions