1

現在、EXTjs のデフォルトの Portal Demo を使用しています。http://docs.sencha.com/ext-js/4-2/extjs-build/examples/portal/portal.html

3 つのタブがあり、各タブの内部にポータルがある Centered TabPanel を作成できるかどうか、誰か教えてください。

ページのロードでは、タブ 1 を使用しています。これは基本的に、ドラッグ アンド ドロップできるポータルです。タブ 2 も同様です。

ExtJs が提供する portal.js の内部には、portalpanel. すべてが機能しますが、ポータル パネルの代わりに 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)
                            }
                        }]
                    }]
                }

(既存のポータルの例を使用して) どうにかしてportalpanel内部を作成できるかどうかのアイデアtabpanelPlease help!!!!

4

1 に答える 1

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"
                    }
                ]
            });
于 2013-03-20T12:59:27.460 に答える