`
fireinjava
  • 浏览: 481334 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

Portal 拖动 保存位置 

    博客分类:
  • Ext
阅读更多

随机排列后按保存,则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);


		});

 

5
0
分享到:
评论
2 楼 花瓣雨 2012-07-12  
非常好,感谢原创作者
1 楼 windywindy 2010-07-09  
这东西有用,把3.0的js库拖到2.2上就可以用了!

相关推荐

    jQuery EasyUI Portal 保存拖动位置,仿谷歌DashBoard效果的

    总之,通过结合jQuery EasyUI Portal组件和数据持久化技术,我们可以创建一个具有自定义布局和拖放保存位置功能的用户界面,类似于谷歌Dashboard。在实际应用中,这将极大地提升用户体验,让个性化设置变得更加便捷...

    可拖拽布局组件easyui-portal

    用户可以简单地通过鼠标拖动来移动页面上的元素,系统会自动保存这些自定义布局,以便用户在后续访问时能快速恢复到自己习惯的界面状态,极大地提升了用户体验。 其次,`EasyUI-Portal`支持多种信息源的集成。在...

    基于jquery实现的portal 拖拽实现布局调整

    4. **数据同步**:当元素的位置改变时,需要更新服务器端的数据以保存新布局。这可能通过Ajax请求完成,将新的元素顺序发送给后端。 5. **用户体验优化**:添加视觉反馈,如拖动时的阴影效果、元素移动时的指示等,...

    jQuery支持自定义拖拽布局插件Portal.zip

    5. **更新布局**:当拖放操作完成后,需要根据新的位置信息更新布局,这可能涉及到计算元素的新坐标、调整相邻元素的位置,甚至可能需要触发Ajax请求以保存新的布局信息。 对于“jQuery支持自定义拖拽布局插件...

    jQuery布局插件portal.zip

    在jQuery布局插件Portal中,jQuery的基本功能被充分利用,为用户提供了一种直观的方式来控制和调整页面元素的位置和样式。 **布局原理** Portal插件利用CSS定位技术(如绝对定位、相对定位)来实现布局。它将页面...

    ext portal

    拖拽时记录位置的功能使得用户可以个性化配置他们的仪表板,保存后,这些配置信息可以被持久化,以便下次打开时恢复用户的自定义设置。 在实际应用中,使用"portal.js"时,开发者需要遵循Ext JS的编程模式,创建...

    通过cookie保存portal的位置和grid的列的顺序,以及grid的列是否显示的保存

    "通过cookie保存portal的位置和grid的列的顺序,以及grid的列是否显示的保存"这个主题涉及了网页状态管理、用户偏好存储以及前端数据展示等多个知识点。下面我们将详细探讨这些内容。 首先,**Cookie** 是一种用于...

    Jquery UI 搭建的Portal

    3. **保存和加载布局**:当用户更改布局后,将新的位置和大小信息保存到服务器,可以是Session或数据库。同时,设计一个接口用于加载用户的布局设置。 4. **用户身份验证和授权**:确保只有登录用户才能保存和加载...

    Ajax-Portal-模块拖放

    在"使用帮助.html"中,可能详细介绍了如何操作Ajax-Portal中的模块拖放功能,包括如何选择、拖动模块以及如何保存和恢复布局设置。这通常是通过简单的用户界面元素,如鼠标悬停提示、拖放图标和确认对话框来实现的。...

    Extjs Portal 托拽并保持cookie

    1. **监听拖放事件**:当portlet被拖动并释放到新位置时,系统需要捕获这个事件。 2. **生成位置数据**:根据portlet的新位置,生成相应的坐标数据或序列信息。 3. **创建cookie**:使用JavaScript的`document....

    jQuery开发的轻量级门户(Portal)框架

    3. **拖拽功能**:用户可以通过拖动来调整页面上的模块位置,实现动态布局。 4. **可扩展性**:jPolite支持添加自定义模块,方便地扩展和整合各种功能。 5. **个性化配置**:用户可以根据个人喜好保存和加载不同的...

    TIA博途中库类型和库元素的基本使用方法介绍.docx

    - 使用库元素:将库元素拖拽到项目中的适当位置即可。 ##### 2. 全局库 全局库是一种独立于项目之外的库类型,可以被多个项目共享。这意味着一旦创建了全局库,就可以在不同的项目中使用相同的库元素,极大地提高...

    S7-1500(T) 对V90 PN进行位置控制的三种方法1500V90PositionControl3.pdf

    TIA博途(Totally Integrated Automation Portal)是西门子提供的自动化设计软件,它支持整个自动化系统的配置、编程和调试过程,能够高效地处理S7-1500 PLC和V90 PN伺服驱动器的配置与通信设置。 综上所述,西门子...

    TIA博途WinCC通过VB脚本从 Excel中读取数据的具体方法介绍.docx

    - 创建一个名为“ReadExcel.xlsx”的Excel文件,并将其保存到指定的位置,如D:\WinCCReport文件夹下。 - 文件名称和路径可以根据实际需求进行调整,但务必保持一致。 2. **填充Excel文件**: - 在Excel文件的第...

    TIA博途选型工具Selection Tool的基本使用方法介绍.docx

    添加后的模块可以自由拖拽调整它们在机架上的位置。 完成所有组件的选择和配置后,点击“订单列表”,此处将列出所有已添加设备的详细信息,包括型号、规格、订货号等。为了方便后续的采购或报价,你可以选择“导出...

    iOS_Cookbook_第一章_基础入门_2012_05_02.pdf

    4. **填写信息**: 按照提示填写项目名称、组织名称、组织标识符等信息,并选择保存路径。 5. **构建和运行**: 使用模拟器或连接的iOS设备来运行新创建的应用程序。 **1.1.3 讨论** - **项目结构**: 创建项目后,你...

Global site tag (gtag.js) - Google Analytics