PDA

View Full Version : autoEl Array Problem



skirtle
24 Dec 2011, 8:41 AM
A backwards-compatibility issue I ran into. My code was wrong but it might help someone else...

I had something like this and it worked fine in 4.0.7:


Ext.create('Ext.Component', {
renderTo: Ext.getBody(),

autoEl: [{
cn: [{}, {}, {}, {}]
}]
});

Doing the same with 4.1.0-beta-1 generates some totally nonsense HTML.

The mistake is that my autoEl is an array. Get rid of the brackets and it works fine.

mitchellsimoens
24 Dec 2011, 9:00 AM
Bad skirtle! Docs do say String/Object B)

skirtle
24 Dec 2011, 9:15 AM
Chastise away. I hate it when I make mistakes. I intend to spend my evening self-flagellating as a penitence. It's the only way I'll learn...

mitchellsimoens
24 Dec 2011, 9:20 AM
I will tease you :) I've made my fair share and then 100 other's share of mistakes. I'm just having some fun with you >:)

paipai
5 Jan 2012, 1:27 AM
And what about that ?
Works fine in 4.0.7:


this.autoEl = {
tag: 'span',
cls: this.cls // set the css class
}

In 4.1 beta it gives me :

<span cls style=" ....

In 4.0.7 :

<span class="myclass" style="...

paipai
5 Jan 2012, 1:37 AM
It seems to work better like this:


this.autoEl = { tag: 'span' }
My app is still not availble with this release. Lot of fix to done.

skirtle
5 Jan 2012, 2:43 AM
I had a play with this. I could only get it to go wrong if I set cls to null:


Ext.create('Ext.Component', {
renderTo: Ext.getBody(),

autoEl: {
cls: null,
tag: 'span'
}
});

For other values, including undefined, it works as expected. Are you able to produce a test case to reproduce what you've observed with a non-null value?

What worries me more is that if I do this:


Ext.create('Ext.Component', {
renderTo: Ext.getBody(),

autoEl: {
cls: 'myclass',
tag: 'span'
}
});

ExtJS 4.0.7 gives me this:


<span class="myclass x-component x-component-default" id="component-1014" role="presentation"></span>

whereas 4.1.0-beta-1 gives me this:


<span id="component-1014" class="myclass"></span>

paipai
5 Jan 2012, 3:02 AM
Im my case there was a cls property in my component:


Ext.create('Ext.Component', {
renderTo: Ext.getBody(),

cls: 'myclass',

constructor: function(config) {
...
autoEl = {
cls: this.class,
tag: 'span'
}
...
}
});

skirtle
5 Jan 2012, 3:08 AM
Could you give a complete test case? Some JS I can drop into an HTML page and see the problem?