extjs 4门户示例

Question

我想说的是，我正在努力理解ExtJS 4中的门户演示。有人能给我提供一个容器的通用示例以及如何添加portlet项吗？当我进行搜索时，随下载提供的文档没有门户或portlet一词。当我查看示例的源代码时，还有一些类文件和额外的CSS文件。这些都是必需的吗？我搜索了整个网络，似乎只发现其他人在问同样的问题。任何帮助，甚至是extjs4的演示链接，都将不胜感激。也许我的googlefoo不够用了？

当我使用演示并开始修改边框布局时，我遇到了各种各样的问题。中心区域不能包含选项卡面板，我对东、西、北区域使用折叠布局。似乎有一个问题与西部地区和手风琴布局，因为它不能正确显示。手风琴就像是半开着的，里面的任何图像都不会显示，除非你折叠然后重新打开。有没有人能给我提供一个例子，说明如何在没有任何附加功能的情况下制作一个基本的门户网站？下面是我使用的代码，它不能正常工作，但在仅使用视窗时显示和工作正常(除了门户部分)。

以下是一些示例代码

Ext.define('Ext.app.Portal', {

    extend: 'Ext.container.Viewport',

    uses: ['Ext.app.PortalPanel'],

    initComponent: function(){
        Ext.apply(this, Ext.create('Ext.Viewport', {
            id: 'main-viewport',
            layout: {
                type: 'border',
                padding: '0 5 5 5'
            },
            items: [{
                title: 'My Notifications',
                id: 'My-Notifications-Panel',
                region: 'north',
                height: 300,
                split: true,
                collapsible: true,
                collapsed: true,
                margins: '0 0 0 0',
                layout: 'accordion',
                items: [
                {
                    title: 'Alerts'
                },{
                    title: 'Communications'
                }
                ]
            },{
                title: 'My Support',
                id: 'My-Support-Panel',
                region: 'east',
                width: 140,
                collapsible: true,
                collapsed: true,
                margins: '0 0 0 0',
                layout: 'column',
                autoScroll: true,
                defaults: {
                    margins: '10 5 0 0',
                    xtype: 'panel',
                    height: 100,
                    width: '100%',
                    headerPosition: 'bottom',
                    border: false,
                    cls: 'myicon',
                    bodyStyle: 'background-image: url(images/icon.png); background-repeat: no-repeat; background-position: center;'
                },
                items:[
                    {
                        title: 'Customer Services'
                    },{
                        title: 'Technical Support',
                        listeners: {
                            afterrender: function(c){
                                c.el.on('click', function(){
                                    CreateChatSession();
                                    Ext.getCmp('My-Support-Chat-Panel').update('<iframe width="100%" height="700" src="/pub/" frameborder="0"></iframe>');
                                });
                            }
                        }
                    }
                ]
            },{
                xtype: 'panel',
                region: 'west',
                collapsible: true,
                collapsed: true,
                title: 'My Apps',
                width: 275,
                layout:'accordion',
                split: true,
                margins: '0 0 0 0',
                defaults: {
                    bodyStyle: 'padding:15px',
                    layout: 'column'
                },
                items: [{
                    title: 'Internal Apps',
                    defaults: {
                        padding: '5 5 5 5',
                        xtype: 'panel',
                        height: 100,
                        width: 80,
                        headerPosition: 'bottom',
                        border: false,
                        cls: 'myicon',
                        bodyStyle: 'background-image: url(images/icon.png); background-repeat: no-repeat; background-position: center;'
                    },
                    items: []
                },{
                    title: 'Favorites',
                    defaults: {
                        padding: '5 5 5 5',
                        xtype: 'panel',
                        height: 100,
                        width: 80,
                        headerPosition: 'bottom',
                        border: false,
                        cls: 'myicon',
                        bodyStyle: 'background-image: url(images/icon.png); background-repeat: no-repeat; background-position: center;'
                    },
                    items: []
                },{
                    title: 'Reporting',
                    defaults: {
                        padding: '5 5 5 5',
                        xtype: 'panel',
                        height: 100,
                        width: 80,
                        headerPosition: 'bottom',
                        border: false,
                        cls: 'myicon',
                        bodyStyle: 'background-image: url(images/icon.png); background-repeat: no-repeat; background-position: center;'
                    },
                    items: []
                }]
            },
                Ext.create('Ext.tab.Panel', {
                    region: 'center',
                    layout: 'fit',
                    items: [{
                        id: 'Workspace-1',
                        title: 'Workspace 1',
                        layout: 'fit',
                        items: [{
                            id: 'app-portal',
                            xtype: 'portalpanel',
                            region: 'center',
                            items: [{
                                id: 'col-1',
                                items: [{
                                    id: 'portlet-2',
                                    title: 'Portlet 2',
                                    listeners: {
                                        'close': Ext.bind(this.onPortletClose, this)
                                    }
                                }]
                            },{
                                id: 'col-2',
                                items: [{
                                    id: 'portlet-3',
                                    title: 'Portlet 3',
                                    listeners: {
                                        'close': Ext.bind(this.onPortletClose, this)
                                    }
                                }]
                            }]
                        }]
                    }]
                })
            ]
        }));
        this.callParent(arguments);
    }
});

