extjs portal 保存 事件

 

        Ext.onReady(function() {

            var tools = [{
                        id : 'gear',
                        handler : function() {
                            alert('?');
                        }
                    }, {
                        id : 'close',
                        handler : function(e, target, panel) {
                            panel.ownerCt.remove(panel, true);
                        }
                    }];

            var pl = [{
                        id : '001',
                        title : 'Panel 1',
                        layout : 'fit',
                        tools : tools,
                        html : '3'
                    }, {
                        id : '002',
                        title : 'Panel 2',
                        tools : tools,
                        html : '2'
                    }, {
                        id : '003',
                        title : 'Panel 3',
                        tools : tools,
                        html : '3'
                    }, {
                        id : '004',
                        title : 'Panel 4',
                        tools : tools,
                        html : '4'
                    }, {
                        id : '005',
                        title : 'Panel 5',
                        tools : tools,
                        html : '5'
                    }, {
                        id : '006',
                        title : 'Panel 6',
                        tools : tools,
                        html : '6'
                    }];

            var portal = new Ext.ux.Portal({
                        region : 'center',
                        margins : '35 5 5 0',
                        items : [{
                                    columnWidth : .33,
                                    style : 'padding:10px 0 10px 10px',
                                    items : []
                                }, {
                                    columnWidth : .33,
                                    style : 'padding:10px 0 10px 10px',
                                    items : []
                                }, {
                                    columnWidth : .33,
                                    style : 'padding:10px',
                                    items : []
                                }],
                         tbar :['-',{
                                      text:'随机排列并清除Cookie,刷新则回到默认',
                                      iconCls : 'save',
                                                 handler :initRandom
                                     },'-',
                                     {
                                      text:'保存排列到Cookie,刷新则保持当前状态',
                                      iconCls : 'save',
                                               handler :savePosition
                                     }
                               ]

                    });

            var viewport = new Ext.Viewport({
                        layout : 'fit',
                        items : [portal]
                    });

            function savePosition() {
                var result = [];
                var items = portal.items;
                for (var i = 0; i < items.getCount(); i++) {
                    var c = items.get(i);
                    c.items.each(function(portlet) {
                                var o = {
                                    id : portlet.getId(),
                                    col : i
                                };
                                result.push(o);    ;
                            });
                }
                setCookie(Ext.encode(result));
                alert("以下json串保存到数据库即可记住各自位置:"+Ext.encode(result));
            }
            
            var cookieName = 'rankInfo';
            
            function setCookie(info) {
                var expiration = new Date((new Date()).getTime() + 15 * 60000);
                document.cookie = cookieName + "=" + info + "; expires ="+ expiration.toGMTString();
            }
            
            function getCookie() {
                var allcookies = document.cookie;
                var cookie_pos = allcookies.indexOf(cookieName);
                if(cookie_pos!=-1){
                        cookie_pos += cookieName.length + 1;
                        var cookie_end = allcookies.indexOf(";", cookie_pos);
                        var rankInfo = allcookies.substring(cookie_pos, cookie_end);
                        return rankInfo;
                    }
                return null;
            }
            
            function delCookie(){
            var exp = new Date();
            exp.setTime(exp.getTime() - 1);
            var cval=getCookie(cookieName);
            if(cval!=null) document.cookie= cookieName + "="+cval+";expires="+exp.toGMTString();
            }

            
            removeAll = function(){
                var items = portal.items;
                for (var i = 0; i < items.getCount(); i++) {
                     var c = items.get(i);
                     c.items.each(function(portlet){
                           c.remove(portlet);
                     });
                }            
            }
            
init = function(rankInfo) {
&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i < rankInfo.length; i++) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var j = 0; j < pl.length; j++) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (rankInfo[i].id == pl[j].id) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //pl[j].height =400;//高度设置
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;portal.items.get(rankInfo[i].col).add(pl[j]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;portal.doLayout();
&nbsp;&nbsp;&nbsp;}            
            function initRandom(){
                 var rankRandom = [{"id" : "001","col" : parseInt(Math.random()*3)}, 
                         {"id" : "002","col" : parseInt(Math.random()*3)}, 
                         {"id" : "003","col" : parseInt(Math.random()*3)}, 
                          {"id" : "004","col" : parseInt(Math.random()*3)}, 
                          {"id" : "005","col" : parseInt(Math.random()*3)}, 
                         {"id" : "006","col" : parseInt(Math.random()*3)}];
                 removeAll();
                 delCookie();
                 init(rankRandom);
            }
            
            
            var rankInfoDefault=[{"id" : "001","col" : 0}, {"id" : "002","col" : 0}, {"id" : "003","col" : 0}, {"id" : "004","col" : 0}, {"id" : "005","col" : 0}, {"id" : "006","col" : 0}];
            
            eval("var rankInfo_cookie ="+ getCookie());
            init(rankInfo_cookie==null?rankInfoDefault:rankInfo_cookie);


        });