View Full Version : panel innerHTML not showing

22 Apr 2009, 6:53 AM
:s my third time here in as many days. I'm sure this will get easier...

I have a TabPanel which gets a panel added during run. The panel has it's contents replaced using an Ext.Template - or at least, that's what should happen.

Using firebug I set a breakpoint before the panel gets added to the TabPanel and I see the panel has an innerHTML element with the required text. However, it goes to screen and nadda.

// User is already configured and known good
// tbPnl is the preconfigured TabPanel

var adPnl = new Ext.Panel({
id: 'adPnl',
title: 'user',
autoHeight: true,
autoWidth: true});

var adTpl = new Ext.Template(
'<p>name: {name}</p>',
'<p>something: {something}</p>');

adTpl.overwrite(adPnl, User);
//adTpl.overwrite(adPnl.body, User); //doesn't work.
// at this point I see innerHTML on adPnl with my values filled out
// the tab appears with the header but no data. Not in the panel and not in the rendered HTML

The example here http://extjs.com/deploy/dev/examples/core/templates.html (http://extjs.com/forum/../deploy/dev/examples/core/templates.html) suggests passing in the panel.body to the overwrite function but this causes an 'el undefined' error.

I need a fresh set of eyes on this :) Mine have gone wonky...


22 Apr 2009, 7:51 AM
myTemplate.overwrite(myPanel, myData)
This clearly appends the object with an innerHTML element but the Panel doesn't have this. In fact, according to the documentation I should be updating the Panel body like this:

myPanel.body = '<some mark up>'
However, that doesn't work.

myPanel.html = '<some mark up>'
does work.

A workaround for now is

myTemplate.overwrite(myPanel, myData);
myPanel.html = myPanel.innerHTML;
There is the chance that I am simply smoking too many rocks...but dang if the examples/docs just don't reflect my current reality.

What on earth could I be doing wrong here?

22 Apr 2009, 7:56 AM
body is an Ext.Element (see docs for Ext.Panel and Ext.Element). You don't want to set it to something that isn't an Ext.Element (like a string, HTML in the string or not).

Ext.Element does have an update() member to set the innerHTML.

If you look at the source to the templates example:

You'll see he does use
html: 'some html'

22 Apr 2009, 9:10 AM
I understand it's an element. I understand you might not want to replace it with something that isn't.

I don't understand why the example shows the Panel body being passed directly into the Template.Overwrite function (and it clearly works) yet when I do this I get an exception:

This is from the example:

tpl.overwrite(p.body, data);

It makes no difference if I set up some html in the panel before hand, when I pass myPanel.body into the overwrite it fails with an 'el is null' exception.

22 Apr 2009, 9:17 AM
set a breakpoint in firefox at that line and see what p.body is.

22 Apr 2009, 9:26 AM
It is because the Panel isn't rendered to the document before the body is passed into the overwrite function.

Of course.

22 Apr 2009, 10:15 AM
That's what I figured it was :)