Feat: Implement hideMode for Grid Columns to support OffscreenCanvas buffering (#8959)

Author: tobiu

src/grid/Body.mjs

@@ -643,7 +643,8 @@ class GridBody extends Component {
             id            = me.getRowId(rowIndex),
             recordId      = record[me.store.getKeyProperty()],
             rowCls        = me.getRowClass(record, rowIndex),
-            config, column, columnPosition,  gridRow, i;
+            countColumns  = columns.getCount(),
+            config, column, columnPosition, gridRow, i, isMounted;
 
         if (rowIndex % 2 !== 0) {
             rowCls.push('neo-even')
@@ -673,8 +674,14 @@ class GridBody extends Component {
             gridContainer.fire('select', {record})
         }
 
-        for (i=mountedColumns[0]; i <= mountedColumns[1]; i++) {
-            column = columns.getAt(i);
+        for (i=0; i < countColumns; i++) {
+            isMounted = i >= mountedColumns[0] && i <= mountedColumns[1];
+            column    = columns.getAt(i);
+
+            if (!isMounted && column.hideMode === 'removeDom') {
+                continue
+            }
+
             config = me.applyRendererOutput({column, columnIndex: i, record, rowIndex});
 
             if (column.dock) {
@@ -687,11 +694,19 @@ class GridBody extends Component {
                 ...config.style,
                 left : columnPosition.x     + 'px',
                 width: columnPosition.width + 'px'
-            }
+            };
 
             // Happens during a column header drag OP, when leaving the painted range
-            if (columnPosition.hidden) {
-                config.style.visibility = 'hidden'
+            if (isMounted) {
+                if (columnPosition.hidden) {
+                    config.style.visibility = 'hidden'
+                }
+            } else {
+                if (column.hideMode === 'visibility') {
+                    config.style.visibility = 'hidden'
+                } else if (column.hideMode === 'display') {
+                    config.style.display = 'none'
+                }
             }
 
             gridRow.cn.push(config)

src/grid/column/Base.mjs

@@ -6,6 +6,14 @@ import {resolveCallback} from '../../util/Function.mjs';
  * @extends Neo.core.Base
  */
 class Column extends Base {
+    /**
+     * Valid values for hideMode
+     * @member {String[]} hideModes=['display','removeDom','visibility']
+     * @protected
+     * @static
+     */
+    static hideModes = ['display', 'removeDom', 'visibility']
+
     static config = {
         /**
          * @member {String} className='Neo.grid.column.Base'
@@ -16,6 +24,10 @@ class Column extends Base {
          * @member {String|null} dataField=null
          */
         dataField: null,
+        /**
+         * @member {String} hideMode_='removeDom'
+         */
+        hideMode_: 'removeDom',
         /**
          * @member {Neo.grid.Container|null} parent=null
          */
@@ -54,6 +66,16 @@ class Column extends Base {
         value && Neo.currentWorker.insertThemeFiles(value, this.__proto__)
     }
 
+    /**
+     * Triggered before the hideMode config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    beforeSetHideMode(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'hideMode')
+    }
+
     /**
      * Triggered before the renderer config gets changed
      * @param {Function|String|null} value

src/grid/column/Sparkline.mjs

@@ -19,6 +19,10 @@ class Sparkline extends ComponentColumn {
         defaults: {
             module: SparklineComponent
         },
+        /**
+         * @member {String} hideMode='visibility'
+         */
+        hideMode: 'visibility',
         /**
          * @member {String|null} rendererClassName=null
          */