How to disable combobox popup when typing

**rickywu** · Jun 12, 2016, 9:16 AM

I want to disable popup menus when typing, because the result is empty when typing search string

also want to enable to show popup menu after called direct method

I tried disable listener and other ways but not work.

                        <ext:ComboBox  
                            ID="SearchBox" 
                            runat="server" 
                            DisplayField="Title"
                            ValueField="ID"
                            FieldLabel="Search WorkItem"
                            AllowBlank="true"
                            AutoLoad="false"
                            PageSize="10"
                            >
                            <Store>
                                <ext:Store ID="SearchStore" runat="server" IsPagingStore="true" PageSize="10" >
                                    <Model>
                                        <ext:Model runat="server">
                                            <Fields>
                                                <ext:ModelField Name="ID" />
                                                <ext:ModelField Name="Title" />
                                                <ext:ModelField Name="Type" />
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                </ext:Store>
                            </Store>
                            <ListConfig Width="500" Height="300" ItemSelector=".x-boundlist-item">
                                <Tpl runat="server">
                                    <Html>
                                        <tpl for=".">
                                            <tpl if="[xindex] == 1">
                                                <table class="cbStates-list">
                                                    <tr>
                                                        <th>ID</th>
                                                        <th>Title</th>
                                                        <th>Type</th>
                                                    </tr>
                                            </tpl>
                                            <tr class="x-boundlist-item">
                                                <td>{ID}</td>
                                                <td>{Title}</td>
                                                <td>{Type}</td>
                                            </tr>
                                            <tpl if="[xcount-xindex]==0">
                                                </table>
                                            </tpl>
                                        </tpl>
                                    </html>                </Tpl>
                            </ListConfig>
                            <Triggers>
                                <ext:FieldTrigger Icon="Clear" Hidden="true" />
                            </Triggers>
                            <Listeners>
                                <BeforeQuery Handler="this.getTrigger(0)[this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
                                <TriggerClick Handler="if (index == 0) {
                                                           this.focus().clearValue();
                                                           trigger.hide();
                                                       }" />
                                <Select Handler="this.getTrigger(0).show();" />
                                <Disable Handler="this.collapse();"/>
                            </Listeners>
                            <RightButtons>
                                <ext:Button ID="ButtonSearch" runat="server" Icon="Zoom" Handler="function () {#{DirectMethods}.SearchWorkItem();}" />
                            </RightButtons>
                        </ext:ComboBox >

**fabricio.murta** · Jun 16, 2016, 5:03 AM

Hello @rickywu!

We would need a runnable example in order to be able to try and help you with your combo box issue. Think you can come up with one?

If in doubt on how to come up with a simple runnable example, please refer to these posts:
- Tips for creating simplified code samples
- Forum Guidelines For Posting New Topics
- More information required

Hope to hear back from you soon! And sorry for the delay replying your question!

**rickywu** · Jun 23, 2016, 2:20 PM

Try the sample bellow, I want it runs like this:

When I typing text nothing happened, when type finished press Enter or click zoom icon, it calls searchworkitem direct method and return result, also pop up result list be to selected, all things work ok but except the list pop up automatically when I typing, I just want to disable this feature.

<%@ Page Language="C#" %>

<%@ Import Namespace="System" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Xml" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Import Namespace="System.Linq" %>
<%@ Import Namespace="System.Net" %>

<script runat="server">

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
        }
    }

    [DirectMethod(ShowMask = true)]
    public void SearchWorkItem()
    {
        SearchStore.DataSource = new object[]
        {
            new object[] { "100", "Prod1", "Alabama", "The Heart of Dixie" },
            new object[] { "101", "Prod2", "Alaska", "The Land of the Midnight Sun" },
            new object[] { "102", "Prod3", "Arizona", "The Grand Canyon State" }
        };
    }

</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <meta http-equiv="X-UA-Compatible" content="IE=100" />
    <script>

    </script>

