#6235 grid.Scrollbar: base class & scss

resources/scss/src/grid/Scrollbar.scss

@@ -0,0 +1,11 @@
+.neo-grid-scrollbar {
+    background-color: red;
+    bottom          : 0;
+    overflow-y      : scroll;
+    position        : absolute;
+    right           : 0;
+    top             : 31px; // header-toolbar height
+    transition      : opacity .4s;
+    width           : 16px;
+    z-index         : 2;
+}

src/grid/Container.mjs

@@ -1,5 +1,6 @@
 import BaseContainer   from '../container/Base.mjs';
 import ClassSystemUtil from '../util/ClassSystem.mjs';
+import GridScrollbar   from './Scrollbar.mjs';
 import GridView        from './View.mjs';
 import Store           from '../data/Store.mjs';
 import * as header     from './header/_export.mjs';
@@ -70,6 +71,11 @@ class GridContainer extends BaseContainer {
          * @member {Number} rowHeight_=32
          */
         rowHeight_: 32,
+        /**
+         * @member {Neo.grid.Scrollbar|null} scrollbar=null
+         * @protected
+         */
+        scrollbar: null,
         /**
          * @member {Boolean} showHeaderFilters_=false
          */
@@ -98,14 +104,11 @@ class GridContainer extends BaseContainer {
          */
         items: null,
         /**
-         * @member {Object} _vdom={cls:['neo-grid-wrapper'],cn:[{cn:[]}]}
+         * @member {Object} _vdom
          */
         _vdom:
         {cls: ['neo-grid-wrapper'], cn: [
-            {'aria-rowcount': 1, cn: []}, // aria-rowcount includes the column headers
-            {cls: ['neo-grid-scrollbar'], cn: [
-                {cls: ['neo-grid-scrollbar-content']}
-            ]}
+            {'aria-rowcount': 1, cn: []} // aria-rowcount includes the column headers
         ]}
     }
 
@@ -137,8 +140,8 @@ class GridContainer extends BaseContainer {
     construct(config) {
         super.construct(config);
 
-        let me                 = this,
-            {rowHeight, store} = me;
+        let me = this,
+            {appName, rowHeight, store, windowId} = me;
 
         me.headerToolbarId = Neo.getId('grid-header-toolbar');
         me.viewId          = Neo.getId('grid-view');
@@ -159,6 +162,17 @@ class GridContainer extends BaseContainer {
             ...me.viewConfig
         }];
 
+        me.scrollbar = Neo.create({
+            module  : GridScrollbar,
+            appName,
+            parentId: me,
+            rowHeight,
+            store,
+            windowId
+        });
+
+        me.vdom.cn.push(me.scrollbar.createVdomReference())
+
         me.vdom.id = me.getWrapperId();
 
         me.createColumns(me.columns);

src/grid/Scrollbar.mjs

@@ -0,0 +1,86 @@
+import Component from '../component/Base.mjs';
+
+/**
+ * @class Neo.grid.Scrollbar
+ * @extends Neo.component.Base
+ */
+class GridScrollbar extends Component {
+    static config = {
+        /**
+         * @member {String} className='Neo.grid.Scrollbar'
+         * @protected
+         */
+        className: 'Neo.grid.Scrollbar',
+        /**
+         * @member {String} ntype='grid-scrollbar'
+         * @protected
+         */
+        ntype: 'grid-scrollbar',
+        /**
+         * @member {String[]} baseCls=['neo-grid-scrollbar']
+         * @protected
+         */
+        baseCls: ['neo-grid-scrollbar'],
+        /**
+         * Number in px
+         * @member {Number} rowHeight_=0
+         */
+        rowHeight_: 0,
+        /**
+         * @member {Neo.data.Store|null} store_=null
+         */
+        store_: null,
+        /**
+         * @member {Object} _vdom
+         */
+        _vdom:
+        {cn: [
+            {cls: ['neo-grid-scrollbar-content']}
+        ]}
+    }
+
+    /**
+     * Triggered after the rowHeight config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetRowHeight(value, oldValue) {
+        value > 0 && this.updateScrollHeight()
+    }
+
+    /**
+     * Triggered after the store config got changed
+     * @param {Neo.data.Store|null} value
+     * @param {Neo.data.Store|null} oldValue
+     * @protected
+     */
+    afterSetStore(value, oldValue) {
+        if (value) {
+            let me = this;
+
+            value.on({
+                load : me.updateScrollHeight,
+                scope: me
+            });
+
+            value.getCount() > 0 && me.updateScrollHeight()
+        }
+    }
+
+    /**
+     *
+     */
+    updateScrollHeight() {
+        let me           = this,
+            countRecords = me.store.getCount(),
+            {rowHeight}  = me;
+
+        if (countRecords > 0 && rowHeight > 0) {
+            me.vdom.cn[0].height = `${countRecords * rowHeight}px`;
+            me.update()
+        }
+    }
+}
+
+export default Neo.setupClass(GridScrollbar);