Transform existing div into panel?

**arth** · 14 Feb 2008 9:42 AM

I'm new to Ext - please forgive me for my ignorance. I've spent hours trying to figure this out, including looking at the example code and the documentation (docs/output/Ext.Panel.html) and can't figure out an easy way to load existing div content into a panel without duplicating it.

I want to take something like this:

Code:

<html>
<head>
...includes left out for simplicity
<script type="text/javascript" >
    
        Ext.onReady(function(){
...
});
</script>
</head>
<body>
<div id="panel_content">I want to display everything in this div as a panel</div>
</body></html>

and display #panel_content within a panel. Here's what I started with, straight from the sample with the exception of the html config option:

Code:

var p1 = new Ext.Panel({
                title: 'Filter Options',
                collapsible:true,
                renderTo: 'panel_content',
                width:400,
                html: Ext.get('panel_content').dom.innerHTML
            });

This displays a duplicate copy of #panel_content within a panel at the bottom of the existing content. I have tried other combinations using the contentEl: config option and using the render() method instead of the renderTo: option but nothing I've tried will gracefully replace #panel_content with the panel. I can load the innerHTML from my div into a string, set the innerHTML to '' then set the html config option to my string but that seems like a hack. There must be something simple that I'm overlooking here. Any help would be appreciated.

**efege** · 14 Feb 2008 9:49 AM

Hi arth, welcome to Ext!

Try this HTML:

Code:

<div id="panel_content" class="x-hidden">I want to display everything in this div as a panel</div>

with this JS:

Code:

var p1 = new Ext.Panel({
                title: 'Filter Options',
                collapsible:true,
                contentEl: 'panel_content',
                width:400,
                renderTo: document.body
            });

**arth** · 14 Feb 2008 10:05 AM

It was simple! Thanks very much - that got me going again.

Art

**ry.extjs** · 14 Feb 2008 10:19 AM

did you try 'applyTo' at all? i think that's what you were looking for without having to use the 'x-hidden' class.

**arth** · 14 Feb 2008 11:39 AM

Originally Posted by ry.extjs

did you try 'applyTo' at all? i think that's what you were looking for without having to use the 'x-hidden' class.

Thanks for the suggestion - this method worked well too. Using the 'x-hidden' class isn't necessary but it is necessary to enclose at least the body of the content inside a 'x-panel-body' class. Thanks again!

Art

**efege** · 14 Feb 2008 11:49 AM

OK, so the code I posted above might be modified like this (using nested DIVs, right?):

HTML

Code:

<div id="panel_markup"><div class="x-panel-body">I want to display everything in this div as a panel</div></div>

JS

Code:

var p1 = new Ext.Panel({
           title: 'Filter Options',
           collapsible:true,
           applyTo: 'panel_markup',
           width:400
});

Transform existing div into panel?

Thread Tools

Search Thread

Display

Transform existing div into panel?

Transform existing div into panel?

Thank you!

Thank you!