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);
});
代码