</head>
<body>
<form runat="server">
    <ext:ResourceManager runat="server" DirectMethodNamespace="MyCompany" >
    </ext:ResourceManager>

                                    <ext:Panel 
                                        runat="server" 
                                        Border="false" 
                                        Layout="Form" 
                                        ColumnWidth="1"
                                        LabelAlign="Top"
                                        >
                                        <Defaults>
                                            <ext:Parameter Name="MsgTarget" Value="side" />
                                        </Defaults>
                                        <Items>
                                    <ext:ComboBox
                                        ID="SearchBox"
                                        runat="server"
                                        DisplayField="Title"
                                        ValueField="ID"
                                        FieldLabel="Serch WorkItem"
                                        AllowBlank="true"
                                        AutoLoad="false"
                                        PageSize="10"
                                        EmptyText="Input text and press ENTER to search"
                                        >
                                        <Store>
                                            <ext:Store ID="SearchStore" runat="server" IsPagingStore="true" PageSize="10" >
                                                <Model>
                                                    <ext:Model runat="server">
                                                        <Fields>
                                                            <ext:ModelField Name="ID" />
                                                            <ext:ModelField Name="Info" />
                                                            <ext:ModelField Name="AssignedTo" />
                                                            <ext:ModelField Name="Title" />
                                                        </Fields>
                                                    </ext:Model>
                                                </Model>
                                            </ext:Store>
                                        </Store>
                                        <ListConfig Width="600" Height="300" ItemSelector=".x-boundlist-item">
                                            <Tpl runat="server">
                                                <Html>
                                                    <tpl for=".">
                                                        <tpl if="[xindex] == 1">
                                                            <table class="cbStates-list">
                                                                <tr>
                                                                    <th>ID</th>
                                                                    <th>WorkItem</th>
                                                                    <th>AssignedTo</th>
                                                                    <th>Title</th>
                                                                </tr>
                                                        </tpl>
                                                        <tr class="x-boundlist-item">
                                                            <td>{ID}</td>
                                                            <td>{Info}</td>
                                                            <td>{AssignedTo}</td>
                                                            <td>{Title}</td>
                                                        </tr>
                                                        <tpl if="[xcount-xindex]==0">
                                                            </table>
                                                        </tpl>
                                                    </tpl>
                                                </html>                </Tpl>
                                        </ListConfig>
                                        <Triggers>
                                            <ext:FieldTrigger Icon="Clear" Hidden="true" />
                                        </Triggers>
                                        <Listeners>
                                            <BeforeQuery Handler="this.getTrigger(0)[this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
                                            <TriggerClick Handler="if (index == 0) {
                                                                       this.focus().clearValue();
                                                                       trigger.hide();
                                                                   }" />
                                            <Select Handler="this.getTrigger(0).show();" />
                                        </Listeners>
                                        <RightButtons>
                                            <ext:Button ID="ButtonSearch" runat="server" Icon="Zoom" Handler="function () {#{DirectMethods}.SearchWorkItem();}" />
                                        </RightButtons>
                                    </ext:ComboBox >
                                </Items>
                                <KeyMap runat="server">
                                    <Binding>
                                    <ext:KeyBinding Handler="function () {#{DirectMethods}.SearchWorkItem();}">
                                            <Keys>
                                                <ext:Key Code="ENTER" />
                                            </Keys>
                                        </ext:KeyBinding>
                                    </Binding>
                                </KeyMap>
                                </ext:Panel>

    </form>
</body>
</html>

**fabricio.murta** · Jun 23, 2016, 9:38 PM

Hello @rickywu!

I couldn't get your example to return any results in the search, but here's a couple things that might just be "it":

- use a very long 'MinLength' parameter in the ComboBox MinChars="9999"
- use a very large 'QueryDelay', likewise QueryDelay="100000" for 100 seconds query delay (time after the user stops typing)

You may instead just set a higher query delay, for example 2000 or 5000 (for 2 and 5 secs with no typing, respectively), to have a nice auto-search feature.

Well, hope that helps... If not, please review your example so there are text entries that actually return something in the combo box list of options!

**rickywu** · Jun 24, 2016, 1:22 AM

QueryDelay works fine, thanks

Thread: How to disable combobox popup when typing

Thread Tools

Search Thread

Display

How to disable combobox popup when typing

Similar Threads

[CLOSED] MultiCombo with typing

[CLOSED] How to disable typing on a DateField

Synchronize the height of a combobox-Popup

[CLOSED] Close ComboBox popup in javascript? And some other ComboBox questions

[CLOSED] Problem when typing the ESC key twice

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: How to disable combobox popup when typing

How to disable combobox popup when typing

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us