cannot add a Container to a viewport

[richardsugg]

I have a viewport with border layout. I can add a TreePanel to region west with no problem. However, I have a Panel to go in region north that complains. Here's my Viewport.js:

Ext.define('Dashboard.view.Viewport', {
    extend: 'Ext.container.Viewport',
    
    title: 'My Dashboard',
    
    requires: [ // List of views
      'Dashboard.view.MainNavigation',
      'Dashboard.view.MainHeader',
      'Dashboard.view.TabPanel'
    ],
    
    // Fill the entire browser window
    layout: {
      type: 'border'
    },
    
    initComponent: function() {
      console.log("Viewport.initComponent");
      this.items = [
        {
          xtype: 'mainnavigation',
          region: 'west'
        },
        /*,
        {
          xtype: 'tabpanel',
          region: 'center'
        },
        */
        {
          xtype: 'mainheader',
          region: 'north'
        }
      ];
      this.callParent();
    }
});

and here is MainHeader.js:

Ext.define('Dashboard.view.MainHeader', {
  extend: 'Ext.container.Container',
  
  alias: 'widget.mainheader',
  
  html: 'SSO Dashboard',
  region: 'north',
  layout: 'fit',
  height: 75,
  preventHeader: true,
  
  initComponent: function() {
    console.log("Header.initComponent");
    
  }
});

When the page loads, all is well until after MainHeader.initComponent (the message "Header.iniComponent" shows up in the console). Then I get an error message:

Uncaught TypeError: Cannot read property 'items' of undefined Context.js:694
Ext.define.invalidate Context.js:694
Ext.define.invalidate Context.js:680
Ext.define.flushInvalidates Context.js:514
Ext.define.run Context.js:1059
Ext.define.statics.flushLayouts AbstractComponent.js:75
Ext.define.statics.resumeLayouts AbstractComponent.js:82
Ext.resumeLayouts AbstractComponent.js:3271
Ext.define.render Renderable.js:761
Ext.define.constructor AbstractComponent.js:1042
Base.implement.callParent ext-debug.js:3725
Ext.define.constructor Component.js:365
constructor ext-debug.js:3889
(anonymous function)
Ext.ClassManager.instantiate ext-debug.js:4856
(anonymous function) ext-debug.js:1836
Ext.define.onLaunch Main.js:11
Ext.define.onBeforeLaunch Application.js:214
(anonymous function) Application.js:171
isEvent ext-debug.js:8437
fire ext-debug.js:8583
Ext.apply.readyEvent.event.fire ext-debug.js:8763
Ext.apply.fireReadyEvent ext-debug.js:8842
Ext.apply.onDocumentReady ext-debug.js:8859
Ext.apply.onReady.fn ext-debug.js:5905
Ext.apply.triggerReady ext-debug.js:5891
Ext.apply.refreshQueue ext-debug.js:5470
Ext.apply.refreshQueue ext-debug.js:5471
Ext.apply.onFileLoaded ext-debug.js:5836
(anonymous function) ext-debug.js:1829
Ext.apply.injectScriptElement.onLoadFn ext-debug.js:5494

Can someone help me troubleshoot this? I'm brand new to Sencha. I'm using ExtJS 4.1.

-- Thanks

[evant]

You need to callParent() in your MainHeader initComponent. Alternatively, if you aren't modifying any behaviour, don't override the function at all.

[richardsugg]

awesome! I commented out initComponent, and it worked fine. Thanks for the response!