extJSタブがポータルレイアウトに表示されない

Question

私は、このhttp://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/portal/portal.htmlのようなポータルレイアウトのタブを持つウィンドウを構築しようとしています。ウインドウ、トップバー、フッタ、ラベル、コンボボックス、チャートはすべて表示されますが、タブをウィンドウに置くと表示されません。以下は私のコード

//portal.js that is calling 
Ext.define('Ext.app.Portal', { 

extend: 'Ext.container.Viewport', 

uses: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.RegHosts', 'Ext.app.ChartPortlet', 'Ext.app.RougeHosts'], 

getTools: function(){ 
    return [{ 
     xtype: 'tool', 
     type: 'gear', 
     handler: function(e, target, panelHeader, tool){ 
      var portlet = panelHeader.ownerCt; 
      portlet.setLoading('Working...'); 
      Ext.defer(function() { 
       portlet.setLoading(false); 
      }, 2000); 
     } 
    }]; 
}, 

initComponent: function(){ 
    var content = '<div class="portlet-content">'+Ext.example.shortBogusMarkup+'</div>'; 

    Ext.apply(this, { 
     id: 'app-viewport', 
     layout: { 
      type: 'border', 
      padding: '0 5 5 5' // pad the layout from the window edges 
     }, 

     items: [{ 
      id: 'app-header-complete', 
      xtype: 'box', 
      region: 'north', 
      height: 40, 
      html: '' 
     },{ 
      xtype: 'container', 
      region: 'center', 
      layout: 'border', 
      items: [{ 
       id: 'app-portal', 
       xtype: 'portalpanel', 
       region: 'center', 
       items: [{ 
        id: 'col-1', 
        items: [{ 
         id: 'regehosts', 

         title: 'Registered Hosts', 
         tools: this.getTools(), 
         items: Ext.create('Ext.app.RegeHosts'), 
         listeners: { 
          'close': Ext.bind(this.onPortletClose, this) 
         } 
        }] 
       },{ 
        id: 'col-2', 
        items: [{ 
         id: 'rouge', 
         title: 'Rouge Hosts', 
         tools: this.getTools(), 
         items: Ext.create('Ext.app.Rouge'), 
         listeners: { 
          'close': Ext.bind(this.onPortletClose, this) 
         } 
        }] 
       }, 
       { 
        id: 'col-3', 
        items: [{ 
         id: 'devices', 
         title: 'Devices', 
         tools: this.getTools(), 
         items: Ext.create('Ext.app.Devices'), 
         listeners: { 
          'close': Ext.bind(this.onPortletClose, this) 
         } 
        }] 
       } 
       ] 
      }] 
     }] 
    }); 
    this.callParent(arguments); 
}, 

onPortletClose: function(portlet) { 
    this.showMsg('"' + portlet.title + '" was removed'); 
}, 

showMsg: function(msg) { 
    var el = Ext.get('app-msg'), 
     msgId = Ext.id(); 

    this.msgId = msgId; 
    el.update(msg).show(); 

    Ext.defer(this.clearMsg, 3000, this, [msgId]); 
}, 

clearMsg: function(msgId) { 
    if (msgId === this.msgId) { 
     Ext.get('app-msg').hide(); 
    } 
} 
}); 













    // function contents that is called 

requires:["*"], 



    ,initComponent:function() 
    {Ext.apply(this,{layout: { 
     type: 'fit' 
    } 
    ,width:550,height:420,items: 
    [ 

    {xtype:"label",fieldLabel: text, name:'txt',text:text,  
     id:'devicesLabel',style:'width:300px;'}, 

{ 
xtype:'tabpanel', 
width: 400, 
    height: 400, 

    items: [{ 
    title: 'Foo' 
    }, { 
    title: 'Bar', 
    tabConfig: { 
     title: 'Custom Title', 
     tooltip: 'A button tooltip' 
    } 
    }] 

} 



    ] 


    });this.callParent(arguments)}}); 

Answer 1

は、私はあなたがフィットレイアウトのドキュメントを読むことをお勧めしたいですが、それが動作しない理由は、最初の行にある：あなたはレイアウトのいくつかの他の種類を使用する必要がhttp://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Fit

例えば、それらを並べて表示させるには、hboxを使います。お互いの上に、vboxを使用します。他にもいくつかのレイアウトがあり、レイアウトブラウザの例でその例を見ることができます。