Portal 拖动 保存位置

随机排列后按保存，则portal拖动后用json串保存其拖动后的位置到Cookie，刷新时即为拖动后的排列。

若随机排列则此时清空之前Cookie的排列信息，刷新时为默认的排列。

 

版本Ext 3.0

将附件解压至ext-3.0.0\examples\文件夹下的即可运行.

 

 

		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) {
    for (var i = 0; i < rankInfo.length; i++) {
     for (var j = 0; j < pl.length; j++) {
      if (rankInfo[i].id == pl[j].id) {
                                                        //pl[j].height =400;//高度设置
       portal.items.get(rankInfo[i].col).add(pl[j]);
      }
     }
    }
    portal.doLayout();
   }			
			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);


		});