PDA

View Full Version : autoEl is undefined on add



ethraza
18 Sep 2013, 11:04 AM
I'm migrating from Extjs 3 to 4.2.1 and everytime I try too add some component to a container, anywhere in the app, I see the same error.

For example, if I do:


Ext.ComponentQuery.query('#myToolbar').add({xtype:'button', text:'b1'});

I got the error:
TypeError: autoEl is undefined
autoEl.tabIndex = me.tabIndex; ext-all-debug.js (linha 45780)



But, if I do:


Ext.ComponentQuery.query('#myToolbar').add({xtype:'button', text:'b1', disabled:true});

It just works. But I need to setDisabled(false) to the component on render, to get it usable.


Any ideas on why is that happening to me?

ettavolt
18 Sep 2013, 10:42 PM
ComponentQuery.query() actually returns array. I don't know arrays with add() method. :)
Also it would be helpful, if you show config for that toolbar and its container.

ethraza
19 Sep 2013, 12:46 PM
I forgot the [0]. This is only an example. :">

I was expecting someone else wold knew about that error since it is been a constant to me from the beginning with ExtJs 4.2.1.
As I'm migrating from ExtJs 3 to 4, my app is big and I don't have a quick sample app to show that happening, I need to figure out how I wold show the error to you guyz.

But I tryed, for example, to add a lbar, to a region and got the error. But if I add disabled:true too, to this region, it works and I can setDisabled(false) to the region after and it will be good to go.


,{
region: 'west',
width: 175,
collapsible: true,
split: true,
layout:'fit',
margins: '5 0 0 0',
tools: [{
type: 'close',
handler: function(){
Ghs.mod.App.exit();
}
}],
//disabled: true,
lbar: [{xtype:'button',text:'b1'}],
items: [{
//border: false,
id: 'appMenu',
layout: {
type: 'vbox',
padding: '5',
align: 'stretch'
},
items: [],
defaults: function(c){
var def = {
scope: Ghs.mod.App,
handler: function(o){
scope.includeMod(o.initialConfig);
}
};

function applyDef(btn){
if (btn.menu) {
btn.menu.defaults = (btn.menu.defaults)? Ext.applyIf(btn.menu.defaults, def) : def;

Ext.each(btn.menu.items, function(e){
if (e.menu) {
applyDef(e);
}
});
}
}

if (c.menu) {
applyDef(c);
return {
margins: '0 0 5 0',
xtype: 'button',
scope: Ghs.mod.App
};
} else {
return {
margins: '0 0 5 0',
xtype: 'button',
scope: Ghs.mod.App,
handler: function(o){
scope.includeMod(o.initialConfig);
}
};
}
}
}]
},


I knew that a disabled:true wold work because I take a look at the ExtJs code and saw the code that was rising the error (ext-all-debug:45779):


if (!me.disabled) {
autoEl.tabIndex = me.tabIndex;
}

ettavolt
21 Sep 2013, 3:15 AM
It is not a common problem, because button configure autoEl in the initComponent - before render. I believe you have some override causing the problem. If you want to know which one component is exactly failing this.id in the error scope maybe useful.

ethraza
24 Sep 2013, 4:26 AM
You are great!
That was a freaking button override that I can't even remember the purpose.
Thank you.