PDA

View Full Version : How to set focus in the form field



naspar
24 May 2010, 10:47 AM
Hi Guys,

is there any way to set the field focus to a specified field when the form is showed ?


i tried this but does not work :



frmContent.on('load', function(){
var name = frmContent.findById('name');
name.focus();
}, this, {
buffer: 20
})


thanks in advance !!

mitchellsimoens
24 May 2010, 11:00 AM
try this and remember to read the API docs first


new Ext.FormPanel({
title : "Simple Form",
width : 350,
defaults : {width: 230},
defaultType : "textfield",
items : [{
fieldLabel : "Name",
id : "name",
name : "name",
allowBlank : false
},{
fieldLabel : "Company",
id : "company",
name : "company"
}, {
fieldLabel : "Email",
id : "email",
name : "email",
vtype : "email"
}],
listeners : {
afterrender : function(form) {
form.getComponent("name").focus();
}
}
});

naspar
24 May 2010, 12:10 PM
hi and thanks for helping .. tried but seems doesn not work!!

here is my code .. :



var frmContent = new Ext.FormPanel({
title: 'TITLE',
id: 'frmContent',
bodyStyle: 'padding:15px;background:transparent',
border: false,
waitMsgTarget: true,
items: [{
xtype: 'textfield',
fieldLabel: 'Variabile',
name: 'name',
id: 'name',
anchor: '95%',
allowBlank: false
}, {
xtype: 'combo',
store: comboStore,
displayField: 'Lingua',
valueField: 'Id',
hiddenName: 'id',
editable: false,
mode: 'remote',
forceSelection: true,
triggerAction: 'all',
fieldLabel: 'Lingua',
emptyText: 'Seleziona una lingua ... ',
selectOnFocus: true,
anchor: '95%'
}, {
xtype: 'textfield',
fieldLabel: 'Valore',
name: 'value',
anchor: '95%'
}],
listeners: {
afterrender : function(form) {
form.getComponent('name').focus();
}
},
buttons: [{
text: 'Inserisci',
iconCls: 'icon-save',
handler: function(){
frmContent.form.submit({
url: 'myurl',
waitMsg: 'Inserimento dati ...',
success: function(form, action){
frmContent.form.reset();
},
failure: function(form, action){
Ext.MessageBox.alert('Errore', 'Problemi durante l\'inserimento');
win.close();
}
});
}
}, {
text: 'Chiudi',
iconCls: 'silk-appgo',
handler: function(){
win.close();
}
}]
});

win = new Ext.Window({
layout: 'form',
autoHeight: true,
width: 400,
closeAction: 'hide',
items: [frmContent]
});
win.show();

naspar
24 May 2010, 12:23 PM
hi and thanks for helping .. tried but seems doesn not work!!

here is my code .. :



var frmContent = new Ext.FormPanel({
title: 'TITLE',
id: 'frmContent',
bodyStyle: 'padding:15px;background:transparent',
border: false,
waitMsgTarget: true,
items: [{
xtype: 'textfield',
fieldLabel: 'Variabile',
name: 'name',
id: 'name',
anchor: '95%',
allowBlank: false
}, {
xtype: 'combo',
store: comboStore,
displayField: 'Lingua',
valueField: 'Id',
hiddenName: 'id',
editable: false,
mode: 'remote',
forceSelection: true,
triggerAction: 'all',
fieldLabel: 'Lingua',
emptyText: 'Seleziona una lingua ... ',
selectOnFocus: true,
anchor: '95%'
}, {
xtype: 'textfield',
fieldLabel: 'Valore',
name: 'value',
anchor: '95%'
}],
listeners: {
afterrender : function(form) {
form.getComponent('name').focus();
}
},
buttons: [{
text: 'Inserisci',
iconCls: 'icon-save',
handler: function(){
frmContent.form.submit({
url: 'myurl',
waitMsg: 'Inserimento dati ...',
success: function(form, action){
frmContent.form.reset();
},
failure: function(form, action){
Ext.MessageBox.alert('Errore', 'Problemi durante l\'inserimento');
win.close();
}
});
}
}, {
text: 'Chiudi',
iconCls: 'silk-appgo',
handler: function(){
win.close();
}
}]
});

