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

  1. #1

    [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.

    <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? =)
    Last edited by Daniil; Apr 22, 2011 at 6:09 PM. Reason: [CLOSED]
  2. #2
    Hi,

    To fix the second problem
    - 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
    #{DateField_date}.focus();
    with
    #{DateField_date}.focus(false, 1);
    Regarding the first problem
    - 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
    <%@ 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>
  3. #3
    Vladimir suggested me to use .triggerBlur() method.

    The following example works fine.

    Example
    <%@ 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>
  4. #4
    Thanks a bunch, that worked a lot better!

    Without you and this forum, it would be pretty hard to get to these solutions! Thx!
  5. #5
    Hi,
    I am having the same problem....

     <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?
  6. #6
    Hi @Anburaja,

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

Similar Threads

  1. Replies: 5
    Last Post: May 02, 2012, 6:37 PM
  2. Replies: 6
    Last Post: Jan 28, 2012, 2:14 AM
  3. Replies: 4
    Last Post: Oct 11, 2011, 3:42 AM
  4. Replies: 2
    Last Post: May 14, 2011, 7:29 PM
  5. Replies: 13
    Last Post: Mar 31, 2011, 2:38 PM

Tags for this Thread

Posting Permissions