How to set focus after render

[Ex_Soft]

How to set focus after render


Ext.Loader.setConfig({
enabled: true,
disableCaching: false
});

Ext.define("TestText", {
extend: "Ext.form.field.Text",
alias: "widget.testtext",

initComponent: function() {
this.callParent(arguments);
},

afterRender: function(component, eOpts) {
this.callParent(arguments);
// component.focus(true); doesn't work
}
});

Ext.define("TestForm", {
extend: "Ext.form.Panel",
alias: "widget.testform",

initComponent: function() {
this.testText = Ext.create("TestText",{
value: "blah-blah-blah"
});

this.items = [this.testText];

this.callParent(arguments);
},

afterRender: function(component, eOpts) {
this.callParent(arguments);
this.testText.focus(true); // is set, but lost
}
});

Ext.define("TestWindow", {
extend: "Ext.window.Window",
alias: "widget.testwindow",

initComponent: function() {
this.items = [{
xtype: "testform"
}];

this.callParent(arguments);
}
});

Ext.onReady(function() {
Ext.QuickTips.init();

var
f = Ext.create("TestForm"),
w = Ext.create("TestWindow", {
title: "Test",
height: 300,
width: 300,
items: [f]
});

w.show();
});

[scottmartin]

I would recommend the following:



Ext.define('MyPanel', {
extend: 'Ext.form.Panel',
alias: 'widget.mypanel',

initComponent: function() {
this.callParent(arguments);
}
});

Ext.onReady(function() {

Ext.create('MyPanel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,

itemId: 'mypanel',

layout: 'anchor',
defaults: {
anchor: '100%'
},

// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
itemId: 'firstname'},
{
fieldLabel: 'Last Name',
name: 'last'}],

renderTo: Ext.getBody(),

listeners: {
afterlayout: function(form) { // ready
form.down('#firstname').focus(true);
}
}

});

});​


Scott.

[Ex_Soft]

listeners: {
afterlayout:
}


I'm trying


Ext.define("TestForm", {
extend: "Ext.form.Panel",
alias: "widget.testform",

initComponent: function() {
this.testText = Ext.create("TestText",{
value: "blah-blah-blah"
});

this.items = [this.testText];
this.addListener("afterlayout", this.afterLayout, this);
this.callParent(arguments);
},

afterComponentLayout: function(width, height, isSetSize, layoutOwner) {
this.callParent(arguments);
//this.testText.focus(true); //doesn't work
},

afterLayout: function(form, layout, eOpts) {
//this.testText.focus(true); //doesn't work
}
});

Problem still exists.

[scottmartin]

As mentioned, try moving it to the create instead of the define.

Scott.

[Ex_Soft]

try moving it to the create instead of the define


Ext.define("TestText", {
extend: "Ext.form.field.Text",
alias: "widget.testtext",

initComponent: function() {
this.callParent(arguments);
}
});

Ext.define("TestForm", {
extend: "Ext.form.Panel",
alias: "widget.testform",

initComponent: function() {
this.testText = Ext.create("TestText",{
value: "blah-blah-blah"
});

this.items = [this.testText];

this.callParent(arguments);
}
});

Ext.define("TestWindow", {
extend: "Ext.window.Window",
alias: "widget.testwindow",

initComponent: function() {
this.callParent(arguments);
}
});

Ext.onReady(function() {
Ext.QuickTips.init();

Ext.create("TestWindow", {
title: "Test",
items: [Ext.create("TestForm",{
listeners: {
afterlayout: function(form, layout, eOpts) {
form.testText.focus(true);
}
}
})]
}).show();
});

doesn't work

[Ex_Soft]

I'm trying 4.1/4.1.1-rc2 and it doesn't work too.
BTW, why is afterlayout called twice in 4.1/4.1.1-rc2?

[scottmartin]

With your setup, this should work ...



Ext.define("TestWindow", {
extend: "Ext.window.Window",
alias: "widget.testwindow",

initComponent: function() {
this.callParent(arguments);
}
});

Ext.define("TestText", {
extend: "Ext.form.field.Text",
alias: "widget.testtext",

initComponent: function() {
this.callParent(arguments);
}
});

Ext.define("TestForm", {
extend: "Ext.form.Panel",
alias: "widget.testform",

title: 'form',
initComponent: function() {
this.items = [{
xtype: 'testtext',
value: 'blah',
}];

this.callParent(arguments);
}
});

Ext.onReady(function() {
Ext.create("TestWindow", {
title: "Window",
height: 300,
width: 300,
layout: 'fit',
items: [{
xtype: 'testform',
listeners: {
afterlayout: function(form, layout, eOpts) {
var field = form.down('testtext');
field.focus('',50); // need to wait
}
}
}],
}).show();
});​


Scott.

[Ex_Soft]

With your setup, this should work ...


field.focus('',50); // need to wait


4.0.7 doesn't work.
4.1/4.1.1-rc2 works.
1. Who does steal field's focus after afterlayout?
2.

BTW, why is afterlayout called twice in 4.1/4.1.1-rc2?

[lukasz.sudol]

For me (Ext 4.1) this solution working properly:

the config of textfield, in object listeners:



render: function(field) {
//set focus on the field
field.focus();
}

[Ex_Soft]

the config of textfield, in object listeners:


render: function(field) {
//set focus on the field
field.focus();
}



<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Test Form Focus (create)</title>
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.1.0-gpl/resources/css/ext-all.css"/>
<script charset="utf-8" src="http://dev.sencha.com/deploy/ext-4.1.0-gpl/ext-all.js"></script>
<script>
Ext.define("TestText", {
extend: "Ext.form.field.Text",
alias: "widget.testtext",

initComponent: function() {
this.addListener("render", this.onrender, this);
this.callParent(arguments);
},

onrender: function(component, eOpts) {
if(window.console && console.log)
console.log("TestText.onrender(%o)", arguments);

component.focus(true);
}
});

Ext.define("TestForm", {
extend: "Ext.form.Panel",
alias: "widget.testform",

initComponent: function() {
this.testText = Ext.create("TestText",{
value: "blah-blah-blah"
});

this.items = [this.testText];

this.callParent(arguments);
}
});

Ext.define("TestWindow", {
extend: "Ext.window.Window",
alias: "widget.testwindow",

initComponent: function() {
this.callParent(arguments);
}
});

Ext.onReady(function() {
Ext.QuickTips.init();

if(window.console && console.log)
console.log("core: %s, extjs: %s", Ext.versions.core.version, Ext.versions.extjs.version);

Ext.create("TestWindow", {
title: "Test",
items: [Ext.create("TestForm")]
}).show();
});
</script>
</head>
<body>
</body>
</html>

doesn't work