Ext 实现无滚动条内容滚动.doc

Ext 实现无滚动条内容滚动最近项目需要，写个面板，如果内容过长，自动隐藏，下面提示更多，鼠标可以滚动查看内容也可点击查看。/初始化滚动栏 var InitScrollBar = function (conf) this.Container = Ext.get(conf.container); this.MaxScroll = conf.height ? 200 : conf.height; this.ScrollBox = Ext.get(conf.txtContainer); this.ScrollContent = Ext.get(conf.txtContent); this.ScrollTrack = conf.scrollBar ? conf.scrollBar : null; var ObjScroll = this; if(this.ScrollTrack) this.ScrollBox.parent().createChild( tag: div, id: scrollbar, cls: slidebar, html: ); this.ScrollTrack = Ext.get(scrollbar); this.ScrollHandle = Ext.get(handle); this.ScrollBox.setStyle(width, this.Container.getWidth() - this.ScrollTrack.getWidth() - 2 + px); /对象不存在 if (!(this.ScrollBox & this.ScrollContent) return; /是否内容超过指定高度 this.ScrollAmount = this.ScrollContent.getHeight() / this.MaxScroll; if (this.ScrollAmount 1) if(this.ScrollTrack) this.ScrollHandle.on(mousedown, function(e) /拖动滚轴 dragScroll(e); ); this.ScrollTrack.setStyle(height, this.MaxScroll + px); /设置滑块的默认位置 this.ScrollHandle.setStyle(margin-top, 0px); /设置滑块的高度 this.ScrollHandle.setStyle(height, Math.floor(this.MaxScroll / this.ScrollAmount) + px); this.ScrollContent.on(mousewheel, function(e) /鼠标滚轴事件 wheelScroll(e); ); /创建底部滑动块 if(!this.BottomScroll) this.ScrollBox.parent().createChild( tag: div, id: bottombar, cls: bottombar, html: more ); this.BottomScroll = Ext.get(bottombar); this.BottomScroll.setStyle(bottom, 0px); this.BottomScroll.on(click, function() contentScroll(10); ); this.ScrollBox.setStyle(height, (this.MaxScroll - 2) + px); this.MaxLength = this.MaxScroll - Math.floor(this.MaxScroll / this.ScrollAmount); this.ScrollBox.parent().setHeight(this.ScrollBox.getHeight() + Ext.get(bottombar).getHeight(); else this.ScrollTrack.hide(); /鼠标滚轮事件 function wheelScroll(event) /1表示向上滚动，-1表示向下滚动 var wAmount = event.getWheelDelta() * 120; contentScroll(- wAmount / 12); /内容滚动 function contentScroll(num) ObjScroll.ScrollBox.dom.scrollTop += num; if(ObjScroll.ScrollTrack) if (ObjScroll.ScrollBox.dom.scrollTop = 0) ObjScroll.ScrollHandle.setStyle(margin-top, 0px); else if (ObjScroll.ScrollBox.dom.scrollTop = ObjScroll.ScrollContent.getHeight() - ObjScroll.MaxScroll) ObjScroll.ScrollHandle.setStyle(margin-top, ObjScroll.MaxLength + px); else var h = parseInt(parseInt(ObjScroll.ScrollHandle.getStyle(margin-top) + Math.floor(num / ObjScroll.ScrollAmount) + px; ObjScroll.ScrollHandle.setStyle(margin-top, h); if (parseInt(ObjScroll.ScrollHandle.getStyle(margin-top) ObjScroll.MaxLength) ObjScroll.ScrollHandle.setStyle(margin-top, ObjScroll.MaxLength + px); /拖动滚轴事件 function dragScroll(event) var clientPosition = event.getXY(); var clientX = clientPosition0; var clientY = clientPosition1; var deltaY = clientY - parseInt(ObjScroll.ScrollHandle.getStyle(margin-top); Ext.getDoc().on(mousemove, moveHandler); Ext.getDoc().on(mouseup, upHandler); Ext.getDoc().on(mouseout, outHandler); if (Ext.getDoc() ObjScroll.ScrollHandle.dom.setCapture(); /鼠标拖动事件 function moveHandler(e) var moveY = e.getXY()1; ObjScroll.ScrollHandle.setStyle(margin-top, (moveY - deltaY) + px); if (moveY - deltaY) ObjScroll.MaxLength) ObjScroll.ScrollHandle.setStyle(margin-top, ObjScroll.MaxLength + px); else ObjScroll.ScrollBox.dom.scrollTop = Math.floor(moveY - deltaY) * ObjScroll.ScrollAmount); /鼠标释放 function upHandler(e) Ext.getDoc().un(mousemove, moveHandler); Ext.getDoc().un(mouseup, this); Ext.getDoc().un(mouseout, outHandler); if (Ext.getDoc() ObjScroll.ScrollHandle.dom.releaseCapture() ; /鼠标移开 function outHandler(e) Ext.getDoc().un(mousemove, moveHandler); Ext.getDoc().un(mouseup, upHandler); Ext.getDoc().un(mouseout, this); if (Ext.getDoc() ObjScroll.ScrollHandle.dom.releaseCapture() ; ; Ext.onReady(function() InitScrollBar( height: 200, container: container, txtContainer: scroll, txtContent: content, scrollBar: false ); );需要用到的样式： #container width: 500px; background: #FFFFFF; margin: 0 auto; text-align: left; position:relative; .slidebar width: 15px; position:absolute; right:0px; overflow: hidden; background-color: #F0F0F0; .scrollbox position:absolute; left:0px; overflow: hidden; border: 1px solid #CCCCCC; font-size: 12px; line-height:20px; .handle cursor: pointer; width: 13px; background-color: #CFCFCF; border: 1px solid #999999; .bottombar background-color:#CCC; height:20px; line-height:20px; width:100%; text-align:center; cursor:hand; position:absolute; 涉及的HTML如下： 本报讯（记者周方 通讯员陈伟秋、李国祥）为正确处理电力设施建设与城市环境的关系，科学分析电磁辐射对人体健康的影响，实现科学决策，市政府昨日召开了“电力设施建设与城市环境专家咨询会议”，邀请了全国各地环保、医学、经济、城建与城市规划等领域的20位著名专家，就电力设施建设与城市环境保护问题进行咨询。副市长甘新和市有关部门负责人参加了会议。 广州现在的电网结构已远远不能满足电力供应需求，面临的严重缺电局面已影响到城市发展和市民日常生活。但是，在电力建设过程中，遇到了很多困难和来自社会的压力。虽然市民普遍对电力建设表示支持，但一涉及到具体项目，仍有一些市民对电力基础设施建设是否影响身体健康心存疑虑。 对我市电力设施建设与城市环境的问题，市委、市政府高度重视，按照市长张广宁的要求，市政府从广大市民的根本利益出发，邀请来自全国各地的专家进行决策咨询，结合我市经济、社会、环境发展现状和趋势，对电力建设、城市规划和城市环境问题进行深入的探讨和研究，一方面为政府决策提供技术支持，另一方面也是从科学的角度解决市民的疑惑。 参加此次咨询会的20位专家都是国内在环保、医学、经济、城市建设和规划方面的资深专家，很多是学科研究的带头人，在国内外享有非常高的学术声誉。包括国家环保总局科技顾问委员会委员、国家环境保护总局核安全中心研究员、原国家环境保护总局核环境与辐射环境管理司司长赵亚民等7 位环保方面的专家；中山大学城市与区域研究中心教授、博士生导师魏清泉等3位经济方面的专家；华东电力试验研究院研究员杨新村等7位电力方面的专家；广东省城乡规划设计院总工程师马向明等3位规划方面的专家。 会议期间，专家们详细了解我市经济、规划和电力建设等方面的情况，对我市的电力设施建设与城市环境等问题进行深入细致的分析，就电网建设对保障经济持续发展及促进居