1. #1
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    24
    Vote Rating
    1
    richardsugg is on a distinguished road

      0  

    Question cannot add a Container to a viewport

    cannot add a Container to a viewport


    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:

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

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

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

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,921
    Vote Rating
    632
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    You need to callParent() in your MainHeader initComponent. Alternatively, if you aren't modifying any behaviour, don't override the function at all.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    24
    Vote Rating
    1
    richardsugg is on a distinguished road

      0  

    Default


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

Thread Participants: 1