panel innerHTML not showing

[n3b]

: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.
tbPnl.add(adPnl);
// at this point I see innerHTML on adPnl with my values filled out
tbPnl.setActiveTab(adPnl);
// 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...

Cheers!

[n3b]

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?
n

[mschwartz]

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:
http://extjs.com/deploy/dev/examples/core/templates.js

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

[n3b]

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.

[mschwartz]

set a breakpoint in firefox at that line and see what p.body is.

[n3b]

It is because the Panel isn't rendered to the document before the body is passed into the overwrite function.

Of course.

[mschwartz]

That's what I figured it was :)