[CLOSED] TypeAhead databound combobox

Hi,

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

Thanks,

Vadym

Hi,

Please clarify the requirement. I don't understand well.

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

Well, you just need to set up

Code:

---

TypeAhead="true"

---

And, probably,

Code:

---

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

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.

Code:

---

<%@ 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

Please also set up

Code:

---

Mode="Local"

---

for the ComboBox.

It is Remote by default if the ComboBox is configured with the Store.

Quote:

---

Originally Posted by Daniil

Please also set up

Code:

---

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