PDA

View Full Version : DOM generated dynamically append to Panel



karthik085
4 Aug 2010, 1:22 PM
Hi,
A DOM is being generated dynamically. Currently, it is being rendered using the following way:



HTML:
<div id="container"></div>

JS:
XXX.render("container");


How can XXX be added to panel? XXX listens to an AJAX request, does some operation and creates a dom.
How can XXX be specified?

Thanks,
K

Condor
4 Aug 2010, 11:51 PM
If you want to add XXX to a panel, then why are you even rendering XXX? The layout of the panel will take care of rendering XXX in the correct location.

I don't understand your second question. Can you rephrase it?

karthik085
5 Aug 2010, 6:23 AM
XXX is a plugin - it is Ext.ux.TagCloud - which renders to an HTML element like div in the above case.
What needs to be specified so the plugin / panel can render the output of TagCloud?
Ext.ux.TagCloud rendering code as specified below creates a DOM and appends to the div in the above case.



onRender : function(ct, position){

this.container = ct;

if(this.el){
this.el = Ext.get(this.el);
if(!this.target){
ct.dom.appendChild(this.el.dom);
}
}else {
var cfg = this.getAutoCreate();
if(!cfg.name){
cfg.name = this.name || this.id;
}
this.el = ct.createChild(cfg, position);
}

this.list = this.el.createChild({tag: "ol", cls: "x-cloud-ordered-list"});

}



If you want to add XXX to a panel, then why are you even rendering XXX? The layout of the panel will take care of rendering XXX in the correct location.

I don't understand your second question. Can you rephrase it?

Condor
5 Aug 2010, 6:28 AM
I don't know Ext.ux.TagCloud, but it looks like it is a normal Ext.Component and so it should be used as a panel item and not rendered to the panel.

karthik085
5 Aug 2010, 7:21 AM
That is the first thing I tried:
added to items in panel like



panel = new Ext.FormPanel({
id: 'panel',
title: 'Cloud',
items: [cloud]
});

cloud is explained in the link below.

Only panel gets generated and displayed - not the cloud.

Kindly take a look at how it is being used (a short one)
http://www.sencha.com/learn/Extension:TagCloud#Usage



I don't know Ext.ux.TagCloud, but it looks like it is a normal Ext.Component and so it should be used as a panel item and not rendered to the panel.