1. #1
    Ext User
    Join Date
    Jul 2008
    Location
    London
    Posts
    5
    Vote Rating
    0
    TheOptimist is on a distinguished road

      0  

    Question TabPanel not rendering first tab

    TabPanel not rendering first tab


    Hi guys, I'm only just getting into ExtJS and whilst I would consider myself "good" at JS, this framework is really testing me. I've read up on the API Docs as much as possible, and searched the forums with no luck, to try and find out what I'm doing wrong (I know it's likely to be me).

    I've fired up the API Docs and am using Firebug to write content into the window. All I'm trying to do at the moment is build up my knowledge in order to build a TabPanel where each Tab contains a Grid. I haven't got that far yet because when I run the below code:

    Code:
    Ext.get(document.body).update("<div id='content'>blah blah</div");
    var BugListPanel = new Ext.TabPanel({
        renderTo:'content',
        activeTab:0,
        items:[
            {
                title:'tab 1',
                html:'this is the first tab'
            },
            {
                title:'tab 2',
                html:'this is the second tab'
            }
        ]
    });
    the first tab doesn't seem to render - it looks like it has a height of zero. When I flip between the tabs both tabs seem to gain an increase in height each time I flip. I know I'm probably missing something but I thought this was the simplest example I could try and not getting this working is a bit demoralising

    Adding "deferredRender", which I've seen in other posts, to either the TabPanel or each item doesn't fix this either.

    Anyone have any ideas about this one? Even if it's just a pointer to some documentation that I haven't read/found would be nice. I'm using Firefox 3 on a Windows machine at the moment - I'll be back on a mac later tonight so I'll be doing the same in Safari.

    TheO

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    The widget needs to be given a height if you insist on rendering widgets into the DOM manually.

    It is strongly recommended that you manage all your pages with a Viewport Container, and arrange all your UI controls in a managed layout which handles rendering, positioning and sizing.

  3. #3
    Ext User
    Join Date
    Jul 2008
    Location
    London
    Posts
    5
    Vote Rating
    0
    TheOptimist is on a distinguished road

      0  

    Default


    Ah, thank you - that makes sense. The "Easy Way" tutorial (which works fine) implies that you don't need to specify a height - because TabPanel extends Panel I assumed that I could do the same thing and it would all be hunky dory.

    Is there a particular reason that the Panel example in the Easy Way tutorial works but the TabPanel doesn't? Just so I can start understanding this framework a little more?

    Blimey, having tried reading up on this it's going to take me a little longer than I thought to understand all of this

    Thanks
    TheO

  4. #4
    Ext User Starfall's Avatar
    Join Date
    Jan 2008
    Location
    Moscow, Russian Federation
    Posts
    158
    Vote Rating
    0
    Starfall is on a distinguished road

      0  

    Default


    I don't see any xtypes in items definitions. Are you sure xtype defaults to 'panel'?

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    @Starfall: xtype defaults to whatever defaulType is set to for the Container. It's set to 'panel' in the Panel class definition, so TabPanel inherits that.

    @OP Panels need a height. Perhaps the example you looked at was part of a layout which managed the size like a border layout. You should be using a Viewport and layout managers to handle rendering, sizing, positioning your UI elements.

  6. #6
    Ext User
    Join Date
    Jul 2008
    Location
    London
    Posts
    5
    Vote Rating
    0
    TheOptimist is on a distinguished road

      0  

    Default


    @Animal - thanks for the assistance. It's clear I need to read more to get my head around this framework. It looks great but I'm just not "getting it" at the moment. I'm going to go back to the API and the docs to figure this one out.

    For information the Easy Way tutorial code looks like this:
    Code:
    Ext.get(document.body).update('<div id="test"></div>');
    new Ext.Panel({
        renderTo: 'test',
        width: '200px',
        title: 'My Title',
        html: 'My HTML content'
    });

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Do not use any HTML at all. Start with a totally empty document.

    Use a Viewport.

  8. #8
    Ext User
    Join Date
    Jul 2008
    Location
    London
    Posts
    5
    Vote Rating
    0
    TheOptimist is on a distinguished road

      0  

    Default


    Aye - that's what I'm going to work out now. Given that's what I want to do in the app anyway I should have started out like that instead of playing around with the HTML.

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    That tutorial is just how to execute commands in Firebug, not how to use Ext.

    I don't know why it's there really.

  10. #10
    Ext User
    Join Date
    Jul 2008
    Location
    London
    Posts
    5
    Vote Rating
    0
    TheOptimist is on a distinguished road

      0  

    Default


    Ah...that would explain it!

Thread Participants: 2