2 Roo.ScrollPanel = function(el, config, content){
4 config.fitToFrame = true;
5 Roo.ScrollPanel.superclass.constructor.call(this, el, config, content);
7 this.el.dom.style.overflow = "hidden";
8 var wrap = this.el.wrap({cls: "x-scroller x-layout-inactive-content"});
9 this.el.removeClass("x-layout-inactive-content");
10 this.el.on("mousewheel", this.onWheel, this);
12 var up = wrap.createChild({cls: "x-scroller-up", html: " "}, this.el.dom);
13 var down = wrap.createChild({cls: "x-scroller-down", html: " "});
14 up.unselectable(); down.unselectable();
15 up.on("click", this.scrollUp, this);
16 down.on("click", this.scrollDown, this);
17 up.addClassOnOver("x-scroller-btn-over");
18 down.addClassOnOver("x-scroller-btn-over");
19 up.addClassOnClick("x-scroller-btn-click");
20 down.addClassOnClick("x-scroller-btn-click");
21 this.adjustments = [0, -(up.getHeight() + down.getHeight())];
23 this.resizeEl = this.el;
24 this.el = wrap; this.up = up; this.down = down;
27 Roo.extend(Roo.ScrollPanel, Roo.ContentPanel, {
30 scrollUp : function(){
31 this.resizeEl.scroll("up", this.increment, {callback: this.afterScroll, scope: this});
34 scrollDown : function(){
35 this.resizeEl.scroll("down", this.increment, {callback: this.afterScroll, scope: this});
38 afterScroll : function(){
39 var el = this.resizeEl;
40 var t = el.dom.scrollTop, h = el.dom.scrollHeight, ch = el.dom.clientHeight;
41 this.up[t == 0 ? "addClass" : "removeClass"]("x-scroller-btn-disabled");
42 this.down[h - t <= ch ? "addClass" : "removeClass"]("x-scroller-btn-disabled");
46 Roo.ScrollPanel.superclass.setSize.apply(this, arguments);
50 onWheel : function(e){
51 var d = e.getWheelDelta();
52 this.resizeEl.dom.scrollTop -= (d*this.wheelIncrement);
57 setContent : function(content, loadScripts){
58 this.resizeEl.update(content, loadScripts);