View Full Version : the focus() method

7 Nov 2010, 8:55 AM
I'm using Designer to create a window (called winWorkflow), that has a text field (called CmdData), text area and 2 buttons. When the page loads I want the CmdData text field to have focus so the user can start entering data right away without having to click on it.

in the winWorkflow.js file generated by Designer in the initComponent() function, I'm registering the 'show' event on the window and in the handler I'm calling this.CmdData.focus() - however the CmdData text field does not get focus (or rather it seams something else takes it away). But when I call this.CmdData.focus(false, true) so that is uses the 10ms delay, it works.

So here are my questions:

1) why doesn't the call to focus() work without the delay - i.e., what could be causing it to lose focus?

2) am I even doing this the correct way?

I've included all code & the Designer project as an attachment (zip file)

Thanks in advance,
-- Greg

7 Nov 2010, 9:08 AM

7 Nov 2010, 2:55 PM
Window.defaultButton... ah, perfect. Thanks so much!

The config name is a bit of a misnomer though as API docs say...

defaultButton : String/Number/Component
Specifies a Component to receive focus when this Window is focussed. This may be one of:
The index of a footer Button.
The id of a Component.
A Component.

Should be called defaultComponent instead.

I see that the defaultButton config setting is specific to the Window object only... what does one use for other types of containers, such as TabPanels, Panels, Viewports, etc.?

set the defaultButton in the component config property in Designer and here's the generated code...

winWorkflowUi = Ext.extend(Ext.Window, {
title: 'Workflow',
width: 603,
height: 460,
layout: 'absolute',
closable: false,
defaultButton: 'CmdData',
id: 'winWorkflow',
initComponent: function() {
this.items = [
xtype: 'textfield',
x: 10,
y: 10,
width: 570,
name: 'CmdData',
ref: 'CmdData',
id: 'CmdData'

7 Nov 2010, 3:56 PM
Hmm... in my code I have a listener on the text field that listens for the ENTER key and if detected invokes a AJAX request. If the request returns success with a value of false (ie. responseObj.success == false), then I display a Ext.Msg.alert().

Problems is when the user closes the alert, the text field has lost focus. :(

I tried calling the focus() method after the alert, but this didn't work as I believe the alert is asynchronous and executes the focus() method immediately after the alert is displayed instead of waiting for the user to click ok on the alert.

Thought about using a callback function with the alert... but instead I used the activate event on the window to set focus to the text field... see below.

Is this the best way of doing this? :-/

-- Greg

winWorkflow = Ext.extend(winWorkflowUi, {

initComponent: function() {

function sendCommand(winWorkflow) {
var cmdDataVal = winWorkflow.CmdData.getValue();
url: 'workflow.php',
success: function(response, opts) {
var cmdDataVal = winWorkflow.CmdData.getValue();
var responseObj = Ext.decode(response.responseText);

if (!responseObj.success) {

Ext.Msg.alert('AJAX Request', 'Bad rerturn status from server for command data ' + cmdDataVal + ' request.');

// ****
// doesn't work - is called immediately
// after the Ext.Msg.alert() call above
// because its an asynchronous call and
// doesn't wait for the user to dismiss
// the alert
// ****

} else {
//var ouput =

failure: function(response, opts) {
Ext.Msg.alert('AJAX Request', 'Failure. Servier-side failure for get permalink state request with status code ' + response.status);
params: { 'CmdData': cmdDataVal },
CmdOutput: winWorkflow.CmdOutput

// ********
// used the Window activate event to set focus
// back to the text field after the user dismisses
// the alert.
// ********
this.on('activate',function h() {
var resutls = this.CmdData.focus();

this.CmdData.on('specialkey', function(field, event){
if (event.getKey() == event.ENTER) {