添加门户内的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" 
        } 
       ] 
      });