PDA

View Full Version : 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 (http://forums.ext.net/showthread.php?61176)
- Forum Guidelines For Posting New Topics (http://forums.ext.net/showthread.php?3440)
- More information required (http://forums.ext.net/showthread.php?10205)

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