PDA

View Full Version : DomHelper.append builds unexpected structure



choykawairicky
22 May 2007, 6:59 PM
var id = 'test';

Ext.DomHelper.append('theatre', {tag: 'div', id: id});
Ext.DomHelper.append(id, {tag: 'div', id: 'showcase'+id});
Ext.DomHelper.append(id, {tag: 'div', id: 'preview'+id});


This is strange here. The code above creates a structure like this,

<div id='theatre'> </div><!--this one was built by the html code-->
<div id='test'>
<div id='showcasetest'> </div>
<div id='previewtest'> </div>
</div>

but, my expected structure is,

<div id='theatre'>
<div id='test'>
<div id='showcasetest'> </div>
<div id='previewtest'> </div>
</div>
</div>

anything goes wrong?
can anyone help?

jsakalos
22 May 2007, 7:15 PM
Maybe this is bug. Don't know.

I usually use children when I want nested structures, e.g.:



// create title element
this.titleEl = dh.insertFirst(this.el.dom, {
tag: "div", unselectable: "on", cls: "x-unselectable x-layout-panel-hd x-layout-title-east"
, children:[
{tag: "span", cls: "x-unselectable x-layout-panel-hd-text", unselectable: "on", html: " "},
{tag: "div", cls: "x-unselectable x-layout-panel-hd-tools", unselectable: "on"}
]}, true);

tryanDLS
22 May 2007, 7:37 PM
Are you using 1.0.1a? Are you using the yui adapter or one of the other ones? Does it occur in both FF and IE?

I just tried this with FF/IE/yui adapter and it looks OK.

choykawairicky
22 May 2007, 8:18 PM
Are you using 1.0.1a? Are you using the yui adapter or one of the other ones? Does it occur in both FF and IE?

I just tried this with FF/IE/yui adapter and it looks OK.

supposedly, this is not a bug...

it's working independently with the code above...

however, when I mixed them with content panel, trees, the case is different...



var id = 'test';

Ext.DomHelper.append('theatre', {tag: 'div', id: id}); //theatre, a div, was coded in html already
Ext.DomHelper.append(id, {tag: 'div', id: 'showcase'+id});
Ext.DomHelper.append(id, {tag: 'div', id: 'preview'+id});

var innerLayout = new Ext.BorderLayout(id, {
south:
{
split:true,
autoScroll:false,
collapsible:true,
titlebar: true,
},
center:
{
autoScroll:true,
closeOnTab: true,
titlebar:false
}
});

//sth here...

var showcase = new Ext.ContentPanel('showcase'+id, {title: 'Showcase', fitToFrame:true, autoScroll:true});
innerLayout.add('center', showcase);

var preview = new Ext.ContentPanel('preview'+id, {title: "Preview", fitToFrame:true, autoScroll:true});
innerLayout.add('south', preview);