4.2.0 Beta: Content from TabPanel is not shown

[Animal]

var tab = main_tab.add({ 
     items: [{ 
          xtype: content 
     }] 
})

That's an overnest in a layoutless panel.

Read your code carefully.

You are adding to "main_tab" a Panel with no configuration except that it has one child: a component of xtype: content.

That Panel will not lay out its children!

The API documentation hammers this message into the reader!

[Animal]

Likewise your region: 'center'.

How are you hoping that it lays out its children?

Does it need children?

[darkpriest]

Hello Animal,

thanks for your reply and pointing me towards nearer to the solution.

I have changed my code like this:

var tab = main_tab.add({    
     xtype: content, 
     helpId: prg_helpId
}); 

The code of the center region i have changed like this:

                    {
                        region     : 'center',
                        autoScroll : true,
                        itemId     : 'center_id',
                        id           : 'center_id',
                        xtype      : 'tabpanel',
                        items      : [
                        {
                            title  : 'Information',
                            itemId : 'home'
                        }
                    } 

Is this right?

The second tab is still not shown and the console throws
"Uncaught TypeError: Cannot read property 'childNodes' of null"
when changing to the second tab.

How to add a title, tools and so on to the tabpanel, this issue caused me in overnesting layouts!

Thanks in advance.

Michi

[dongryphon]

If you need the panel header (and title/tools) inside the tab of a tab panel, then you could do this:

    {
        xtype: 'tabpanel',
        items: [{
            xtype: 'panel',
            title: 'Tab Text',
            layout: 'fit',  // important :)
            items: [{
                title: 'Titlebar in the Tab',
                tools: ...
            }]
        }]
    }

[darkpriest]

Hello,

what is the content from this bug "EXTJSIV-8037"? Can you short explain?

I working on my app and remove all overnesting layouts!

Thanks!

Michi

[dongryphon]

I opened the ticket because this looks/looked like it may be a regression. It may yet be, but the removal of over-nesting is always a "Good Thing" so I would highly recommend you proceed

As you see, the "over" part can be a question at times. There are cases where nesting is necessary. In those cases, you may just need to specify the layout (typically "fit" if you have a single child item). If you don't specify a layout config, you get the "auto" layout which does not manage the size of the child items in any way. It does react to their "auto size" but that can be confusing to understand the "auto size" of a bunch of child components. Often this is not what you want, but could be.

If the nesting is intentional, I would also highly recommend a comment stating the reasons (such as "need panel header/tools inside the tab") or something so the next person to maintain the code does not "fix" the problem by removing the nesting.

I would also suggestion adding "layout: 'auto'" to any place where that is specifically what you want, again because it often looks like a mistake when you don't specify the layout.

While one could argue this more broadly (I mean, there are other config properties that have default values), over-nesting and unintentional use of "auto" layout are very common mistakes.

[darkpriest]

Hello,

thanks for your explanation! I will take your advise / hints and rework my whole application with removing all over-nesting layouts.

After removing the layouts in my example, which was the cause of this thread, now i got this error with 4.2.0 beta:

The console throws "Uncaught TypeError: Cannot read property 'childNodes' of null"
when changing to the second tab.

Any Idea?

Thanks for your support!

Michi

[dongryphon]

I would stop on that error in the debugger (Chrome or Firefox/Firebug make this easy) and see if you can tell from the callstack what is attempting to happen. If you cannot figure it out, posting the callstack here may help others understand the situation.

[darkpriest]

Hello,

i have founded the piece of code which makes problems:

The modell:

Ext.define('AM.model.nav.system_update',
    {
        extend     : 'Ext.data.Model',
        fields     : [
        {
            name : 'id',
            type : 'int'
        },
        {
            name : 'prg_version'
        },
        {
            name       : 'prg_time_real',
            type       : 'date',
            dateFormat : 'Y-m-d H:i:s'
        },
        {
            name    : 'prg_time_year',
            convert : function(value, record) {
                prg_time_year = record.data.prg_time_real.getFullYear();
                return prg_time_year;
            }
        },
        {
            name : 'prg_kategorie'
        },
        {
            name : 'prg_text'
        },
        {
            name : 'prg_document_path'
        }
        ],
        idProperty : 'id'
    }); 

The Store:

Ext.define('AM.store.nav.system_update',
    {
        extend     : 'Ext.data.Store',
        model      : 'AM.model.nav.system_update',
        autoLoad   : true,
        groupDir   : 'DESC',
        groupField : 'prg_time_year',
        proxy      :
        {
            type   : 'ajax',
            url    : 'prg/system_updateverlauf/system_updateverlauf_db.php',
            reader :
            {
                root          : 'data',
                totalProperty : 'count',
                id            : 'id'
            }
        }
    }); 

The store has the groupField 'prg_time_year' which is in the modell defined like this:

 {
            name    : 'prg_time_year',
            convert : function(value, record) {
                prg_time_year = record.data.prg_time_real.getFullYear();
                return prg_time_year;
            }
        }, 

In the grid i use this feature:

                features   : [
                {
                    ftype              : 'groupingsummary',
                    groupHeaderTpl     : '{name}',
                    startCollapsed     : true,
                    enableGroupingMenu : false
                }
                ], 

The grid columns are shown (after removing all overnested layouts ), but wihtout data.

When using this feature i got an error 'Uncaught TypeError: Cannot read property 'childNodes' of null' - whithout everything works fine in 4.2.0 beta (without grouping)!

Thanks!

Michi