1. #1
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Connecticut
    Posts
    669
    Answers
    8
    Vote Rating
    83
    blomasky is just really nice blomasky is just really nice blomasky is just really nice blomasky is just really nice blomasky is just really nice

      0  

    Default Answered: What is the trick to set focus on a form field when changing tabs

    Answered: What is the trick to set focus on a form field when changing tabs


    I have a tab panel. When I click on a new tab panel, I want the cursor to go to a particular form field on that tab. (I want to set focus). This works fine when programatically changing the tabs, however, if the user clicks on a tab panel, the tab itself stays in focus.

    My logic is on the tabChange event. and I have the following code:

    Ext.ComponentQuery.query('#myfield').focus(true, true);

    Any suggestions please?

    Bruce

  2. If you add a little delay, it should help:

    Code:
    Ext.define('MyApp.view.Test', {
        extend: 'Ext.form.Panel',
        xtype: 'my-form',
    
        layout: 'vbox',
    
        initComponent: function() {
            this.items = [{
                xtype: 'textfield',
                fieldLabel: 'Field',
                itemId: 'my-field'
            }];
    
            this.callParent();
        }
    });
    
    Ext.application({
        name: 'Fiddle',
    
        launch: function() {
    
            var tabPanel = Ext.createWidget('tabpanel', {
                itemId: 'mytabpanel',
                renderTo: Ext.getBody(),
                enableTabScroll: true,
    
                width: 600,
                height: 250,
                items: []
            });
    
            Ext.create('Ext.Button', {
                text: 'Click me',
                renderTo: Ext.getBody(),
                handler: function() {
                    var id = tabPanel.items.length;
    
                    tabPanel.add({
                        title: 'text-' + id,
                        itemId: 'id-' + id,
    
                        layout: 'fit',
                        closeAction: 'close',
                        closable: true,
                        border: false,
                        items: [{
                            xtype: 'my-form',
                            title: 'my-form ' + id
                        }]
                    });
                }
            });
    
            tabPanel.on('tabchange',function(tabPanel, newCard, oldCard){
                var fld = newCard.down('#my-field');
                // allow some time
                setTimeout(function(){
                    fld.focus(true,true);
                },10);
            });
    
        }
    
    });

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,111
    Answers
    678
    Vote Rating
    470
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      1  

    Default


    If you add a little delay, it should help:

    Code:
    Ext.define('MyApp.view.Test', {
        extend: 'Ext.form.Panel',
        xtype: 'my-form',
    
        layout: 'vbox',
    
        initComponent: function() {
            this.items = [{
                xtype: 'textfield',
                fieldLabel: 'Field',
                itemId: 'my-field'
            }];
    
            this.callParent();
        }
    });
    
    Ext.application({
        name: 'Fiddle',
    
        launch: function() {
    
            var tabPanel = Ext.createWidget('tabpanel', {
                itemId: 'mytabpanel',
                renderTo: Ext.getBody(),
                enableTabScroll: true,
    
                width: 600,
                height: 250,
                items: []
            });
    
            Ext.create('Ext.Button', {
                text: 'Click me',
                renderTo: Ext.getBody(),
                handler: function() {
                    var id = tabPanel.items.length;
    
                    tabPanel.add({
                        title: 'text-' + id,
                        itemId: 'id-' + id,
    
                        layout: 'fit',
                        closeAction: 'close',
                        closable: true,
                        border: false,
                        items: [{
                            xtype: 'my-form',
                            title: 'my-form ' + id
                        }]
                    });
                }
            });
    
            tabPanel.on('tabchange',function(tabPanel, newCard, oldCard){
                var fld = newCard.down('#my-field');
                // allow some time
                setTimeout(function(){
                    fld.focus(true,true);
                },10);
            });
    
        }
    
    });

  4. #3
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Connecticut
    Posts
    669
    Answers
    8
    Vote Rating
    83
    blomasky is just really nice blomasky is just really nice blomasky is just really nice blomasky is just really nice blomasky is just really nice

      1  

    Default


    and of course that worked. Thanks

Thread Participants: 1