PDA

View Full Version : HTML tags in my panel are getting ignored



ferr0084
25 Mar 2010, 2:15 PM
I've got a BorderLayout with some HTML in the center region, the text of the content is getting displayed but the <p> and <ul> tags are getting ignored. Surely I must be missing something stupid simple but I'm new to Extjs.

The code looks like this...

var contentPanel = {
collapsible: false,
region:'center',
id: 'content-panel',
xtype: 'panel',
margins: '0 0 0 0',
style: {
align: 'center'
},
contentEl: 'report-div-welcome'
};

new Ext.Viewport({
layout:'border',
defaults: {
collapsible: true,
split: true,
bodyStyle: ''
},
items: [treePanel,contentPanel]
})

<div id='report-div-welcome'>

<table width=100% height=100% cellpadding=0 cellspacing=0 border=0>
<tr><td align=left height=500 class='headerBkgnd' style='padding:30px'>
<h3 style='text-align:left;'>Reports</h3>

<p>this is p1...</p>
<p>this is p2...</p>
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
</td></tr>
</table>

</div>


Can anyone tell me why the <p> and <ul> stuff in my content is getting ignored? :-/

tobiu
25 Mar 2010, 3:29 PM
welcome.

if you really want to show html in your panel, your center-region has a config "html" for that.


kind regards,
tobiu

ferr0084
31 Mar 2010, 8:22 AM
welcome.

if you really want to show html in your panel, your center-region has a config "html" for that.


kind regards,
tobiu

The example I provided is not my actual production code, it's just an example that's intended to isolate the problem I'm having so that I can get focused help on this specific issue. Your suggestion doesn't address this specific issue. Perhaps you could explain why I should not use "contentEl" or help me understand why I should not expect my example to work?

CrazyEnigma
31 Mar 2010, 8:33 AM
The point of using a framework is to shy away from having to write any HTML. At least rarely.

What tobiu is referring to is, you place your html stuff inside the html property. Check out this link (http://www.extjs.com/deploy/dev/docs/?class=Ext.Panel) and look up the html config property.

ferr0084
31 Mar 2010, 9:40 AM
What tobiu is referring to is, you place your html stuff inside the html property. Check out this link (http://www.extjs.com/deploy/dev/docs/?class=Ext.Panel) and look up the html config property.

I understand what tobiu is saying and I've read the API docs. If you read the entry for contentEl you'll see that what I'm trying to do is exactly what the docs claim it is supposed to be used for...


contentEl : String
Optional. Specify an existing HTML element, or the id of an existing HTML element to use as the content for this component.
Description :
This config option is used to take an existing HTML element and place it in the layout element of a new component (it simply moves the specified DOM element after the Component is rendered to use as the content.

The problem is that it doesn't render the HTML correctly. So again, I don't understand what is wrong with the way I'm doing it?

watrboy00
31 Mar 2010, 9:44 AM
Try using preventBodyReset: true in your panel config.

watrboy00
31 Mar 2010, 9:45 AM
Also in the future use code tags to make your code easier to read.

ferr0084
31 Mar 2010, 12:27 PM
watrboy00, you rock! That did it. Thank you!!!