[CLOSED] TypeAhead databound combobox

  1. #1

    [CLOSED] TypeAhead databound combobox

    Hi,

    Could you please provide a link to a good example of a databound TypeAhead ComboBox?

    Thanks,

    Vadym
    Last edited by Daniil; Jun 27, 2012 at 2:40 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Please clarify the requirement. I don't understand well.
  3. #3
    After a ComboBox is populated from the store, I'd like to start typing in it and the closest match text will auto-complete for me. I also need it to be impossible to choose anything but the items from the store. I could provide a code sample if necessary but that would be just a simple combo with a JsonReader store.

    Thanks,

    Vadym
  4. #4
    Well, you just need to set up
    TypeAhead="true"
    And, probably,
    MinChars="1"
    See also
    http://docs.sencha.com/ext-js/3-4/#!...-cfg-typeAhead
    http://docs.sencha.com/ext-js/3-4/#!...x-cfg-minChars
  5. #5
    I'm probably missing something in configuration because it doesn't work properly for me. When I start typing in the details combobox, the first item pops up every time event after clearing the input string. Please refer to the code sample, I do apologize for its length.

    <%@ 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)
            {
                this.StoreMaster.DataSource = this.MasterData();
                this.StoreMaster.DataBind();
            }
        }
    
        private System.Data.DataTable MasterData()
        {
            System.Data.DataTable dt = new System.Data.DataTable();
            dt.Columns.Add(new System.Data.DataColumn("MasterId", Type.GetType("System.Int32")));
            dt.Columns.Add(new System.Data.DataColumn("MasterDesc", Type.GetType("System.String")));
    
            System.Data.DataRow dr = dt.NewRow();
            dr.BeginEdit();
            dr[0] = 0;
            dr[1] = "No Items";
            dr.EndEdit();
            dt.Rows.Add(dr);
    
            dr = dt.NewRow();
            dr.BeginEdit();
            dr[0] = 1;
            dr[1] = "Single Item";
            dr.EndEdit();
            dt.Rows.Add(dr);
    
            dr = dt.NewRow();
            dr.BeginEdit();
            dr[0] = 2;
            dr[1] = "Several Items (Mandatory)";
            dr.EndEdit();
            dt.Rows.Add(dr);
    
            dr = dt.NewRow();
            dr.BeginEdit();
            dr[0] = 3;
            dr[1] = "Several Items (Optional)";
            dr.EndEdit();
            dt.Rows.Add(dr);
    
            return dt;
        }
    
        private System.Data.DataTable DetailsData(int masterId)
        {
    
            System.Data.DataTable dt = new System.Data.DataTable();
            dt.Columns.Add(new System.Data.DataColumn("DetailsId", Type.GetType("System.Int32")));
            dt.Columns.Add(new System.Data.DataColumn("DetailsDesc", Type.GetType("System.String")));
    
            switch (masterId)
            {
                case 0:
                    return dt;
                case 1:
                    System.Data.DataRow dr = dt.NewRow();
                    dr.BeginEdit();
                    dr[0] = 1;
                    dr[1] = "Canada";
                    dr.EndEdit();
                    dt.Rows.Add(dr);
                    return dt;
                case 2:
                    dr = dt.NewRow();
                    dr.BeginEdit();
                    dr[0] = 1;
                    dr[1] = "Canada";
                    dr.EndEdit();
                    dt.Rows.Add(dr);
    
                    dr = dt.NewRow();
                    dr.BeginEdit();
                    dr[0] = 2;
                    dr[1] = "United States";
                    dr.EndEdit();
                    dt.Rows.Add(dr);
    
                    dr = dt.NewRow();
                    dr.BeginEdit();
                    dr[0] = 3;
                    dr[1] = "France";
                    dr.EndEdit();
                    dt.Rows.Add(dr);
    
                    dr = dt.NewRow();
                    dr.BeginEdit();
                    dr[0] = 4;
                    dr[1] = "Germany";
                    dr.EndEdit();
                    dt.Rows.Add(dr);
    
                    dr = dt.NewRow();
                    dr.BeginEdit();
                    dr[0] = 5;
                    dr[1] = "Poland";
                    dr.EndEdit();
                    dt.Rows.Add(dr);
                    return dt;
                case 3:
                    dr = dt.NewRow();
                    dr.BeginEdit();
                    dr[0] = 1;
                    dr[1] = "Canada";
                    dr.EndEdit();
                    dt.Rows.Add(dr);
    
                    dr = dt.NewRow();
                    dr.BeginEdit();
                    dr[0] = 2;
                    dr[1] = "United States";
                    dr.EndEdit();
                    dt.Rows.Add(dr);
    
                    dr = dt.NewRow();
                    dr.BeginEdit();
                    dr[0] = 3;
                    dr[1] = "France";
                    dr.EndEdit();
                    dt.Rows.Add(dr);
    
                    dr = dt.NewRow();
                    dr.BeginEdit();
                    dr[0] = 4;
                    dr[1] = "Germany";
                    dr.EndEdit();
                    dt.Rows.Add(dr);
    
                    dr = dt.NewRow();
                    dr.BeginEdit();
                    dr[0] = 5;
                    dr[1] = "Poland";
                    dr.EndEdit();
                    dt.Rows.Add(dr);
    
                    return dt;
                default:
                    break;
            };
            return dt;
        }
    
        protected void ComboMaster_Select(object sender, DirectEventArgs e)
        {
            int masterId = Convert.ToInt32(e.ExtraParams["MasterId"]);
            this.StoreDetails.DataSource = this.DetailsData(masterId);
            this.StoreDetails.DataBind();
    
            switch (masterId)
            {
                case 0:
                    this.ComboDetails.Disabled = true;
                    SetEmptyText(false);
                    SetAllowBlank(true);
                    break;
                case 1:
                    this.ComboDetails.Disabled = false;
                    SetEmptyText(true);
                    SetAllowBlank(false);
                    this.ComboDetails.SelectedIndex = 0;
                    break;
                case 2:
                    this.ComboDetails.Disabled = false;
                    SetEmptyText(true);
                    SetAllowBlank(false);
                    break;
                case 3:
                    this.ComboDetails.Disabled = false;
                    SetEmptyText(true);
                    SetAllowBlank(true);
                    break;
                default:
                    break;
            };
        }
    
        private void SetEmptyText(bool setEmptyText)
        {
            if (setEmptyText)
            {
                this.ComboDetails.EmptyText = "Select Details Item...";
                this.ComboDetails.ClearValue();
            }
            else
            {
                this.ComboDetails.EmptyText = null;
                this.ComboDetails.Call("el.removeClass", "x-form-empty-field");
                this.ComboDetails.ClearValue();
            }
        }
    
        private void SetAllowBlank(bool allowBlank)
        {
            if (allowBlank)
            {
                this.ComboDetails.AllowBlank = true;
                this.ComboDetails.Call("validate");
            }
            else
            {
                this.ComboDetails.AllowBlank = false;
            }
        }
    
    </script>
    <!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>Simple Array Grid - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <h1>
            Master - Details Comboboxes</h1>
        <ext:FormPanel runat="server">
            <Items>
                <ext:ComboBox ID="ComboMaster" runat="server" DisplayField="MasterDesc" ValueField="MasterId"
                    Editable="false" TypeAhead="true" SelectOnFocus="true" EmptyText="Select Master Item..."
                    AllowBlank="false" Width="270">
                    <Store>
                        <ext:Store ID="StoreMaster" AutoLoad="true" runat="server">
                            <SortInfo Field="MasterDesc" Direction="ASC" />
                            <Reader>
                                <ext:JsonReader>
                                    <Fields>
                                        <ext:RecordField Name="MasterId" />
                                        <ext:RecordField Name="MasterDesc" />
                                    </Fields>
                                </ext:JsonReader>
                            </Reader>
                        </ext:Store>
                    </Store>
                    <DirectEvents>
                        <Select OnEvent="ComboMaster_Select">
                            <ExtraParams>
                                <ext:Parameter Name="MasterId" Value="record.data['MasterId']" Mode="Raw">
                                </ext:Parameter>
                            </ExtraParams>
                            <EventMask ShowMask="true" />
                        </Select>
                    </DirectEvents>
                </ext:ComboBox>
                <ext:ComboBox runat="server" ID="ComboDetails" DisplayField="DetailsDesc" ValueField="DetailsId"
                    Editable="true" TypeAhead="true" MinChars="2" SelectOnFocus="true" Disabled="true"
                    AllowBlank="false" Width="270">
                    <Store>
                        <ext:Store ID="StoreDetails" AutoLoad="true" runat="server">
                            <SortInfo Field="DetailsDesc" Direction="ASC" />
                            <Reader>
                                <ext:JsonReader>
                                    <Fields>
                                        <ext:RecordField Name="DetailsId" />
                                        <ext:RecordField Name="DetailsDesc" />
                                    </Fields>
                                </ext:JsonReader>
                            </Reader>
                        </ext:Store>
                    </Store>
                </ext:ComboBox>
            </Items>
        </ext:FormPanel>
    </body>
    </html>
    Thanks,

    Vadym
  6. #6
    Please also set up
    Mode="Local"
    for the ComboBox.

    It is Remote by default if the ComboBox is configured with the Store.
  7. #7
    Quote Originally Posted by Daniil View Post
    Please also set up
    Mode="Local"
    for the ComboBox.

    It is Remote by default if the ComboBox is configured with the Store.
    Thanks Daniil, that was it!

    You can close this thread down.

    Vadym

Similar Threads

  1. [CLOSED] Combobox TypeAhead
    By blurken in forum 2.x Premium Help
    Replies: 2
    Last Post: May 18, 2012, 2:46 AM
  2. Replies: 8
    Last Post: Sep 28, 2011, 3:00 PM
  3. Replies: 4
    Last Post: Sep 28, 2011, 9:57 AM
  4. Replies: 7
    Last Post: Jan 06, 2011, 3:54 PM
  5. Event for Databound
    By lazycoder in forum 1.x Help
    Replies: 1
    Last Post: Aug 13, 2009, 10:31 AM

Tags for this Thread

Posting Permissions