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

    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?

    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 - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    mschwartz will become famous soon enough mschwartz will become famous soon enough

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

    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 - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    mschwartz will become famous soon enough mschwartz will become famous soon enough

      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

    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 - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    mschwartz will become famous soon enough mschwartz will become famous soon enough

      0  

    Default


    That's what I figured it was

Thread Participants: 1