PDA

View Full Version : Best event to autofocus the a field on a formpanel



siebe vos
1 Oct 2010, 8:39 AM
What is the best listener event to set the focus to a specific field on a form? Now I use the 'show' event and see the cursor placed into the field, but 1 second later the cursur disappears again. Or is there a better way to focus a field?

I have the same question for autofocussing a editorgrid cell (first row). On the editorgridpanel I also use the 'show' event to set the focus on a cell by grid.getView().focusCell(r,c). But here I get an error in firebug within ext-all-debug.js that this.mainbody is undefined.

Thanks!

laurentParis
1 Oct 2010, 5:26 PM
yourFormPanel.on('afterlayout', function(){
Ext.getCmp('FieldIdToFocus').focus();
}, null, {single: true});

siebe vos
2 Oct 2010, 1:00 PM
Hi Laurent

Thanks for your update. Indeed the afterlayout is coming after the show event, but for the form the cursor is still shown and disappears again after less then a second. For the editorgridpanel I changed the statement into this.startEditing(r,c) and indeed the afterlayout did make a change. Now I get an error "this.getRow(row) is undefined". This message looks like a timing problem because when I switch again between the formpanel and the editorgridpanel (both items of a tabpanel, which is on itself is a Window item) both fieldfocus work (on the form too): the cursor is placed in the selected field (on the formpanel) or in the selected cell (on the editorgridpanel). For the editorgridpanel during debugging the grid is not build up yet, so that might be the cause of the this.getRow(row) is undefined error. I tried the refresh event on the gridview within the extension class of the editorgridpanel, but the event is not fired (probably because I didn't code it correctly or it is not possible to receive any gridview events within the editorgridpanel extension class):


this.getView().addListener('refresh', this.onRefreshView, this);

I must be doing something wrong but I don't know what. I hope you or someone else can help me out.

Thanks again!

plalx
2 Oct 2010, 1:31 PM
Use the viewready event of the grid to interact with a row rendered by the grid view.

viewready : ( Grid this )
Fires when the grid view is available (use this for selecting a default row).

And for focusing on a field, I tried with the afterlayout event of the FormPanel and it works for me, but try to delay the focusing.

E.g.


listeners: {
'afterlayout': {
fn: function() {
this.items.itemAt(0).focus();
},
delay: 1000, //1sec
single: true
}
}

plalx
2 Oct 2010, 1:40 PM
Use the viewready event of the grid to interact with a row rendered by the grid view.

viewready : ( Grid this )
Fires when the grid view is available (use this for selecting a default row).

siebe vos
4 Oct 2010, 2:03 AM
Thanks for your support, both the editorgridpanel and the formpanel focus work. I set the delay to 800 ms for the form.

Animal
4 Oct 2010, 2:08 AM
Hi Laurent

Thanks for your update. Indeed the afterlayout is coming after the show event, but for the form the cursor is still shown and disappears again after less then a second.

Is this inside an Ext.Window?

darthwes
4 Oct 2010, 9:21 AM
Stealing Animal's thunder here (he always answers these),
defaultButton (http://dev.sencha.com/deploy/dev/docs/?class=Ext.Window&member=defaultButton) ?

siebe vos
4 Oct 2010, 10:07 AM
Indeed the defaultButton would be perfect, but I don't see a setter method. The field I need to focus on can be disabled (field authorization), so I can't set it hard in the code. I created several components and one function determines on which field (form) or column(editorpanel) to set the focus on when clicked on their tabpanels.

plalx
4 Oct 2010, 11:46 AM
It is not a documented property, but as far as I can see in the code, it will work if you just set the defaultButton property of the window on the fly.



myWindow.defaultButton = myComponent;


* This property should be called something else... pretty ugly to set the defaultButton property to a component which is not a button at all...