View Full Version : View not appearing. Grid Tabpanel

13 Feb 2014, 10:29 AM
Dear experts.
Could you please help me with this.
I am trying to implement tabpanel with Grid.

What is happening is, the tabpanel appears momentarily, but it disappears immediately and shows a blank page. is it somehow overriding my Viewport.

Here is my structure of viewport.js

Ext.define('Report.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'fit',
initComponent: function () {

this.items = [
xtype: 'panel',
title: 'Duration Reports',
height: 5,
region: 'north',
closable: false,
hidden: false,
contentEl: 'headerContent'
xtype : 'leveragetab',
region : 'center'
xtype : 'panel',
region : 'south'

console.log("view editor was rendered");

here is my definition of OuterTab which uses alias as leveragetab that I am using in the center part of layout.

Ext.define('Report.view.tab.OuterTab', {
extend: 'Ext.tab.Panel',
id: 'leverageTab',
alias: 'widget.leveragetab',
width: 400,
height: 300,
defaults: {
bodyPadding: 10,
autoScroll: true
items: [{
title: 'Active Tab',
html: 'hi'
}, {
title: 'Inactive Tab',
html: 'hi'
}, {
title: 'Disabled Tab',
disabled: true

13 Feb 2014, 12:12 PM
It was something to do with the layout.
I am defining the layout as 'fit', when I changed it to border, it worked.

Thanks for looking anyway.

13 Feb 2014, 1:27 PM
Thanks for the follow up. Sometimes the simple things will get you ;)