1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    25
    Answers
    2
    Vote Rating
    4
    caleywoods is on a distinguished road

      0  

    Default Unanswered: Combobox focus() issue

    Unanswered: Combobox focus() issue


    I have some code in a button handler that sets the focus to a combobox when clicked. When you click the button it correctly places the cursor inside the combobox which is configured to allow typing in the box.

    When you TAB to the button and hit Enter on the keyboard, focus is set to the trigger of the dropdown and and you cannot type in the combobox since your cursor isn't placed in it. If you TAB to the button and hit space it works just as click does and places your cursor inside the combobox, ready to type.

    I did a console.log on the event that happens when you click and hit Enter and it appears that an event of type "click" is fired when you hit Space or click the button but when you hit Enter it fires an event of type "keydown".

    I tried to create a JSFiddle to illustrate this but every version of ExtJS I've tried on JSFiddle fires the click even for any kind of activation of the button (click mouse, hit Space, hit Enter).

    Has anyone ever see this? I need to allow the user to hit Enter on the keyboard and have the cursor placed within the combobox for typing.

  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Answers
    124
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi,

    try following code:
    Code:
    var form = Ext.create('Ext.form.Panel', {
        title: 'Simple Display',
        autoHeight:true,
        renderTo: Ext.getBody(),
        items:[{
            xtype:"combo",
            store:['abc','xyz']
            , name:'a'
        },
               {
                   xtype:'button'
                   , text:'click'
                   , listeners:{
                       click:{
                           fn:function(btn,e){
                               if(e.ENTER=13){
                               form.getForm().findField("a").focus();                               
                               }  
                           }
                       } 
                   }
               },
              ]
        
    });
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    25
    Answers
    2
    Vote Rating
    4
    caleywoods is on a distinguished road

      0  

    Default


    Quote Originally Posted by sword-it View Post
    Hi,

    try following code:
    Code:
    var form = Ext.create('Ext.form.Panel', {
        title: 'Simple Display',
        autoHeight:true,
        renderTo: Ext.getBody(),
        items:[{
            xtype:"combo",
            store:['abc','xyz']
            , name:'a'
        },
               {
                   xtype:'button'
                   , text:'click'
                   , listeners:{
                       click:{
                           fn:function(btn,e){
                               if(e.ENTER=13){
                               form.getForm().findField("a").focus();                               
                               }  
                           }
                       } 
                   }
               },
              ]
        
    });
    In your code within the click event you're assigning ENTER to the event with value 13. I adjusted it to a comparison and within JSFiddle it works fine. Here is the JSFiddle: http://jsfiddle.net/nFYxu/ I'm not actually sure why it works since if you console.log() the event it has no property called Enter, I'd assume it needs compared to charCode.

    In my code however it doesn't work since the Enter key isn't firing the click event.

    Edit: The click event IS being fired and I am evaluating whether e.getKey() is equal to e.ENTER and it's coming back true. Within the if statement I'm saying to set focus to my element but it doesn't work when you hit the enter key. It logs out "true" and then my console.log('inside ENTER check') but the focus isn't set on my element.

  4. #4
    Sencha User
    Join Date
    Feb 2012
    Posts
    25
    Answers
    2
    Vote Rating
    4
    caleywoods is on a distinguished road

      0  

    Default


    Here is my current button code:
    Code:
    text     : 'Add',
    id       : 'invoice_add_line_button',
    listeners : {
        click : {
            fn: function( btn, evt ) {
                console.log( evt.getKey() === evt.ENTER ); //returns true
                if ( evt.getKey() === evt.ENTER ) {
                    console.log( 'inside Enter if' );
                    //this.onCreate();
                    //focus to form element
                }
            }
        }
    }
    What happens is you TAB to the button and hit Enter on the keyboard and you see this in the console:

    true
    inside Enter if

    but the focus is not set to the element.

  5. #5
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,114
    Answers
    83
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    Strange in Chrome it works fine, when I tried Ie the first time it was broke. After ctrl-r it worked.

  6. #6
    Sencha User
    Join Date
    Feb 2012
    Posts
    25
    Answers
    2
    Vote Rating
    4
    caleywoods is on a distinguished road

      0  

    Default


    I'm testing it in Chrome Canary. I'll give Chrome Stable a try.

  7. #7
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,114
    Answers
    83
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    IE worked after that ctrl-r. Can be a fiddler thing

  8. #8
    Sencha User
    Join Date
    Feb 2012
    Posts
    25
    Answers
    2
    Vote Rating
    4
    caleywoods is on a distinguished road

      0  

    Default


    In my code when you hit enter it sets focus to the element but it focuses on the drop down arrow and doesn't place the cursor within the combobox.

Thread Participants: 2

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."