win = new Ext.Window({
layout: 'form',
autoHeight: true,
width: 400,
closeAction: 'hide',
items: [frmContent]
});
win.show();

naspar
24 May 2010, 1:00 PM
hi and thanks for helping .. tried but seems doesn not work!!

here is my code .. :



var frmContent = new Ext.FormPanel({
title: 'TITLE',
id: 'frmContent',
bodyStyle: 'padding:15px;background:transparent',
border: false,
waitMsgTarget: true,
items: [{
xtype: 'textfield',
fieldLabel: 'Variabile',
name: 'name',
id: 'name',
anchor: '95%',
allowBlank: false
}, {
xtype: 'combo',
store: comboStore,
displayField: 'Lingua',
valueField: 'Id',
hiddenName: 'id',
editable: false,
mode: 'remote',
forceSelection: true,
triggerAction: 'all',
fieldLabel: 'Lingua',
emptyText: 'Seleziona una lingua ... ',
selectOnFocus: true,
anchor: '95%'
}, {
xtype: 'textfield',
fieldLabel: 'Valore',
name: 'value',
anchor: '95%'
}],
listeners: {
afterrender : function(form) {
form.getComponent('name').focus();
}
},
buttons: [{
text: 'Inserisci',
iconCls: 'icon-save',
handler: function(){
frmContent.form.submit({
url: 'myurl',
waitMsg: 'Inserimento dati ...',
success: function(form, action){
frmContent.form.reset();
},
failure: function(form, action){
Ext.MessageBox.alert('Errore', 'Problemi durante l\'inserimento');
win.close();
}
});
}
}, {
text: 'Chiudi',
iconCls: 'silk-appgo',
handler: function(){
win.close();
}
}]
});

win = new Ext.Window({
layout: 'form',
autoHeight: true,
width: 400,
closeAction: 'hide',
items: [frmContent]
});
win.show();

mitchellsimoens
24 May 2010, 2:32 PM
Little button click happy are ya?

That's because you have it placed in a window and that's going to mess with the focus. If you were to remove the window and add renderTo: Ext.getBody() to the form then it will focus correctly.

To get it to work in a window, you will come into trouble if you use afterrender or show event also as there is a "lag" in the time it takes the window to actually show and when everything is rendered. Luckily, there is a delay option in the focus function. Here is how I got your form to display in a window and have it focus on the first textfield:


new Ext.Window({
autoHeight: true,
width: 400,
closeAction: 'hide',
items: [{
xtype: "form",
title: 'TITLE',
id: 'frmContent',
bodyStyle: 'padding:15px;background:transparent',
border: false,
waitMsgTarget: true,
items: [{
xtype: 'textfield',
fieldLabel: 'Variabile',
name: 'name',
id: 'name',
anchor: '95%',
allowBlank: false
},{
xtype: 'combo',
store: comboStore,
displayField: 'Lingua',
valueField: 'Id',
hiddenName: 'id',
editable: false,
mode: 'remote',
forceSelection: true,
triggerAction: 'all',
fieldLabel: 'Lingua',
emptyText: 'Seleziona una lingua ... ',
selectOnFocus: true,
anchor: '95%'
},{
xtype: 'textfield',
fieldLabel: 'Valore',
name: 'value',
anchor: '95%'
}],
buttons: [{
text: 'Inserisci',
iconCls: 'icon-save',
handler: function(){
frmContent.form.submit({
url: 'myurl',
waitMsg: 'Inserimento dati ...',
success: function(form, action){
frmContent.form.reset();
},
failure: function(form, action){
Ext.MessageBox.alert('Errore', 'Problemi durante l\'inserimento');
win.close();
}
});
}
},{
text: 'Chiudi',
iconCls: 'silk-appgo',
handler: function(){
win.close();
}
}]
}],
listeners: {
show : function(win) {
Ext.getCmp("name").focus("", 1000);
}
}
}).show();

naspar
25 May 2010, 1:16 AM
tried and worked perfectly !! thank you so much
ps .. i had a lot of problem yesterday when i tried to reply to your post .. sorry for posting three times .. cheers