1. #1
    Ext User
    Join Date
    Apr 2009
    Posts
    31
    Vote Rating
    0
    n3b is on a distinguished road

      0  

    Default panel innerHTML not showing

    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.

    Code:
    // 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 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!

  2. #2
    Ext User
    Join Date
    Apr 2009
    Posts
    31
    Vote Rating
    0
    n3b is on a distinguished road

      0  

    Default A bug maybe?

    Code:
    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:
    Code:
    myPanel.body = '<some mark up>'
    However, that doesn't work.
    Code:
    myPanel.html = '<some mark up>'
    does work.

    A workaround for now is
    Code:
    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

  3. #3
    Sencha User mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    19
    mschwartz has a spectacular aura about mschwartz has a spectacular aura about

      0  

    Default

    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'

  4. #4
    Ext User
    Join Date
    Apr 2009
    Posts
    31
    Vote Rating
    0
    n3b is on a distinguished road

      0  

    Default not fully there...

    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:
    Code:
    
    
    Code:
    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.

  5. #5
    Sencha User mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    19
    mschwartz has a spectacular aura about mschwartz has a spectacular aura about

      0  

    Default

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

  6. #6
    Ext User
    Join Date
    Apr 2009
    Posts
    31
    Vote Rating
    0
    n3b is on a distinguished road

      0  

    Default resolved

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

    Of course.

  7. #7
    Sencha User mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    19
    mschwartz has a spectacular aura about mschwartz has a spectacular aura about

      0  

    Default

    That's what I figured it was

Thread Participants: 1