feat: Commit base implementation of Neo.grid.Row and refactored GridBody (#8970)

Author: tobiu

src/grid/Body.mjs

@@ -448,7 +448,11 @@ class GridBody extends Container {
         if (!value) {
             this._columnPositions = value = Neo.create({
                 module     : Collection,
-                keyProperty: 'dataField'
+                keyProperty: 'dataField',
+                listeners  : {
+                    mutate: this.onColumnPositionsMutate,
+                    scope : this
+                }
             })
         }
 
@@ -536,8 +540,9 @@ class GridBody extends Container {
 
     /**
      * @param {Boolean} silent=false
+     * @param {Boolean} force=false
      */
-    createViewData(silent=false) {
+    createViewData(silent=false, force=false) {
         let me                   = this,
             {mountedRows, store} = me,
             endIndex, i, item, itemIndex, poolSize, range;
@@ -575,6 +580,8 @@ class GridBody extends Container {
                     record  : store.getAt(i),
                     rowIndex: i
                 })
+            } else if (force) {
+                item.createVdom()
             }
         }
 
@@ -802,6 +809,13 @@ class GridBody extends Container {
         this.fireCellEvent(data, 'cellDoubleClick')
     }
 
+    /**
+     * @param {Object} data
+     */
+    onColumnPositionsMutate(data) {
+        this.createViewData(false, true)
+    }
+
     /**
      *
      */

src/grid/Row.mjs

@@ -75,9 +75,7 @@ class Row extends Component {
             column.rendererScope = column;
         }
 
-        me.bindCallback(column.renderer, 'renderer', column.rendererScope || me, column);
-
-        rendererOutput = column.renderer.call(column.rendererScope || me, {
+        rendererOutput = column.renderer.call(column.rendererScope || column, {
             column,
             columnIndex,
             component: me.components?.[column.dataField],
@@ -217,7 +215,7 @@ class Row extends Component {
             vdom['aria-selected'] = true;
             // Note: fire('select') should ideally be handled by the SelectionModel observing the store/records,
             // or we keep it here but suppress events during rendering if needed.
-            // gridContainer.fire('select', {record}) 
+            // gridContainer.fire('select', {record})
         }
 
         vdom.cls = rowCls;
@@ -238,6 +236,10 @@ class Row extends Component {
 
             columnPosition = gridBody.columnPositions.get(column.dataField);
 
+            if (!columnPosition) {
+                continue
+            }
+
             cellConfig.style = {
                 ...cellConfig.style,
                 left : columnPosition.x     + 'px',
@@ -260,7 +262,8 @@ class Row extends Component {
             vdom.cn.push(cellConfig)
         }
 
-        me.vdom = vdom;
+        me._vdom = vdom;
+        me.update()
     }
 
     /**