添加門戶內的EXTJS一個標籤面板：通過EXTJS

Question

使用門戶演示我目前正在使用的ExtJS的默認門戶演示.. http://docs.sencha.com/ext-js/4-2/extjs-build/examples/portal/portal.html

誰能告訴我，如果我們可以做一個居中的TabPanel其中有說3個標籤，並且每個選項卡都有一個Portal。

因此，在頁面加載，我們在選項卡1 ..其中本質上是一個門戶，我可以拖放東西。與表2相同。

在由ExtJs提供的portal.js中，我們有用於創建portalpanel的代碼。 一切正常，但現在我必須有一個Tabpanel而不是一個門戶面板，本質上，一個Tabpanel內的門戶面板。

與其中顯示portalpanel的代碼是：如果

Ext.define('Ext.app.Portal', { 
    extend: 'Ext.container.Viewport', 
    uses: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'], 
    initComponent: function(){ 
var content = '<div class="portlet-content">'+Ext.s.shortBogusMarkup+'</div>'; 
     Ext.apply(this, { 
      id: 'app-viewport', 
      layout: { 
       type: 'border', 
       padding: '0 5 5 5' 
      }, 
      items: [{ 
       id: 'app-header', 
       xtype: 'box', 
       region: 'north', 
       height: 40, 
       html: '<div></div>' 
      },{ 
       xtype: 'container', 
       region: 'center', 
       layout: 'border', 
       items: [{ 
        id: 'app-options', 
        title: 'All Widgets', 
        region: 'west', 
        animCollapse: true, 
        width: 200, 
        minWidth: 150, 
        maxWidth: 400, 
        split: true, 
        collapsible: true, 
        layout: 'accordion', 
        layoutConfig:{ 
         animate: true 
        }, 
        items: [{ 
         html: '<div class="portlet-content">'+Ext.s.example+'</div>', 
         title:'Tables', 
         autoScroll: true, 
         border: false, 
         iconCls: 'nav' 
        }, 
       { 
        id: 'app-portal', 
        xtype: 'portalpanel', 
        region: 'center', 
        items: [{ 
         id: 'col-1', 
         items: [{ 
          id: 'portlet-1', 
          title: 'Grid Portlet', 
          tools: this.getTools(), 
          items: Ext.create('Ext.app.GridPortlet'), 
          listeners: { 
           'close': Ext.bind(this.onPortletClose, this) 
          } 
         },{ 
          id: 'portlet-2', 
          title: 'Portlet 2', 
          tools: this.getTools(), 
          html: content, 
          listeners: { 
           'close': Ext.bind(this.onPortletClose, this) 
          } 
         }] 
        },{ 
         id: 'col-2', 
         items: [{ 
          id: 'portlet-3', 
          title: 'Portlet 3', 
          tools: this.getTools(), 
          html: '<div class="portlet-content">'+Ext.smartdashboard.bogusMarkup+'</div>', 
          listeners: { 
           'close': Ext.bind(this.onPortletClose, this) 
          } 
         }] 
        },{ 
         id: 'col-3', 
         items: [{ 
          id: 'portlet-4', 
          title: 'Stock Portlet', 
          tools: this.getTools(), 
          items: Ext.create('Ext.app.ChartPortlet'), 
          listeners: { 
           'close': Ext.bind(this.onPortletClose, this) 
          } 
         }] 
        }] 
       } 

任何想法人我們可以（使用現有門戶示例） Please help!!!!

Answer 1

烏爾使用AJAX某種方式創建portalpanel一個tabpanel內標籤在阿賈斯標籤烏拉圭呼籲網址，在該網址你顯示門戶面板如下代碼

  var tabs2 = Ext.widget('tabpanel', { 
       renderTo: document.body, 
       activeTab: 0, 
       width: 600, 
       height: 250, 
       plain: true, 
       defaults :{ 
        autoScroll: true, 
        bodyPadding: 10 
       }, 
       items: [{ 
         title: 'Normal Tab', 
         html: "My content was added during construction." 
        },{ 
         title: 'Ajax Tab 1', 
         loader: { 
          url: 'ajax1.htm', 
          contentType: 'html', 
          loadMask: true 
         }, 
         listeners: { 
          activate: function(tab) { 
           tab.loader.load(); 
          } 
         } 
        },{ 
         title: 'Ajax Tab 2', 
         loader: { 
          url: 'ajax2.htm', 
          contentType: 'html', 
          autoLoad: true, 
          params: 'foo=123&bar=abc' 
         } 
        },{ 
         title: 'Event Tab', 
         listeners: { 
          activate: function(tab){ 
           setTimeout(function() { 
            alert(tab.title + ' was activated.'); 
           }, 1); 
          } 
         }, 
         html: "I am tab 4's content. I also have an event listener attached." 
        },{ 
         title: 'Disabled Tab', 
         disabled: true, 
         html: "Can't see me cause I'm disabled" 
        } 
       ] 
      });