Sench non-touch compatible scroll panel

nonTouchCompatibleScrollPanel.js

Ext.NonTouchCompatibleScrollPanel = Ext.extend(Ext.Panel, {
  scroll: "both",
  currentX: 0,
  currentY: 0,
  listeners: {
    render: function(pnl) {
      console.log(arguments);
      var scrollbar_v = {
        cls: 'scrollbar-indicator-container-vertical'
      };

      var scrollbar_h = {
        cls: 'scrollbar-indicator-container-horizontal'
      };

      //create the scroll bars
      if (this.scroll === "vertical") {
        this.scrollbar_v = pnl.getEl().first('.x-scroller-parent').createChild(scrollbar_v);
      } else if (this.scroll === "horizontal") {
        this.scrollbar_h = pnl.getEl().first('.x-scroller-parent').createChild(scrollbar_h);
      } else if (this.scroll === "both") {
        this.scrollbar_v = pnl.getEl().first('.x-scroller-parent').createChild(scrollbar_v);
        this.scrollbar_h = pnl.getEl().first('.x-scroller-parent').createChild(scrollbar_h);
      }
      
      //bind the click event
      var that = this;
      if (this.scrollbar_v) {
        this.scrollbar_v.on({
          click: function(e) {
            that.onScrollbarClick(e, pnl, 'Y');
          },
          scope: this
        });
      }

      if (this.scrollbar_h) {
        this.scrollbar_h.on({
          click: function(e) {
            that.onScrollbarClick(e, pnl, 'X');
          },
          scope: this
        });
      }
    },

    afterlayout: function(pnl) {
      //we need to set the size of the scoll inidcators and make them visible by default
      var scrollerParent = pnl.getEl().first('.x-scroller-parent');
      var sw = pnl.scroller.scrollView;
      if (this.scrollbar_v) {
        var height = scrollerParent.getHeight();
        var fullHeight = pnl.scrollEl.select('.x-panel-body').first().getHeight();
        console.log(height);
        this.scrollbar_v.setHeight(height);
        var indicatorV = sw.indicators.vertical;
        indicatorV.setSize(height / fullHeight * height);
      }

      if (this.scrollbar_h) {
        var width = scrollerParent.getWidth();

        //what is the best way to get the correct width?
        var fullWidth = pnl.scrollEl.select('.x-panel-body').first().child('.list_item').getWidth();
        console.log(width);
        this.scrollbar_h.setWidth(width);
        var indicatorH = sw.indicators.horizontal;
        indicatorH.setSize(width / fullWidth * width);
      }
      sw.showIndicators();

    }
  },
  
  initComponent: function() {
    Ext.NonTouchCompatibleScrollPanel.superclass.initComponent.call(this, arguments);
  },

  onScrollbarClick: function(e, pnl, axis) {
    if (!this.scroll) {
      return;
    }
    //calculate scrolling position
    var fullValue = axis === "Y" ? pnl.scrollEl.select('.x-panel-body').first().getHeight() : pnl.scrollEl.select('.x-panel-body').first().child('.list_item').getWidth();
    var scrollbarValue = axis === "Y" ? this.scrollbar_v.getHeight() : this.scrollbar_h.getWidth();
    var offsetVal = e.browserEvent["offset" + axis];
    console.log(offsetVal);
    var scrollVal = offsetVal / scrollbarValue * fullValue;
    console.log(scrollVal);
    var scroller = Ext.ScrollManager.get(pnl.scrollEl.id);
    var scrollTo = {
      x: this.currentX,
      y: this.currentY
    };
    scrollTo[axis.toLowerCase()] = scrollVal;
    this['current' + axis] = scrollVal;
    scroller.scrollTo(scrollTo);
  }
});

Ext.reg("nonTouchCompatibleScrollPanel", Ext.NonTouchCompatibleScrollPanel);