PDA

View Full Version : Ext.get(id).focus() Ext.getCmp(id).focus() doesn't work



adrianbj
23 Oct 2011, 12:39 PM
Hello partners:
I'm trying to override de enter key instead Tab key as navigation key on a form. What I do is to catch the enter key and then set the focus into the next field in the form, but it'doesn't work. It works when i try to highlight the field but the focus not. The code of the panel that i'm showing is this:


Ext.define('MyApp.view.ui.MyPanel1', {
extend: 'Ext.panel.Panel',
model: "Task",
height: 450,
width: 354,
title: "description",
initComponent: function() {
Ext.FocusManager.enable();
var me = this;
var form = {};
form.items = [
{
xtype: "textfield",
width: 354,
name: "idTask",
id: "idTask",
labelAlign: "left",
selectOnFocus: true,
listeners: {
specialkey: function(field,event){
if (event.getKey() == event.ENTER) {
Ext.get(form.items[1].id).focus();
}
}
}
},
{
xtype: "lookuplist",
width: 354,
name: "whomakes",
id: "whomakes",
labelAlign: "left",
forceSelection: true
},
{
xtype: "lookuplist",
width: 354,
name: "taskType",
id: "taskType",
labelAlign: "left",
forceSelection: true
}
];
return form;
}
});


If anyone can help me with his knowledge would greatly appreciate it .

skirtle
24 Oct 2011, 9:30 AM
A couple of thoughts.

Is the specialkey event even firing? Put in some logging to confirm. If not, try this:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.field.Text-cfg-enableKeyEvents

You're also going to have problems accessing items like that. The items property is not an array, it's a MixedCollection. form.items[1] is most likely undefined and I'd expect that line to throw an error.

adrianbj
24 Oct 2011, 9:57 AM
Yes, the specialkey event is fired, because when i replace the .focus by .hightlight it works.
Then, the second question. If I want to do it that way, as it should?

skirtle
24 Oct 2011, 10:08 AM
The more I look at your code the more confused I get. You seem to be extending Ext.panel.Panel but you aren't calling the superclass's initComponent from within your initComponent. You're also specifying a model config option, which seems a bit odd.

To be honest, I don't understand how that code could possibly work for highlighting either.

Try your code in different browsers. Does focussing fail in all of them?

adrianbj
24 Oct 2011, 10:23 AM
Thanks again for your help,
What happens is I use a framework that encapsulates many of the statements made in ExtJS and in the backend i have jpa, that is the reason for the model property and why i don't call initComponent neither me.callparent(arguments). So to define a panel I simply put:


