git.roojs.org Git - roojs1/blob - Roo/ScrollPanel.js

   1
   2 Roo.ScrollPanel = function(el, config, content){
   3     config = config || {};
   4     config.fitToFrame = true;
   5     Roo.ScrollPanel.superclass.constructor.call(this, el, config, content);
   6
   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);
  11
  12     var up = wrap.createChild({cls: "x-scroller-up", html: "&#160;"}, this.el.dom);
  13     var down = wrap.createChild({cls: "x-scroller-down", html: "&#160;"});
  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())];
  22
  23     this.resizeEl = this.el;
  24     this.el = wrap; this.up = up; this.down = down;
  25 };
  26
  27 Roo.extend(Roo.ScrollPanel, Roo.ContentPanel, {
  28     increment : 100,
  29     wheelIncrement : 5,
  30     scrollUp : function(){
  31         this.resizeEl.scroll("up", this.increment, {callback: this.afterScroll, scope: this});
  32     },
  33
  34     scrollDown : function(){
  35         this.resizeEl.scroll("down", this.increment, {callback: this.afterScroll, scope: this});
  36     },
  37
  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");
  43     },
  44
  45     setSize : function(){
  46         Roo.ScrollPanel.superclass.setSize.apply(this, arguments);
  47         this.afterScroll();
  48     },
  49
  50     onWheel : function(e){
  51         var d = e.getWheelDelta();
  52         this.resizeEl.dom.scrollTop -= (d*this.wheelIncrement);
  53         this.afterScroll();
  54         e.stopEvent();
  55     },
  56
  57     setContent : function(content, loadScripts){
  58         this.resizeEl.update(content, loadScripts);
  59     }
  60
  61 });