Set auto focus on next button

Question

I have wizard in extjs, where I place next, back and cancel button. As per requirement I need to set focus on next button automatically. How to do it.

buildButtons : function() {
    return [
    {
        text:'Back',
        id:'backBtn',
        hidden:true,
        autoHeight:true,
        action: 'Back'
    },
    {
        text:'Next',
        id:'nextBtn',
        autoHeight:true,
        hidden:false,
        action: 'Next'
    },
    {
        text:'Finish',
        id:'finishBtn',
        autoHeight:true,
        hidden:false,  // Comments below line if you want finished button on each panel.
        //hidden:true,
        action: 'Finish'
    },
    {
        text:'Cancel',
        id:'cancelBtn',
        autoHeight:true,
        hidden:false,
        action: 'Cancel'
    }
    ];

}

Answer 1

Assuming you are talking about the latest version (4.1.1)

Get the button reference and call focus

You should do this with the afterrender event of either the button itself or the component that hold the button.

Example that can be executed directly in one of the API code-boxes

Ext.create('Ext.Container', {
    renderTo: Ext.getBody(),
    defaults: {
        xtype: 'button'   
    },
    items   : [
        {
            text: 'Next',
            action: 'next'
        },
        {
            text: 'Prev',
            action: 'prev'
        },
        {
            text: 'Cancel',
            action: 'cancel'
        }
    ],
    listeners: {
        afterrender: function(b) {
            b.down('button[action=next]').focus(false, 100);  
        }
    }
});

Edit to answer to the comment:

Based on the given information I suggest you are using the buttons config property to place your buttons. In your case I would recommend you to use the dockedItems array instead of the convenience buttons array. Try the following:

dockedItems: [{
    xtype: 'toolbar',
    dock: 'bottom',
    ui: 'footer',
    defaults: {minWidth: minButtonWidth},
    items: [
        {
            text:'Back',
            id:'backBtn',
            hidden:true,
            autoHeight:true,
            action: 'Back'
        },
        {
            text:'Next',
            id:'nextBtn',
            autoHeight:true,
            hidden:false,
            action: 'Next'
        },
        {
            text:'Finish',
            id:'finishBtn',
            autoHeight:true,
            hidden:false,  // Comments below line if you want finished button on each panel.
            //hidden:true,
            action: 'Finish'
        },
        {
            text:'Cancel',
            id:'cancelBtn',
            autoHeight:true,
            hidden:false,
            action: 'Cancel'
        }
    ],
    listeners: {
        afterrender: function(b) {
            b.down('button[action=Next]').focus(false, 100);  
        }
    }
}]