Answer 1

这是在中心区域带有选项卡的门户示例

希望这能对你有所帮助。

Ext.define('Ext.app.Portal', {

    extend: 'Ext.container.Viewport',

    getTools: function() {
        return [{
            xtype: 'tool',
            type: 'gear',
            handler: function(e, target, panelHeader, tool) {
                var portlet = panelHeader.ownerCt,
                    el = portlet.getEl();

                el.mask('Working...');
                Ext.defer(el.unmask, 2000, el);
            } //eo handler function
        }]; //eo return
    }, //eo get tools

    initComponent: function() {

        var content = '<div class="portlet-content">' + Ext.example.shortBogusMarkup + '</div>';

        Ext.apply(this, {
            id: 'app-viewport',
            layout: {
                type: 'border',
                padding: '0 5 5 5'
            }, //eo layout
            items: [{ //header : item 1 of app-viewport
                    id: 'app-header',
                    xtype: 'box',
                    region: 'north',
                    height: 50,
                    html: 'myPortal'
                },
                { //container : item 2 of app-viewport
                    xtype: 'container',
                    region: 'center',
                    layout: 'border',
                    items: [{ //options: item 1 of container
                            id: 'app-options',
                            title: 'Options',
                            region: 'west',
                            animCollapse: true,
                            width: 200,
                            minWidth: 150,
                            maxWidth: 400,
                            split: true,
                            collapsible: true,
                            layout: 'accordion',
                            layoutConfig: {
                                animate: true
                            },
                            items: [{ //item 1 of app-options

                                    title: 'title',
                                    autoScroll: true,
                                    border: false,
                                    iconCls: 'nav',
                                    items: [{
                                        xtype: 'treepanel',
                                        useArrows: true,
                                        autoScroll: true,
                                        animate: true,
                                        enableDD: true,
                                        containerScroll: true,
                                        border: false,
                                        region: 'west',
                                        split: true,

                                        listeners: {
                                            click: function(n) {
                                                Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
                                            }
                                        }
                                        /*Dashboard
                                        MultiServices
                                        Reporting
                                        Global Options
                                        */
                                    }]

                                },
                                { //settings : item 2 of app-options
                                    title: 'Settings',
                                    html: '<div class="portlet-content">' + 'details ??' + '</div>',
                                    border: false,
                                    autoScroll: true,
                                    iconCls: 'settings'
                                }
                            ] //eo items options
                        },
                        { //item 2 of container
                            id: 'tabpanel1', // id: 'app-portal',  ???
                            xtype: 'tabpanel',
                            activeTab: 0,
                            region: 'center',
                            items: [{
                                title: 'tab1',
                                layout: 'column', //
                                closable: true,
                                items: [{
                                    id: 'col-1',
                                    columnWidth: 0.5,
                                    flex: 1,
                                    items: [{
                                        id: 'portlet-1',
                                        title: 'Grid Portlet',
                                        tools: this.getTools(),
                                        items: new 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)
                                        }
                                    }] //eo col-1
                                }, {
                                    id: 'col-2',
                                    columnWidth: 0.5,
                                    flex: 1,
                                    items: [{
                                        id: 'portlet-3',
                                        title: 'Portlet 3',
                                        tools: this.getTools(),
                                        html: '<div class="portlet-content">' + Ext.example.bogusMarkup + '</div>',
                                        listeners: {
                                            'close': Ext.bind(this.onPortletClose, this)
                                        }
                                    }] //eo col-2
                                }, {
                                    id: 'col-3',
                                    columnWidth: 0.5,
                                    flex: 1,
                                    margins: '0 26 0 0',
                                    items: [{
                                        id: 'portlet-4',
                                        title: 'Chart Portlet',
                                        tools: this.getTools(),
                                        items: new Ext.app.ChartPortlet(),
                                        listeners: {
                                            'close': Ext.bind(this.onPortletClose, this)
                                        }
                                    }] //eo col-3
                                }] //eo tab1
                            }, {
                                title: 'tab2',
                                closable: true
                            }] //eo items tabpanel
                        }
                    ] //eo ietms container

                }
            ] //eo viewport
        }); //eo apply

        this.callParent(arguments);
    }, //eo initcomponent

    onPortletClose: function(portlet) {
        this.showMsg('"' + portlet.title + '" was removed');
    },

    showMsg: function(msg) {
        var el = Ext.get('app-msg'),
            msgId = Ext.id();

        this.msgId = msgId;
        el.update(msg).show();

        Ext.defer(this.clearMsg, 3000, this, [msgId]);
    },

    clearMsg: function(msgId) {
        if (msgId === this.msgId) {
            Ext.get('app-msg').hide();
        }
    }
});

编辑

或者你可以试试this example，我认为它更适合你的需要，让我知道。

Answer 2

-仅供阅读此门户布局的任何人使用，它不是官方框架的一部分，而是与库捆绑在一起的第三方扩展，这就是文档中没有它的原因。