portal 源代码

portal作为一个可以自定义拖动元素的的元件，功能不错，现在将代码贴在这里以后再研究研究。

/** Ext JS Library 2.0.2* Copyright(c) 2006-2008, Ext JS, LLC.* licensing@extjs.com** http://extjs.com/license*/Ext.ux.Portal = Ext.extend(Ext.Panel, {layout : 'column',autoScroll : true,cls : 'x-portal',defaultType : 'portalcolumn',initComponent : function() {Ext.ux.Portal.superclass.initComponent.call(this);this.addEvents({validatedrop : true,beforedragover : true,dragover : true,beforedrop : true,drop : true});},initEvents : function() {Ext.ux.Portal.superclass.initEvents.call(this);this.dd = new Ext.ux.Portal.DropZone(this, this.dropConfig);}
});
Ext.reg('portal', Ext.ux.Portal);Ext.ux.Portal.DropZone = function(portal, cfg) {this.portal = portal;Ext.dd.ScrollManager.register(portal.body);Ext.ux.Portal.DropZone.superclass.constructor.call(this, portal.bwrap.dom, cfg);portal.body.ddScrollConfig = this.ddScrollConfig;
};Ext.extend(Ext.ux.Portal.DropZone, Ext.dd.DropTarget, {ddScrollConfig : {vthresh : 50,hthresh : -1,animate : true,increment : 200},createEvent : function(dd, e, data, col, c, pos) {return {portal : this.portal,panel : data.panel,columnIndex : col,column : c,position : pos,data : data,source : dd,rawEvent : e,status : this.dropAllowed};},notifyOver : function(dd, e, data) {var xy = e.getXY(), portal = this.portal, px = dd.proxy;// case column widthsif (!this.grid) {this.grid = this.getGrid();}// handle case scroll where scrollbars appear during dragvar cw = portal.body.dom.clientWidth;if (!this.lastCW) {this.lastCW = cw;} else if (this.lastCW != cw) {this.lastCW = cw;portal.doLayout();this.grid = this.getGrid();}// determine columnvar col = 0, xs = this.grid.columnX, cmatch = false;for (var len = xs.length; col < len; col++) {if (xy[0] < (xs[col].x + xs[col].w)) {cmatch = true;break;}}// no match, fix last indexif (!cmatch) {col--;}// find insert positionvar p, match = false, pos = 0, c = portal.items.itemAt(col), items = c.items.items;for (var len = items.length; pos < len; pos++) {p = items[pos];var h = p.el.getHeight();if (h !== 0 && (p.el.getY() + (h / 2)) > xy[1]) {match = true;break;}}var overEvent = this.createEvent(dd, e, data, col, c, match && p ? pos : c.items.getCount());if (portal.fireEvent('validatedrop', overEvent) !== false && portal.fireEvent('beforedragover', overEvent) !== false) {// make sure proxy width is fluidpx.getProxy().setWidth('auto');if (p) {px.moveProxy(p.el.dom.parentNode, match ? p.el.dom : null);} else {px.moveProxy(c.el.dom, null);}this.lastPos = {c : c,col : col,p : match && p ? pos : false};this.scrollPos = portal.body.getScroll();portal.fireEvent('dragover', overEvent);return overEvent.status;;} else {return overEvent.status;}},notifyOut : function() {delete this.grid;},notifyDrop : function(dd, e, data) {delete this.grid;if (!this.lastPos) {return;}var c = this.lastPos.c, col = this.lastPos.col, pos = this.lastPos.p;var dropEvent = this.createEvent(dd, e, data, col, c, pos !== false ? pos : c.items.getCount());if (this.portal.fireEvent('validatedrop', dropEvent) !== false && this.portal.fireEvent('beforedrop', dropEvent) !== false) {dd.proxy.getProxy().remove();dd.panel.el.dom.parentNode.removeChild(dd.panel.el.dom);if (pos !== false) {c.insert(pos, dd.panel);} else {c.add(dd.panel);}c.doLayout();this.portal.fireEvent('drop', dropEvent);// scroll position is lost on drop, fix itvar st = this.scrollPos.top;if (st) {var d = this.portal.body.dom;setTimeout(function() {d.scrollTop = st;}, 10);}}delete this.lastPos;},// internal cache of body and column coordsgetGrid : function() {var box = this.portal.bwrap.getBox();box.columnX = [];this.portal.items.each(function(c) {box.columnX.push({x : c.el.getX(),w : c.el.getWidth()});});return box;}
});//============================================================================================================================
/**这里定义了 一个  继承自 panel 的  自定义 panel** portlet**/Ext.ux.Portlet = Ext.extend(Ext.Panel, {anchor : '100%',frame : true, //显示框架collapsible : true, //可折叠draggable : true, //可拖动cls : 'x-portlet'
});
Ext.reg('portlet', Ext.ux.Portlet);//=============================-===================================================================================================================
/***这里  定义了一个 基本 类型为 portlet 自定义 panel 的 自定义容器类型** portalcolumn**  **/
Ext.ux.PortalColumn = Ext.extend(Ext.Container, {layout : 'anchor',autoEl : 'div',defaultType : 'portlet',cls : 'x-portal-column'
});
Ext.reg('portalcolumn', Ext.ux.PortalColumn);//--------------------------------------------------------------------------------------------------------------------------------------

调用实现

/** 整个包含了 一个  可动态 拖动 panel 的实例* */Ext.onReady(function() {// Ext.state.Manager.setProvider(new Ext.state.CookieProvider());// 自定义 工具条var tools = [{id : 'gear',handler : function() {Ext.Msg.alert('Message', 'The Settings tool was clicked.');}}, {id : 'close',handler : function(e, target, panel) {panel.ownerCt.remove(panel, true);}}];/**浏览器视口**/var viewport = new Ext.Viewport({title : "ViewPort",layout : 'border',items : [{//这个是  边 部菜单region : 'west',id : 'west-panel',title : '整个是可收缩菜单',split : true,width : 200,minSize : 175,maxSize : 400,collapsible : true,margins : '35 0 5 5',cmargins : '35 5 5 5',layout : 'accordion',layoutConfig : {animate : true},items : [{title : '菜单',html : "整个是 html ",autoScroll : true, //自动 滚动条border : true, //边框iconCls : 'nav'}, {title : 'Settings',title : "设置",html : "这里是设置菜单",border : false,autoScroll : true,iconCls : 'settings'}]}, {// 可 拖动的区域xtype : 'portal',region : 'center',  //布局方式 ,类似于 java 中 anchor， 有 东 西 南 北 中 margins : '35 5 5 0',/**这里边   为 可拖动的 控件**/items : [{columnWidth : .33,style : 'padding:10px 0 10px 10px',items : [{title : '可移动表格',layout : 'fit',tools : tools,items:new SampleGrid([0, 2, 3])}, {title : '国内新闻',tools : tools,html : "<p>人民网北京11月3日电 据中国气象局网站消息<br/>预计3日20时至4日20时，内蒙古中东部偏南地区、河北西北部、山西东北部、北京西部等地有大雪，其中内蒙古中东部偏南地区、河北西北部、北京西部山区等地的部分地区有暴雪（10～20毫米），河北西北部局地有大暴雪（20～30毫米）。降雪等级标准：以24小时降水量为划分标准，其中，降水量达到5.0～9.9毫米为大雪，降水量达到或超过10毫米为暴雪。降雪量与积雪深度的对应关系：当降雪落地后无融化时，一般而言，在北方地区1毫米降雪可形成的积雪深度有8～10毫米，在南方地区积雪深度有6～8毫米。防御指南：1.政府及相关部门按照职责做好防雪灾和防冻害的应急工作；2.交通、铁路、电力、通信等部门应当加强道路、铁路、线路巡查维护，做好道路清扫和积雪融化工作；3.减少不必要的户外活动；4.加固棚架等易被雪压的临时搭建物，将户外牲畜赶入棚圈喂养。</p>",}]}, {columnWidth : .33,style : 'padding:10px 0 10px 10px',items : [{title : '国际新闻',tools : tools,html : "<img style=\"width:400px;height:200px;\" src=\"http://www.cnr.cn/newscenter/fun/yuleyaowen/201211/W020121103693026149926.jpg\"/><br/>当地时间11月2日中午，在世界文坛上颇有影响的华裔女作家韩素音在瑞士洛桑的寓所无疾而终，享年96岁。这是韩素音女士2007年9月21日在瑞士洛桑寓所的资料照片。 新华社记者杨京德摄",}]}, {columnWidth : .33,style : 'padding:10px',items : [{title : '军事新闻',tools : tools,html : "新华网天津１１月２日（记者张毅 孙洪磊）作为军转民的重要成果，１１月２日，中国兵器工业集团公司所属武重集团将一批国产重大装备产品，正式交付给位于天津滨海重机工业园区内的天津赛瑞公司。此次交付的重大装备包括数控重型立式车床、龙门镗铣床、卧式铣车床等多个品种的产品，总价值２亿元。这些国产重大装备形成了强大的机械加工阵势，彰显出中国兵器工业集团在我国机床行业及超重型机床制造领域的重要地位。此次交付的高难度高技术机床制造设备，创出多项世界之最。ＣＫＸ５３２８０型立式铣车床，最大加工直径１４米，加工规格为世界之最。ＤＬ２５０型超重型数控卧式铣车床打破了国外技术封锁和限制，为国家战略装备的研制提供了关键加工技术保障。ＦＢ３２０型超重型数控落地铣镗床镗轴直径达到了３２０毫米，回转工作台承重达６００吨，目前仅有德国，捷克等少数几个国家能够生产。ＸＫＵ２６８０型超重型数控龙门镗铣床，龙门间距１０米，工作平台长６４米，龙门移动部件重３００吨。如此规格的龙门镗铣床在我国国内尚属首次。近年来，兵器工业集团坚持技术创新和管理创新，打造国家重型装备重要产业基地。相继研发成功世界最大３．６万吨黑色金属垂直挤压机、ＤＬ２５０型超重型数控卧式铣车床等一系列举重大装备产品，提升了我国在世界重型装备制造领域的实力和地位。",}]}]}]});});

portal 源代码相关推荐

Liferay Portal学习笔记-coldTear
[原创]Liferay Portal学习笔记(一):安装一. 简单安装 1)下载并安装 JDK1.5 1. 下载并安装 Windows Platform J2SE(TM) Development ...
如何使用 SAP API Portal Policy Editor 给 SAP API 调用自动添加认证信息
打开 API portal,找到要编辑的 API,点击打开,进入明细页面: 点击 Policies: 在策略编辑器的右侧,您可以看到开箱即用的策略,可帮助您为您的用例选择策略.所有安全策略都分组在安全 ...
JSF 源代码赏析之Lifecycle
JSF 源代码赏析之Lifecycle 关键字: jsf sourcecode lifecycle JSF的生命周期在JSF应用中起着至关重要的作用,每一个JSF请求的处理都需要经过一次生命周期,本文 ...
React中的Portal组件
这可以在这里看:http://leozdgao.me/reactzhong-de-portalzu-jian/ 几个月前遇到了写模态窗(modal)的需求,当初其实没什么思路,不知道怎么用更React ...
Git 仓库配置不当日产北美公司的源代码遭泄露
聚焦源代码安全,网罗国内外最新资讯! 编译:代码卫士团队日产北美公司所开发和使用的移动应用及内部工具的源代码遭泄露,原因是该公司的其中一个 Git 服务器配置不当. 瑞士软件工程师 Tillie ...
python 框架和 spring mvc_整合WebSphere Portal 7和Spring 3.0 Portlet MVC（下）
在<整合WebSphere Portal 7和Spring 3.0 Portlet MVC(上)>中,笔者指导你通过设置Spring 3.0 Portlet MVC框架,使它与运行在Web ...
OpenPortal Wifi认证、Portal协议认证、WEB认证解决方案
OpenPortal认证系统操作手册 OpenPortal网络接入认证专家目录声明 4 前言 5 一. 内容概述 6 二. 技术支持 6 三. 致谢: 6 第一章理念与组成 7 1.1 理念 ...
基于java的宠物管理系统设计与实现(项目报告+答辩PPT+源代码+数据库+截图+部署视频)
基于JAVA的宠物网站的设计与实现本系统是采用Java技术来构建的一个基于Web技术的B/S结构的宠物网站,该网站建立在Spring和Struts2框架之上,前台使用JSP作为开发语言,后台使用My ...
jboss portal+MySql5 安装使用手册
本例子采用:jboss-portal-2.7.2+MySql5数据库为例子,来说明安装过程 <p>本例子采用:jboss-portal-2.7.2+MySql5数据库为例子,来说明安装过程 ...

portal 源代码

portal 源代码相关推荐

最新文章

热门文章