在EXTJS中的TAB面板中添加门户:使用EXTJS的门户演示

Question

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

谁能告诉我，如果我们可以做一个居中的TabPanel，其中有3个选项卡，每个选项卡有一个门户网站。

因此，在页面加载中，我们在Tab 1上。它本质上是一个门户，我可以在其中拖放东西。选项卡2也是如此。

在ExtJs提供的portal.js内部，我们有用于创建portalpanel的代码。一切都正常，但现在我必须有一个tabpanel而不是一个门户面板，本质上是在选项卡面板中的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 (使用现有的门户示例) Please help!!!!，有什么想法吗？

Answer 1

当使用ajas选项卡中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"
                    }
                ]
            });