[CLOSED] Weird ComboBox behaviour - does not "collapse" dropdown on blur the first time, but the second time is OK

On this forum I have posted a lot it seems, and some of that touches on the behaviour of the ComboBox.

So in this case I have two comboboxes with a store, and when focusing on the ComboBox it opens the dropdown. I then choose an item using ENTER and when I press ENTER i want to be taken to another control and for the combobox to collapse.

A few problems:
- The first ComboBox does send focus to the next control (the "ComboBox_Second", see code below) but it does not close/collapse its dropdown the first time I do it. If I then go back to the first ComboBox and do the same thing again, it collapses the dropdown as expected

- The second ComboBox collapses the dropdown when I press ENTER, but it does not ship me to the next control (the DateField). So the code to change Focus to the "DateField_date" does not work, but if I send it to another control it works.

Code:

<ext:ComboBox ID="ComboBox_First " runat="server" AutoWidth="true" EmptyText="First ComboBox" DisplayField="Name" ForceSelection="false" ValueField="Id" StoreID="Store_Stuff"> <Listeners> <Focus Handler="this.onTriggerClick();" Delay="1" /> <Select Handler="if (this.getValue() > 0) { #{ComboBox_Second}.focus(); this.collapse(); }" /> <AfterRender Handler="this.keyNav.tab = function(){this.collapse(); return true;};" /> </Listeners> </ext:ComboBox> <ext:ComboBox ID="ComboBox_Second" runat="server" AutoWidth="true" EmptyText="Second combobox" ForceSelection="false" DisplayField="Name" ValueField="Id" StoreID="Store_Stuff"> <Listeners> <Focus Handler="this.onTriggerClick();" Delay="1" /> <Select Handler="if (this.getValue() > 0) { #{DateField_date}.focus(); this.collapse(); }" /> <AfterRender Handler="this.keyNav.tab = function(){this.collapse(); return true;};" /> </Listeners> </ext:ComboBox> <ext:DateField ID="DateField_date" runat="server" AutoWidth="true" EmptyText="Date" Icon="Date" FieldLabel="Datum"> <Listeners> <Blur Fn="checkDateField" /> </Listeners> </ext:DateField>

I cant figure out why. can you? =)

Hi,

To fix the second problem

Quote:

- The second ComboBox collapses the dropdown when I press ENTER, but it does not ship me to the next control (the DateField). So the code to change Focus to the "DateField_date" does not work, but if I send it to another control it works.

please replace

Code:

#{DateField_date}.focus();

with

Code:

#{DateField_date}.focus(false, 1);

Regarding the first problem

Quote:

- The first ComboBox does send focus to the next control (the "ComboBox_Second", see code below) but it does not close/collapse its dropdown the first time I do it. If I then go back to the first ComboBox and do the same thing again, it collapses the dropdown as expected

It's weird for me too. For now, I don't know why the sample below has the behavior you described. I will investigate further.
Example

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.Store1.DataSource = new object[] { new object[] { 1, "item1" }, new object[] { 2, "item2" }, new object[] { 3, "item3" } }; this.Store1.DataBind(); } } </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 runat="server"> <title>Ext.Net Example</title> </head> <body> <form runat="server"> <ext:ResourceManager runat="server" /> <ext:Store ID="Store1" runat="server"> <Reader> <ext:ArrayReader> <Fields> <ext:RecordField Name="value" /> <ext:RecordField Name="text" /> </Fields> </ext:ArrayReader> </Reader> </ext:Store> <ext:ComboBox ID="ComboBox1" runat="server" StoreID="Store1" ForceSelection="false"> <Listeners> <Focus Handler="this.onTriggerClick();" Delay="100" /> <Select Handler="#{ComboBox2}.focus(false, 100);" /> </Listeners> </ext:ComboBox> <ext:ComboBox ID="ComboBox2" runat="server" StoreID="Store1" ForceSelection="false"> <Listeners> <Focus Handler="this.onTriggerClick();" Delay="1" /> </Listeners> </ext:ComboBox> </form> </body> </html>

Vladimir suggested me to use .triggerBlur() method.

The following example works fine.

Example

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.Store1.DataSource = new object[] { new object[] { 1, "item1" }, new object[] { 2, "item2" }, new object[] { 3, "item3" } }; this.Store1.DataBind(); } } </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 runat="server"> <title>Ext.Net Example</title> </head> <body> <form runat="server"> <ext:ResourceManager runat="server" /> <ext:Store ID="Store1" runat="server"> <Reader> <ext:ArrayReader> <Fields> <ext:RecordField Name="value" /> <ext:RecordField Name="text" /> </Fields> </ext:ArrayReader> </Reader> </ext:Store> <ext:ComboBox ID="ComboBox1" runat="server" StoreID="Store1" ForceSelection="false"> <Listeners> <Focus Handler="this.onTriggerClick();" Delay="1" /> <Select Handler="this.triggerBlur(); #{ComboBox2}.focus();" Delay="10" /> </Listeners> </ext:ComboBox> <ext:ComboBox ID="ComboBox2" runat="server" StoreID="Store1" ForceSelection="false"> <Listeners> <Focus Handler="this.onTriggerClick();" Delay="1" /> <Select Handler="this.triggerBlur(); #{DateField1}.focus();" Delay="10" /> </Listeners> </ext:ComboBox> <ext:DateField ID="DateField1" runat="server" /> </form> </body> </html>

Thanks a bunch, that worked a lot better!

Without you and this forum, it would be pretty hard to get to these solutions! Thx!

Hi,
I am having the same problem....

Code:

<Listeners > <Focus Handler="#{drpSupplier}.onTriggerClick();" Delay="1" /> <Select handler ="#{Store1}.reload();#{drpSupplier}.triggerBlur();#{GridItems}.focus(false, 1);#{GridItems}.getSelectionModel().selectFirstRow();#{GridItems}.getView().focusRow(0);" /> </Listeners>

While I am using this #{drpSupplier}.triggerBlur();

the page gets closed....what can i do?

Hi @Anburaja,

Please clarify what Ext.NET version do you use? Also please provide a full sample to reproduce the problem.