CCI.defineInspectPanel({
model: "Task",
height: 450,
width: 354,
titleTpl: "{description}",
initForm: function() {
Ext.FocusManager.enable();
var me = this;
var form = {};
form.items = [
{
xtype: "textfield",
width: 354,
name: "idTask",
id: "idTask",
labelAlign: "left",
selectOnFocus: true,
enableKeyEvents: true,
listeners: {
specialkey: function(field,event){
if (event.getKey() == event.ENTER) {
Ext.getCmp(form.items[1].id).focus();
}
}
}
},
{
xtype: "lookuplist",
width: 354,
name: "whomakes",
id: "whomakes",
labelAlign: "left",
forceSelection: true,
enableKeyEvents: true,
listeners: {
specialkey: function(field,event){
if (event.getKey() == event.ENTER) {
Ext.getCmp(form.items[2].id).focus();
}
}
}
},
{
xtype: "lookuplist",
width: 354,
name: "taskType",
id: "taskType",
labelAlign: "left",
forceSelection: true,
enableKeyEvents: true,
listeners: {
specialkey: function(field,event){
if (event.getKey() == event.ENTER) {
Ext.getCmp(form.items[3].id).focus();
}
}
}
},
{
xtype: "lookuplist",
width: 354,
name: "color",
id: "color",
labelAlign: "left",
forceSelection: true,
enableKeyEvents: true,
listeners: {
specialkey: function(field,event){
if (event.getKey() == event.ENTER) {
Ext.getCmp(form.items[4].id).focus();
}
}
}
},
{
xtype: "numberfield",
width: 354,
name: "weight",
id: "weight",
maxLength: 2,
allowDecimals: false,
decimalPrecision: 0,
maxValue: 10,
minValue: 1,
labelAlign: "left",
selectOnFocus: true,
enableKeyEvents: true,
listeners: {
specialkey: function(field,event){
if (event.getKey() == event.ENTER) {
Ext.getCmp(form.items[5].id).focus();
}
}
}
},
{
xtype: "textfield",
width: 354,
name: "duration",
id: "duration",
labelAlign: "left",
selectOnFocus: true,
enableKeyEvents: true,
id: "duration",
listeners: {
specialkey: function(field,event){
if (event.getKey() == event.ENTER) {
Ext.getCmp(form.items[6].id).focus();
}
}
}
},
{
xtype: "textareafield",
height: 41,
width: 354,
name: "checkListIn",
id: "checkListIn",
labelAlign: "left",
selectOnFocus: true,
enableKeyEvents: true,
listeners: {
specialkey: function(field,event){
if (event.getKey() == event.ENTER) {
Ext.getCmp(form.items[7].id).focus();
}
}
}
},
{
xtype: "textareafield",
height: 41,
width: 354,
name: "checkListOut",
id: "checkListOut",
labelAlign: "left",
selectOnFocus: true,
enableKeyEvents: true,
listeners: {
specialkey: function(field,event){
if (event.getKey() == event.ENTER) {
Ext.getCmp(form.items[8].id).focus();
}
}
}
},
{
xtype: "textareafield",
height: 41,
width: 354,
name: "description",
id: "description",
labelAlign: "left",
selectOnFocus: true,
enableKeyEvents: true,
listeners: {
specialkey: function(field,event){
if (event.getKey() == event.ENTER) {
Ext.getCmp(form.items[9].id).focus();
}
}
}
},
{
xtype: "textareafield",
height: 41,
width: 354,
name: "comments",
id: "comments",
labelAlign: "left",
selectOnFocus: true,
enableKeyEvents: true,
listeners: {
specialkey: function(field,event){
if (event.getKey() == event.ENTER) {
Ext.getCmp(form.items[0].id).focus();
}
}
}
}
];
return form;
}
});

adrianbj
24 Oct 2011, 10:31 AM
Todo esta hecho con un framework para ExtJS, llamado CCI que ya esta implementado,
Es por eso que me enfoque solo en la parte del "MixedCollection" que dijiste antes, y en la forma de capturar el evento enter y emular el tab, He probado en otros exploradores, (Firefox y Safari) en ninguno funciona.

adrianbj
24 Oct 2011, 10:33 AM
Everything is done with a framework for ExtJS, called CCI that is already implemented,
That's why I focused only on the part of the "MixedCollection" you said before, and how to capture the whole event and emulate the tab, I have tried in other browsers (Firefox and Safari) in any work. :(
I hope you see beyond and lead me to the solution

skirtle
24 Oct 2011, 10:57 AM
I can't help with CCI. Here's an example of it working in plain ExtJS:


Ext.create('Ext.panel.Panel', {
height: 300,
renderTo: Ext.getBody(),
width: 300,
items: [
{
xtype: 'textfield',
listeners: {
specialkey: function(field, event) {
if (event.getKey() === event.ENTER) {
field.ownerCt.getComponent(1).focus();
}
}
}
}, {
xtype: 'textfield',
listeners: {
specialkey: function(field, event) {
if (event.getKey() === event.ENTER) {
field.ownerCt.getComponent(0).focus();
}
}
}
}
]
});

adrianbj
24 Oct 2011, 11:50 AM
Probe with that code and still does not work. I guess it must be a framework problem or something .. Because I have seen many examples and it works, but for some reason the focus is not working ... Eye web console does not show any error.
In any case thank you very much ... for help