+ -
当前位置:首页 → 问答吧 → 关于EXTJS的Portal

关于EXTJS的Portal

时间:2008-08-05

来源:互联网

Extjs2.x新增加了Portal这个东西,很不错,用了下也还很方便

但是唯一美中不足的是不知道如何保存自定义面板布局,无论是保存在Cookie里也好还是保存在数据库里也好,都找不到如何解决

请达人帮忙了。
JScript code

 Ext.namespace("myzone.app");

myzone.app.Portaldemo = function() {

    /* ----------------------- private properties ----------------------- */
    var portId = 'app-portal-demo-res-portal';
    var settingId = 'app-portal-demo-ext-div';

    var portalState;
    var portalMgr;

    var tools = [{

        id : 'maximize',
        handler : handleMaximize
    }, {
        id : 'close',
        handler : function(e, target, panel) {
            panel.ownerCt.remove(panel, true);
        }
    }];

    /* ----------------------- private method ----------------------- */
    function handleMaximize(event, toolEl, panel) {
        panel.originalOwnerCt = panel.ownerCt;
        panel.originalPosition = panel.ownerCt.items.indexOf(panel);
        panel.originalSize = panel.getSize();

        if (!toolEl.window) {
            var defaultConfig = {
                id : (panel.getId() + '-MAX'),
                width : (Ext.getBody().getSize().width - 100),
                height : (Ext.getBody().getSize().height - 100),
                resizable : true,
                draggable : true,
                closable : true,
                closeAction : 'hide',
                hideBorders : true,
                plain : true,
                layout : 'fit',
                autoScroll : false,
                border : false,
                bodyBorder : false,
                frame : true,
                pinned : true,
                y:80,
                bodyStyle : 'background-color: #ffffff;'
            };
            toolEl.window = new Ext.Window(defaultConfig);
            toolEl.window.on('hide', handleMinimize, panel);
        }
        if (!panel.dummyComponent) {
            var dummyCompConfig = {
                title : panel.title,
                width : panel.getSize().width,
                height : panel.getSize().height,
                html : ' '
            };
            panel.dummyComponent = new Ext.Panel(dummyCompConfig);
        }

        toolEl.window.add(panel);
        if (panel.tools['toggle'])
            panel.tools['toggle'].setVisible(false);
        if (panel.tools['close'])
            panel.tools['close'].setVisible(false);
        panel.tools['maximize'].setVisible(false);

        panel.originalOwnerCt.insert(panel.originalPosition,
                panel.dummyComponent);
        panel.originalOwnerCt.doLayout();
        panel.dummyComponent.setSize(panel.originalSize);
        panel.dummyComponent.setVisible(true);
        panel.dummyComponent.getEl().mask('it is maximized');
        toolEl.window.show(this);
    };

    function handleMinimize(window) {
        this.dummyComponent.getEl().unmask();
        this.dummyComponent.setVisible(false);
        this.originalOwnerCt.insert(this.originalPosition, this);
        this.originalOwnerCt.doLayout();
        this.setSize(this.originalSize);
        this.tools['maximize'].setVisible(true);
        if (this.tools['toggle'])
            this.tools['toggle'].setVisible(true);
        if (this.tools['close'])
            this.tools['close'].setVisible(true);
    }
    
    function createLayout() {

        new Ext.Panel({

            renderTo : "Header",
            width : 1000,
            height : 170,
            frame : true,
            layout : 'column'
        });

        new Ext.Panel({

            renderTo : "Footer",
            width : 1000,
            height : 150,
            frame : true,
            autoLoad : './footer.jsp'
        });

        new Ext.Panel({

            frame : true,
            renderTo : "PageBody",
            width : 1000,
            height : 1500,
            layout : 'border',
            // bodyStyle : 'x-layout-collapsed-north',
            items : [{
                region : 'north',
                split : true,
                height : 100,

                width : 800,
                title : '模块设置',
                frame : true,
                collapsed : true,
                collapsible : true,
                /* 动画效果收缩的时间 */
                expandDefaults : {
                    duration : .75
                },
                collapseDefaults : {
                    duration : .85
                }
            }, {
                xtype : 'portal',
                region : 'center',
                margins : '5 5 5 5',

                items : [{
                    columnWidth : .25,
                    style : 'padding:10px 0 10px 10px',
                    items : [{

                        title : '<img src="../../images/icon/ico_clock.gif">时钟',
                        html : '<embed src="http://localhost:8080/YiZhong/flash/clock.swf" width="120" height="40" type="application/x-shockwave-flash" wmode="transparent" style=" margin-top:15px; margin-left:50px"></embed>',
                        tools : tools,
                        expandDefaults : {
                            duration : .75
                        },
                        collapseDefaults : {
                            duration : .85
                        },
                        height : 100
                    }, {

                        title : '<img src="../../images/icon/ico_person.gif">个人档案',
                        tools : tools,
                        height : 400,

                        autoLoad : './c_userthing.html',
                        expandDefaults : {
                            duration : .75
                        },
                        collapseDefaults : {
                            duration : .85
                        }
                    }, {
                        title : '<img src="../../images/icon/ico_blogtype.gif">日志分类',
                        tools : tools,
                        height : 300,
                        expandDefaults : {
                            duration : .75
                        },
                        collapseDefaults : {
                            duration : .85
                        }
                    }, {
                        title : '<img src="../../images/icon/ico_newgroup.gif">近期圈子活动',
                        tools : tools,
                        height : 350,
                        expandDefaults : {
                            duration : .75
                        },
                        collapseDefaults : {
                            duration : .85
                        }
                    }, {
                        title : '<img src="../../images/icon/ico_tj.gif">个人统计',
                        tools : tools,
                        height : 150,
                        expandDefaults : {
                            duration : .75
                        },
                        collapseDefaults : {
                            duration : .85
                        }
                    }]
                }, {
                    columnWidth : .5,
                    style : 'padding:10px 0 10px 10px',
                    items : [{
                        title : '<img src="../../images/icon/ico_blogc.gif">个人日志',
                        tools : tools,
                        html : "",
                        height : 600,
                        expandDefaults : {
                            duration : .75
                        },
                        collapseDefaults : {
                            duration : .85
                        }
                    }, {
                        title : '<img src="../../images/icon/ico_ghot.gif">圈子热帖',
                        tools : tools,
                        height : 350,
                        // autoLoad:'http://localhost:8080/YiZhong/flash/photo/index.htm',
                        expandDefaults : {
                            duration : .75
                        },
                        collapseDefaults : {
                            duration : .85
                        }
                    }, {
                        title : '<img src="../../images/icon/ico_note.gif">留言板',
                        tools : tools,
                        html : "",
                        height : 370,
                        expandDefaults : {
                            duration : .75
                        },
                        collapseDefaults : {
                            duration : .85
                        }
                    }]
                }, {

                    columnWidth : .25,
                    style : 'padding:10px',
                    items : [{
                        title : '<img src="../../images/icon/ico_seo.gif">搜索',
                        tools : tools,
                        html : '',
                        height : 150,
                        expandDefaults : {
                            duration : .75
                        },
                        collapseDefaults : {
                            duration : .85
                        }
                    }, {
                        title : '<img src="../../images/icon/ico_online.gif">在线好友',
                        tools : tools,
                        html : "",
                        height : 350,
                        expandDefaults : {
                            duration : .75
                        },
                        collapseDefaults : {
                            duration : .85
                        }
                    }, {
                        title : '<img src="../../images/icon/ico_renote.gif">最新评论',
                        tools : tools,
                        html : "",
                        height : 440,
                        expandDefaults : {
                            duration : .75
                        },
                        collapseDefaults : {
                            duration : .85
                        }
                    }, {
                        title : '<img src="../../images/icon/ico_nvi.gif">最近访客',
                        tools : tools,
                        html : "",
                        height : 370,
                        expandDefaults : {
                            duration : .75
                        },
                        collapseDefaults : {
                            duration : .85
                        }
                    }]
                }]
            }]

        });
    }//creatLayour
    
    /* ----------------------- public method ----------------------- */
    return{
    
        init : function(){
        
            Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
            
            createLayout();
            
            portalState = new myzone.app.PortalState();
            
            portalState.init(portId);
            
            
        }
    };
}();

Ext.onReady(myzone.app.Portaldemo.init,myzone.app.Portaldemo);

作者: tq04q5k   发布时间: 2008-08-05

楼主:请问现在解决这个问题了没有?

作者: zdb330906531   发布时间: 2010-09-30

http://www.360doc.com/content/09/1125/13/64359_9725416.shtml
http://www.vifir.com/portal.ejf?cmd=topicShow&id=2785280
官方的无法保存,可能是cookie没有记录

作者: IBM_hoojo   发布时间: 2010-09-30