ExtJS Uncaught Type Error - need a simple solution re. a workaround for known issue

Question

Seems to be a problem adding a component to a viewport in extjs due to some known issue The ideal would be:

var paneltab = Ext.create('ROMLProjectAdmin.view.MainTabPanel');
Ext.getCmp('loginregister').destroy();
Ext.Viewport.add(paneltab);

An error occurs:

Uncaught TypeError: Object function constructor(){
  // Opera has some problems returning from a constructor when Dragonfly isn't running. The || null seems to
  // be sufficient to stop in misbehaving. Known to be required against 10.53, 11.51 and 11.61.
  return this.constructor.apply(this, arguments) || null;
} has no method 'add'

Found this on the web which explains what's going on but I don't fully understand how to implement the proposed solution using 'refs' as I'm a newbie. I wondered if someone could give me a simpler explanation.

Or, based on the failing code above, can someone please give me an alternative way to launch a tab panel (in this case user logged in and so that screen is done with and now to open the main tabs).

Thanks in advance.

Kevin

Answer 1

Ext.Viewport is just the class, you need an instance of that class in order to add components to it:

Ext.create('Ext.container.Viewport', {
    id: 'myviewport'
});

var paneltab = Ext.create('ROMLProjectAdmin.view.MainTabPanel');
Ext.getCmp('loginregister').destroy();
Ext.getCmp('myviewport').add(paneltab);