PDA

View Full Version : Ext Container



danvega
23 Jan 2008, 12:28 PM
I am working on generating dynamic ext code and I came across an issue. Basically I want all of my code generation to bubble up to the top level where the final output will be set to a container. This container could be rendered to a div or it could be set right to the body. Here is my generated code.



<html>
<head>
<title>Container test</title>

<script src="extjs/adapter/ext/ext-base.js"></script>
<script src="extjs/ext-all.js"></script>

<!-- css -->
<link rel="stylesheet" type="text/css" href="extjs/resources/css/resizable.css" />

<script type="text/javascript">
Ext.onReady(function(){
var body = new Ext.Container({
renderTo:Ext.getBody(),
items:[
new Ext.TabPanel({
activeTab:0,
tabPosition:"bottom",
title:"Blog",
collapsible:true,
draggable:true,
items:[
new Ext.Panel({
title:"Entries",
html:"\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur ac sem. Aliquam erat volutpat. Phasellus ornare. Integer sollicitudin erat et ligula. Aliquam erat volutpat. Cras interdum nisi. Quisque quis ante. Pellentesque sit amet dolor ut mi blandit gravida. Nulla elementum risus ornare lacus. Cras id augue sit amet nulla dapibus eleifend. Maecenas malesuada ultrices risus. Mauris vel ante. Donec vitae ipsum. Morbi mollis justo vel nisi. Etiam iaculis. Nullam non justo non nibh viverra sollicitudin. Mauris nisi nunc, blandit id, fringilla et, bibendum sed, tortor. Sed cursus sem non lorem. Aliquam in ligula eu ante molestie dictum.</p>\n\t\t\t\t<p>Maecenas erat libero, ultrices in, rutrum id, hendrerit non, elit. Vestibulum quis augue cursus ante pulvinar vestibulum. Nulla pharetra justo et elit. Curabitur sit amet ipsum. In sollicitudin laoreet metus. Proin lectus arcu, vestibulum id, consequat id, pretium vitae, magna. Maecenas a sem. Sed lectus odio, tincidunt eget, consequat nec, elementum et, lorem. Suspendisse eget sem. Etiam metus. Vivamus luctus scelerisque nibh.</p>\n\t\t\t"
})
,
new Ext.Panel({
title:"Comments",
html:"\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur ac sem. Aliquam erat volutpat. Phasellus ornare. Integer sollicitudin erat et ligula. Aliquam erat volutpat. Cras interdum nisi. Quisque quis ante. Pellentesque sit amet dolor ut mi blandit gravida. Nulla elementum risus ornare lacus. Cras id augue sit amet nulla dapibus eleifend. Maecenas malesuada ultrices risus. Mauris vel ante. Donec vitae ipsum. Morbi mollis justo vel nisi. Etiam iaculis. Nullam non justo non nibh viverra sollicitudin. Mauris nisi nunc, blandit id, fringilla et, bibendum sed, tortor. Sed cursus sem non lorem. Aliquam in ligula eu ante molestie dictum.</p>\n\t\t\t\t<p>Maecenas erat libero, ultrices in, rutrum id, hendrerit non, elit. Vestibulum quis augue cursus ante pulvinar vestibulum. Nulla pharetra justo et elit. Curabitur sit amet ipsum. In sollicitudin laoreet metus. Proin lectus arcu, vestibulum id, consequat id, pretium vitae, magna. Maecenas a sem. Sed lectus odio, tincidunt eget, consequat nec, elementum et, lorem. Suspendisse eget sem. Etiam metus. Vivamus luctus scelerisque nibh.</p>\n\t\t\t"
})
,
new Ext.Panel({
title:"Categories",
html:"\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur ac sem. Aliquam erat volutpat. Phasellus ornare. Integer sollicitudin erat et ligula. Aliquam erat volutpat. Cras interdum nisi. Quisque quis ante. Pellentesque sit amet dolor ut mi blandit gravida. Nulla elementum risus ornare lacus. Cras id augue sit amet nulla dapibus eleifend. Maecenas malesuada ultrices risus. Mauris vel ante. Donec vitae ipsum. Morbi mollis justo vel nisi. Etiam iaculis. Nullam non justo non nibh viverra sollicitudin. Mauris nisi nunc, blandit id, fringilla et, bibendum sed, tortor. Sed cursus sem non lorem. Aliquam in ligula eu ante molestie dictum.</p>\n\t\t\t\t<p>Maecenas erat libero, ultrices in, rutrum id, hendrerit non, elit. Vestibulum quis augue cursus ante pulvinar vestibulum. Nulla pharetra justo et elit. Curabitur sit amet ipsum. In sollicitudin laoreet metus. Proin lectus arcu, vestibulum id, consequat id, pretium vitae, magna. Maecenas a sem. Sed lectus odio, tincidunt eget, consequat nec, elementum et, lorem. Suspendisse eget sem. Etiam metus. Vivamus luctus scelerisque nibh.</p>\n\t\t\t"
})
]
})
]
});
});
</script>
</head>
<body>


</body>
</html>


When I try and run this I get the following error.

this.container has no properties

Any idea why this is happening / what I can do to fix it / a different approach to take? I really want to just keep bubbling up code to the very top and then just render it to the screen / window / panel

hendricd
23 Jan 2008, 12:42 PM
Can you edit your previous post to warp your markup with [html/] tags?

Where is your ext-all.css?

Remove the renderTo, and change body.show to:

body.render(Ext.getBody());

danvega
23 Jan 2008, 1:18 PM
same problem. Is that not the same as giving it a renderTo?

hendricd
23 Jan 2008, 1:37 PM
Sorry, reading your code and comments clearly now shows the issue.

Container is a Base Class for renderable components managed by some form of a layout (and should not be used directly to instantiate a component). It lacks all the necessary methods by itself to create a container element for your child panels.
And a Container cannot contain itself ;)

You'll need to move farther up in the heriarchy.

Why are you not considering a Panel or Viewport for your 'host' ?