PDA

View Full Version : What is the trick to set focus on a form field when changing tabs



blomasky
27 Dec 2013, 10:17 AM
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

scottmartin
27 Dec 2013, 2:51 PM
If you add a little delay, it should help:



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);
});

}

});

blomasky
28 Dec 2013, 5:50 AM
and of course that worked. Thanks