[CLOSED] [1.0] Focus on combo box

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] [1.0] Focus on combo box

    How can i give focus to a combo box and keep it collapsed? I have tried calling collapse after .focus, but the drop down still remains expanded.
    Last edited by geoffrey.mcgill; Jan 18, 2012 at 6:38 PM.
  2. #2
    Hi betamax,

    In my test calling .focus() does not expand the ComboBox. The Field is focused correctly and the dropdownlist is not expanded.
    Geoffrey McGill
    Founder
  3. #3
    Here's a sample to test with.

    Example

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!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:ComboBox ID="ComboBox1" runat="server">
                <Items>
                    <ext:ListItem Text="Item1" />
                    <ext:ListItem Text="Item2" />
                    <ext:ListItem Text="Item3" />
                </Items>
            </ext:ComboBox>
    
            <ext:Button runat="server" Text="Focus" OnClientClick="ComboBox1.focus();" />
        </form>
    </body>
    </html>
    Hope this helps.
    Geoffrey McGill
    Founder
  4. #4
    How about this:

    <%@ Page Language="C#" %>
     <script runat="server">
         protected void Page_Load(object sender, EventArgs e)
         {
             this.Store1.DataSource = new object[]
            {
                new object[] { 1,"France"},
                new object[] { 2, "Canada"},
                new object[] { 3, "Germany"},
                new object[] { 4, "United States"},
                new object[] { 5, "Italy"}
            };
    
             this.Store1.DataBind();
         }
         </script>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <!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>Ext.NET Example</title>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="Id" />
                            <ext:RecordField Name="Name" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>            
                <Listeners>
                <Load HAndler= "console.log('store loading ...')" />
                </Listeners>
             </ext:Store>
            <ext:ComboBox ID="ComboBox1" runat="server" StoreID="Store1" ValueField="Id" DisplayField="Name" Editable="true">
            </ext:ComboBox>
     
            <ext:Button ID="Button1" runat="server" Text="ReloadAndFocus" OnClientClick="Store1.reload();ComboBox1.focus();" />
        </form>
    </body>
    </html>

    Does this look OK to you?


    How to fix this (if we exclude the store load event handler that will collapse the combo after a delay)?
  5. #5
    Hi @deejayns,

    As @Geoffrey said, the focus function should not expand a ComboBox.

    I would suggest to call the ComboBox's onTriggerClick function to expand it.

    Also I can't see any reason to call reload for a Store in your case. Though it might be just an example, I understand.

    Finally, here is the example how I would achieve that.

    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.DataBind(this.ComboBox1.GetStore());
            }
        }
    
        protected void Store_RefreshData(object sender, StoreRefreshDataEventArgs e)
        {
            this.DataBind(sender as Store);
        }
        
        private void DataBind(Store store) 
        {
            store.DataSource = new object[]
            {
                new object[] { 1,"France"},
                new object[] { 2, "Canada"},
                new object[] { 3, "Germany"},
                new object[] { 4, "United States"},
                new object[] { 5, "Italy"}
            };
    
            store.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>
    
        <script type="text/javascript">
            var reloadAndExpand= function (combo) {
                var store = combo.getStore();
                store.on("load", function () {
                    combo.onTriggerClick();
                },
                null,
                {
                    single : true
                });
                store.reload();
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <ext:ComboBox 
                ID="ComboBox1" 
                runat="server" 
                ValueField="Id" 
                DisplayField="Name"
                Editable="true"
                Mode="Local">
                <Store>
                    <ext:Store runat="server" OnRefreshData="Store_RefreshData">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="Id" />
                                    <ext:RecordField Name="Name" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
            </ext:ComboBox>
            <ext:Button 
                runat="server" 
                Text="Reload and expand" 
                OnClientClick="reloadAndExpand(ComboBox1);" />
        </form>
    </body>
    </html>
  6. #6
    Yeah the code does not look logical but this was just a try to reproduce an issue (on small example) that I have with Gridpanel's BufferView and a filtering combo that remains expanded after the filtering value picked.

    So after user picks a value, store is reloaded and combo is expanded again for no reason.
  7. #7
    Seems I've not got the problem and even don't understand my example did help or did not.

    Please clarify does my example work as expected for you?
  8. #8
    Quote Originally Posted by Daniil View Post
    Seems I've not got the problem and even don't understand my example did help or did not.

    Please clarify does my example work as expected for you?

    Basically it didn't help me a lot,
    I have a situation where combobox remains expanded when it should not be (something triggers store reload and combo expand - extjs probably), but since I cannot create a similar situation on a demonstration example you can forget about.

    Yes, your example works as expected.
  9. #9
    Quote Originally Posted by deejayns View Post
    I have a situation where combobox remains expanded when it should not be (something triggers store reload and combo expand - extjs probably), but since I cannot create a similar situation on a demonstration example you can forget about.
    You could post a ComboBox's and, probably, grid's configuration for the beginning. We might get some idea what might be wrong.

    But, please post a new thread since it's not related to the current thread.
  10. #10
    The problem I have sounds like this one:


    http://www.sencha.com/forum/showthre...r-store-reload


    , although I don't see 'hasFocus' among the properties just like you did not in:

    http://forums.ext.net/showthread.php...tbox-has-focus

    Not quite sure how, but it looks like this worked for them!? :
    var hasFocus = combo.hasFocus;
    combo.hasFocus = null;
    combo.store.load({
      callback: function(){
        if(combo.hasFocus === null){
          combo.hasFocus = hasFocus;
        }
      }
    });
    Anyway is there an Ext.Net way to set up store load CALLBACK function - not a HANDLER or maybe a HANDLER with an delay should be that?
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 5
    Last Post: Sep 08, 2011, 5:57 AM
  2. Replies: 6
    Last Post: Aug 25, 2011, 2:13 PM
  3. combo box how to lose focus
    By norphos in forum 1.x Help
    Replies: 1
    Last Post: Jun 13, 2011, 2:50 PM
  4. Replies: 3
    Last Post: May 11, 2010, 10:36 AM
  5. Replies: 4
    Last Post: Sep 18, 2009, 9:49 AM

Posting Permissions