PDA

View Full Version : How to set focus after render



Ex_Soft
19 Jun 2012, 2:31 AM
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
19 Jun 2012, 12:19 PM
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
19 Jun 2012, 11:35 PM
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
20 Jun 2012, 5:20 AM
As mentioned, try moving it to the create instead of the define.

Scott.

Ex_Soft
20 Jun 2012, 6:24 AM
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
20 Jun 2012, 10:44 PM
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
21 Jun 2012, 2:53 PM
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
21 Jun 2012, 10:06 PM
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
22 Jun 2012, 3:05 AM
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
25 Jun 2012, 11:11 PM
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

WendyLG
23 Oct 2013, 6:13 AM
As mentioned, try moving it to the create instead of the define.

Scott.

Why does moving listeners to the create rather than the define make a difference? as I have seen this in a few places and it logically makes no sense.

scottmartin
23 Oct 2013, 6:22 AM
You need to add the listener to the created instance.

Scott.