javascript - 在 EXTJS 中的选项卡面板内添加 PORTAL : Using the Portal Demo by EXTJS

Question

我目前正在使用EXTjs的默认Portal Demo.. http://docs.sencha.com/ext-js/4-2/extjs-build/examples/portal/portal.html

谁能告诉我我们是否可以制作一个居中的 TabPanel，其中有 3 个选项卡，每个选项卡内部都有一个 Portal。

因此，在页面加载时，我们位于选项卡 1.. 这本质上是一个门户，我可以在其中拖放内容。与选项卡 2 相同。

在ExtJs提供的portal.js内部，我们有用于创建portalpanel的代码。一切正常，但现在我必须有一个选项卡面板而不是门户面板，本质上是选项卡面板内的门户面板。

显示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)
                            }
                        }]
                    }]
                }

如果我们能以某种方式在 tabpanel 内创建一个 portalpanel(使用现有的门户示例)，有什么想法吗？请帮忙!!!

Answer 1

你在ajas选项卡中使用ajax选项卡你的调用url，在该url中你显示的门户面板如下代码

            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"
                    }
                ]
            });