PDA

View Full Version : Nesting Box Component tags



gh0st26
15 Nov 2009, 4:18 AM
Hello,

I'm having an issue here and i'm not sure if what i'm trying to do is even possible...

But basically what i'm trying to do it create multiple autoEl tags with an id and html inside...

Here is the code i'm using :



var box = new Ext.BoxComponent ({

id: 'box',

autoEl: [{
tag: 'div',
id: 'div1',
html: '<p>Box 1 Text</p>'
}, {
tag: 'div',
id: 'div2',
html: '<p>Box 2 Text</p>'

}]

});



just to give you an idea, the end result i'm looking for is html code that looks like :



<div id="div1"><p>Box 1 Text></p>
<div id="div2"><p><Box 2 Text></p>


But from the code that i posted above the result i'm getting is :



<div id="div1"><p>Box 1 Text></p>


What am i doing wrong here guys??

I appreciate your help.

gh0st26
15 Nov 2009, 4:24 AM
also:

i'm rendering that box to a div that's on the .html page itself (dom)



box.render('DOMContainer');


so the total end result html trying to achieve would actually be :

<div id="DOMContainer">

<div id="div1"><p>Box 1 Text</p></div>
<div id="div2"><p>Box 2 Text</p></div>
... And so on ...

</div>

hendricd
15 Nov 2009, 7:12 AM
@gh0st26 -- Your autoEl config needs to be the structure of the container Element (that will be the new 'el' for the component). Try :



var box = new Ext.BoxComponent ({

id: 'box',

autoEl:
{ tag:'div', //the new 'el'
children : [
{
tag: 'div',
id: 'div1',
html: '<p>Box 1 Text</p>'
}, {
tag: 'div',
id: 'div2',
html: '<p>Box 2 Text</p>'

}]
}

});

gh0st26
15 Nov 2009, 1:11 PM
ahhhhh...

I get it now... thanks you :D

gh0st26
15 Nov 2009, 1:18 PM
i have another questions... sorry if this seems a bit stupid, i'm just trying to get my head around this.

Is it possible to manager the child containers of the Boxcomponent using HTML ?


what i mean by that is:

Rendering it to a div thats in the html page and instead of listing out the child components in js i can do it by just raw html ?

the reason i'm trying to do this is basically i want to beable to define an area in extjs as a component that i can then later Destroy and Re-rendered a new component in that "area".

Eg:

JS :
Render box componen to:


HTML :
<div id="ContentBody><div>

... Nested Divs and content here ....

Then later i can destroy all the children by calling :

box.getCmp('box').destroy();

And it would remove anything inside the main container but not actually remove the maincontainer so i can later re-render to it.


Not sure if this is even the logical way to do this so i'm open to suggestions.

hendricd
15 Nov 2009, 5:52 PM
....Rendering it to a div thats in the html page and instead of listing out the child components in js i can do it by just raw html ?

...

The nice thing about dealing with BoxComponent primitives, is: you can stay primitive ;) :



var box = new Ext.BoxComponent ({

id: 'box',

autoEl:
{ tag:'div', //the new 'el'
children : [
{
tag: 'div',
id: 'div1',
html: '<p>Box 1 Text</p>'
}, {
tag: 'div',
id: 'div2',
html: '<p>Box 2 Text</p>'

}]
},

replaceWith : function(markup){

if(!markup) return this.clear();

this.getEl().update(
Ext.isArray(markup) || Ext.isObject(markup) ? Ext.DomHelper.markup(markup) : markup
);
},
clear : function(){
this.getEl().update(''); //ONLY IF you don't set listeners on the content !!!!!!!!!!!!!!!!!!!!!!
}
});See Element.update and Ext.DomHelper API docs for more on 'why/how' ?

Tweak it ;)

gh0st26
15 Nov 2009, 7:20 PM
wow doug, very informative post there! you're really being a big help, thanks.

Now about the clear function example, what would i do if there were set listeners ?

I understand your busy so i'm not asking for complete code but just some tips and points in the right direction would be helpful... This is my first extjs project so i'm trying to get up to speed on everything. so far it's been going good from reading through froum posts, and docs, etc.

Great community you guys got going here! i really like extjs alot i'm gonna be using it for many many projects to come :)

p.s: i'm also gonna give those docs u pointed me to a good read through now as well.

hendricd
15 Nov 2009, 7:34 PM
...Now about the clear function example, what would i do if there were set listeners ?


That would depend on what's going on with all that transient content, but by using event delegation (on the container Element 'el') you could limit your IE-leak exposure:



var box = new Ext.BoxComponent ({

id: 'box',

autoEl:
{ tag:'div', //the new 'el'
children : [
{
tag: 'div',
id: 'div1',
html: '<p>Box 1 Text</p>'
}, {
tag: 'div',
id: 'div2',
html: '<p>Box 2 Text</p>'

}]
},

replaceWith : function(markup){

if(!markup) return this.clear();

this.getEl().update(
Ext.isArray(markup) || Ext.isObject(markup) ? Ext.DomHelper.markup(markup) : markup
);
},
clear : function(){
this.getEl().update('');
},
listeners: {
afterrender : function(){

// this listener survives the content changes, but removed
// when the component is destroyed.
this.mon(
this.getEl(),
{click : this.onClick
scope : this
delegate : 'div.someClassPerhaps' //or other CSS selector
}
);
}
},
onClick : function(e, target){
//do stuff...
}
});Keep reading/tweaking... ;)