You found a bug! We've classified it as EXTJS-8037 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #11
    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


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

  2. #12
    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


    Likewise your region: 'center'.

    How are you hoping that it lays out its children?

    Does it need children?

  3. #13
    Sencha User
    Join Date
    Nov 2007
    Location
    Germany
    Posts
    147
    Vote Rating
    0
    darkpriest is on a distinguished road

      0  

    Default


    Hello Animal,

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

    I have changed my code like this:

    PHP Code:
    var tab main_tab.add({    
         
    xtypecontent
         
    helpIdprg_helpId
    }); 
    The code of the center region i have changed like this:

    PHP Code:
                        {
                            
    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

  4. #14
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,295
    Vote Rating
    122
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


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

    Code:
        {
            xtype: 'tabpanel',
            items: [{
                xtype: 'panel',
                title: 'Tab Text',
                layout: 'fit',  // important :)
                items: [{
                    title: 'Titlebar in the Tab',
                    tools: ...
                }]
            }]
        }
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  5. #15
    Sencha User
    Join Date
    Nov 2007
    Location
    Germany
    Posts
    147
    Vote Rating
    0
    darkpriest is on a distinguished road

      0  

    Default


    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

  6. #16
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,295
    Vote Rating
    122
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


    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.
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  7. #17
    Sencha User
    Join Date
    Nov 2007
    Location
    Germany
    Posts
    147
    Vote Rating
    0
    darkpriest is on a distinguished road

      0  

    Default


    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

  8. #18
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,295
    Vote Rating
    122
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


    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.
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  9. #19
    Sencha User
    Join Date
    Nov 2007
    Location
    Germany
    Posts
    147
    Vote Rating
    0
    darkpriest is on a distinguished road

      0  

    Default


    Hello,

    i have founded the piece of code which makes problems:

    The modell:
    PHP Code:
    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(valuerecord) {
                    
    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:

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

    PHP Code:
     {
                
    name    'prg_time_year',
                
    convert : function(valuerecord) {
                    
    prg_time_year record.data.prg_time_real.getFullYear();
                    return 
    prg_time_year;
                }
            }, 
    In the grid i use this feature:

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

Thread Participants: 2

Tags for this Thread