PDA

View Full Version : Ext.DomHelper.append creates weird div elements



hoeriksen
5 Aug 2010, 4:07 AM
Hi,

I use the DomHelper class to create a few extra DOM elements to contain my Ext widgets. When I have run the Ext script in my almost blank testing page, the elements are created like they should.
The added hierarchy should look like this:
<div id="viewport">
<div id="treepanel"></div>
<div id="tagholder></div>
</div>
This is also the result in my testing page.

However, when I moved over to my "fuller" page, the append method creates a div hierarchy thats look like this:
<div 0="[object Object]">
<div 0="[object Object]"></div>
</div>
<div 0="[object Object]">

The code looks like this:
var treepanel = [{
id : 'treepanel',
tag : 'div',
}];

var viewport = Ext.DomHelper.append(document.body, [{
id: 'viewport'
}]);



Ext.DomHelper.append(viewport, treepanel);


var tagholder = [{
id : 'tagholder',
}];

Ext.DomHelper.append(document.body, tagholder);

Upon closer inspection I see that the last hierarchy is correct according to the code, but that still doesn't explain the weird div tags.

Many thanks in advance!
Håvard

Condor
5 Aug 2010, 5:35 AM
Why are treepanel, viewport and tagholder arrays and not simple objects?

hoeriksen
5 Aug 2010, 10:38 PM
Erm.. because I found an example with DomHelper.append which did it this way... :)
I made them simple objects, and that solved the problem (but still doesn't explain why the behaviour was different between the two files.
However now my TreePanel (which is drawn to the treepanel div) is complaining that "this.el is null". The weird this is that firebug shows that it isn't. The two screenshots I have attached are taken at the same time. Do you have any idea why this is? Again, the script works nicely in my stripped down html file that I use for testing.
2181421815

Condor
5 Aug 2010, 11:15 PM
You are doning someting seriously wrong here. Can you post your code to create the treepanel?

hoeriksen
5 Aug 2010, 11:40 PM
Absolutely. Here it is:

var tree = new Ext.tree.TreePanel({
renderTo:'treepanel',
useArrows:true,
hidden: true,
autoScroll:true,
animate:true,
containerScroll: false,
rootVisible: false,
frame: false,
root: {
nodeType: 'async'
},
dataUrl: 'document-tags.json',
listeners: {
'checkchange': function(node, checked){
if(checked){
node.getUI().addClass('complete');
}else{
node.getUI().removeClass('complete');
}
}
}
});

tree.getRootNode().expand(true);

Animal
5 Aug 2010, 11:44 PM
But you had problems with DomHelper????

Animal
5 Aug 2010, 11:45 PM
WHat version of Ext?

hoeriksen
6 Aug 2010, 12:01 AM
Aha, I think I'm onto something here. I'm using 3.2.1 locally when I'm testing with my stripped page, but when I use the more production like page, I fetch Ext from our production server and at the top of ext-all.js I found this:
Ext JS Library 1.1

I'll change the reference to my local copy and see if that sorts it out. If it does, I have to get the server people up grade the Ext-version. Regarding DomHelper so, yes, it was initially a problem with it but the next (and I thought perhaps related) problem was with the tree. I should have created a new thread for it. Thanks guys, however, for all your help so far.