浏览 400 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
时间：2008-08-05
看了几位大侠的例子还是没搞明白如何保存Portal的布局和状态，触发事件的资料也很少。
我想能不能给我一个小例子，说明下原理，Portal里的子节点好像和一般的DD实例都不一样， 保存的时候光是用Manager是没法保存的。
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);
我送用的Portal是EXT官方那个Portal2的js文件 声明：JavaEye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
|
| 返回顶楼 | |
|
时间：2008-08-06
|
| 返回顶楼 | |
|
时间：2008-08-07
呵呵，如果列数等方面都变了呢？我是用数据库来保存的，等这个项目结束后，我会开源。
|
| 返回顶楼 | |
|
时间：2008-08-08
可以参考一下FaceYe中对portal功能的处理 ,FaceYe中将所有的Portal定位,拖动,容器中portlet的数量,配置信息全部存储入数据库,并且做了大量的功能性实现,包括任意加载feed,blog模块等.真正实现了portlet的动态加载,动态保存,以及位置的随意拖动.
关于FaceYe的更多预览图可以参考:http://papa.javaeye.com FaceYe代码现在可以从http://faceye.googlecode.com下载. |
| 返回顶楼 | |
