neo.mjs 10.0.0-alpha.3 → 10.0.0-alpha.5

package/learn/tree.json

@@ -0,0 +1,53 @@
+{"data": [
+    {"name": "Using These Topics",                                 "parentId": null,                                 "id": "UsingTheseTopics" },
+    {"name": "Benefits",                                           "parentId": null,                "isLeaf": false, "id": "Benefits"},
+        {"name": "Introduction ",                                  "parentId": "Benefits",                           "id": "benefits.Introduction"},
+        {"name": "Off the Main Thread",                            "parentId": "Benefits",                           "id": "benefits.OffTheMainThread"},
+        {"name": "4 Environments",                                 "parentId": "Benefits",                           "id": "benefits.FourEnvironments"},
+        {"name": "Unified Config System",                          "parentId": "Benefits",                           "id": "benefits.ConfigSystem"},
+        {"name": "Extreme Speed",                                  "parentId": "Benefits",                           "id": "benefits.Speed"},
+        {"name": "Multi-Window Applications",                      "parentId": "Benefits",                           "id": "benefits.MultiWindow"},
+        {"name": "Quick Application Development",                  "parentId": "Benefits",                           "id": "benefits.Quick"},
+        {"name": "Complexity and Effort",                          "parentId": "Benefits",                           "id": "benefits.Effort"},
+        {"name": "Forms Engine",                                   "parentId": "Benefits",                           "id": "benefits.FormsEngine"},
+        {"name": "Features and Benefits Summary",                  "parentId": "Benefits",                           "id": "benefits.Features"},
+    {"name": "Getting Started",                                    "parentId": null,                "isLeaf": false, "id": "GettingStarted", "collapsed": true},
+        {"name": "Setup",                                          "parentId": "GettingStarted",                     "id": "gettingstarted.Setup"},
+        {"name": "Workspaces and Applications",                    "parentId": "GettingStarted",                     "id": "gettingstarted.Workspaces"},
+        {"name": "Describing a View",                              "parentId": "GettingStarted",                     "id": "gettingstarted.DescribingTheUI"},
+        {"name": "Events",                                         "parentId": "GettingStarted",                     "id": "gettingstarted.Events"},
+        {"name": "Component References",                           "parentId": "GettingStarted",                     "id": "gettingstarted.References"},
+        {"name": "Extending Classes",                              "parentId": "GettingStarted",                     "id": "gettingstarted.Extending"},
+        {"name": "Config",                                         "parentId": "GettingStarted",                     "id": "gettingstarted.Config"},
+        {"name": "Shared Bindable Data",                           "parentId": "GettingStarted",                     "id": "gettingstarted.ComponentModels"},
+    {"name": "Guides",                                             "parentId": null,                "isLeaf": false, "id": "InDepth",  "collapsed": true},
+        {"name": "Application Bootstrap",                          "parentId": "InDepth",                            "id": "guides.ApplicationBootstrap"},
+        {"name": "Declarative Component Trees VS Imperative Vdom", "parentId": "InDepth",                            "id": "guides.DeclarativeComponentTreesVsImperativeVdom"},
+        {"name": "Working with VDom",                              "parentId": "InDepth",                            "id": "guides.WorkingWithVDom"},
+        {"name": "Instance Lifecycle",                             "parentId": "InDepth",                            "id": "guides.InstanceLifecycle", "hidden": true},
+        {"name": "User Input (Forms)",                             "parentId": "InDepth",                            "id": "guides.Forms",  "hidden": true},
+        {"name": "Component and Container Basics",                "parentId": "InDepth",                            "id": "guides.ComponentsAndContainers"},
+        {"name": "Layouts",                                        "parentId": "InDepth",           "isLeaf": false, "id": "guides.Layouts", "hidden": true},
+        {"name": "Shared Bindable Data (State Providers)",         "parentId": "InDepth",                            "id": "guides.StateProviders"},
+        {"name": "Custom Components",                              "parentId": "InDepth",                            "id": "guides.CustomComponents", "hidden": true},
+        {"name": "Events",                                         "parentId": "InDepth",           "isLeaf": false, "id": "GuideEvents"},
+            {"name": "Custom Events",                              "parentId": "GuideEvents",                        "id": "guides.events.CustomEvents"},
+            {"name": "DOM Events",                                 "parentId": "GuideEvents",                        "id": "guides.events.DomEvents"},
+        {"name": "Portal App",                                     "parentId": "InDepth",                            "id": "guides.PortalApp"},
+        {"name": "Tables (Stores)",                                "parentId": "InDepth",                            "id": "guides.Tables", "hidden": true},
+        {"name": "Multi-Window Applications",                      "parentId": "InDepth",                            "id": "guides.MultiWindow", "hidden":  true},
+        {"name": "Main Thread Addons",                             "parentId": "InDepth",           "isLeaf": false, "id": "MainThreadAddons", "hidden": true},
+            {"name": "Introduction",                               "parentId": "MainThreadAddons",                   "id": "guides.MainThreadAddonIntro"},
+            {"name": "Example",                                    "parentId": "MainThreadAddons",                   "id": "guides.MainThreadAddonExample"},
+        {"name": "Mixins",                                         "parentId": "InDepth",                            "id": "guides.Mixins", "hidden": true},
+    {"name": "Tutorials",                                          "parentId": null,                "isLeaf": false, "id": "Tutorials",  "collapsed": true},
+        {"name": "Rock Scissors Paper",                            "parentId": "Tutorials",                          "id": "tutorials.RSP", "hidden": true},
+        {"name": "Earthquakes",                                    "parentId": "Tutorials",                          "id": "tutorials.Earthquakes"},
+        {"name": "Todo List",                                      "parentId": "Tutorials",                          "id": "tutorials.TodoList"},
+    {"name": "JavaScript Classes",                                 "parentId": null,                "isLeaf": false, "id": "JavaScript", "hidden": true},
+        {"name": "Classes, Properties, and Methods",               "parentId": "JavaScript",                         "id": "javascript.Classes"},
+        {"name": "Overriding Methods",                             "parentId": "JavaScript",                         "id": "javascript.Overrides"},
+        {"name": "Other JavaScript Class Features",                "parentId": "JavaScript",                         "id": "javascript.ClassFeatures"},
+        {"name": "Super",                                          "parentId": "JavaScript",                         "id": "javascript.Super"},
+        {"name": "New Node",                                       "parentId": "JavaScript",                         "id": "javascript.NewNode"}
+]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name"           : "neo.mjs",
-    "version"        : "10.0.0-alpha.3",
+    "version"        : "10.0.0-alpha.5",
     "description"    : "Neo.mjs: The multi-threaded UI framework for building ultra-fast, desktop-like web applications with uncompromised responsiveness, inherent security, and a transpilation-free dev mode.",
     "type"           : "module",
     "repository"     : {
@@ -94,7 +94,7 @@
         "postcss"                      : "^8.5.6",
         "sass"                         : "^1.89.2",
         "siesta-lite"                  : "5.5.2",
-        "terser"                       : "^5.43.0",
+        "terser"                       : "^5.43.1",
         "url"                          : "^0.11.4",
         "webpack"                      : "^5.99.9",
         "webpack-cli"                  : "^6.0.1",

package/resources/scss/src/grid/{View.scss → Body.scss}

@@ -1,4 +1,4 @@
-.neo-grid-view-wrapper {
+.neo-grid-body-wrapper {
     height         : 100%;
     overflow-anchor: none;
     overflow-x     : hidden;
@@ -11,7 +11,7 @@
     }
 }
 
-.neo-grid-view {
+.neo-grid-body {
     height    : 100%;
     overflow-x: visible;
 

package/resources/scss/src/grid/VerticalScrollbar.scss

@@ -14,7 +14,7 @@
     }
 }
 
-.neo-grid-wrapper:has(.neo-grid-view.neo-is-scrolling) {
+.neo-grid-wrapper:has(.neo-grid-body.neo-is-scrolling) {
     .neo-grid-vertical-scrollbar {
         opacity: 1;
     }

package/resources/scss/src/grid/plugin/AnimateRows.scss

@@ -1,4 +1,4 @@
-.neo-grid-view {
+.neo-grid-body {
     &.neo-animate-rows {
         .neo-grid-row {
             transition:

package/resources/scss/src/grid/plugin/CellEditing.scss

@@ -1,4 +1,4 @@
-.neo-grid-view {
+.neo-grid-body {
     .neo-grid-cell {
         &:has(.neo-grid-editor) {
             padding: 1px 4px 2px;

package/resources/scss/theme-dark/grid/{View.scss → Body.scss}

@@ -1,4 +1,4 @@
-:root .neo-theme-dark { // .neo-grid-view
+:root .neo-theme-dark { // .neo-grid-body
     --grid-cell-background-color-hover                    : #54595c;
     --grid-cell-ismodified-color                          : orange;
     --grid-cell-ismodified-size                           : 10px;

package/resources/scss/theme-light/grid/{View.scss → Body.scss}

@@ -1,6 +1,6 @@
 @use "sass:color";
 
-:root .neo-theme-light { // .neo-grid-view
+:root .neo-theme-light { // .neo-grid-body
     --grid-cell-background-color-hover                    : #{color.adjust(#33343d, $lightness: 70%)};
     --grid-cell-ismodified-color                          : orange;
     --grid-cell-ismodified-size                           : 10px;

package/resources/scss/theme-neo-light/grid/{View.scss → Body.scss}

@@ -1,6 +1,6 @@
 @use "sass:color";
 
-:root .neo-theme-neo-light { // .neo-grid-view
+:root .neo-theme-neo-light { // .neo-grid-body
     --grid-cell-background-color-hover                    : #{color.adjust(#33343d, $lightness: 70%)};
     --grid-cell-ismodified-color                          : orange;
     --grid-cell-ismodified-size                           : 10px;

package/src/DefaultConfig.mjs

@@ -200,6 +200,31 @@ const DefaultConfig = {
      * @type Boolean
      */
     useCanvasWorker: false,
+    /**
+     * `true` will enable the advanced, secure, and performant direct DOM API rendering strategy (recommended).
+     * In this mode, `Neo.vdom.Helper` will create and send structured VNode object graphs to the Main Thread.
+     * `Neo.main.DeltaUpdates` will then use `Neo.main.render.DomApiRenderer` to directly manipulate the DOM.
+     * Crucially, `Neo.main.render.DomApiRenderer` builds new **DOM subtrees** (from the received VNode object graphs)
+     * as detached DocumentFragments or elements, entirely outside the live DOM tree.
+     * These fully constructed fragments are then inserted into the live document in a **single, atomic operation**.
+     * This approach inherently minimizes costly browser reflows/repaints, drastically reduces Cross-Site Scripting (XSS) risks,
+     * and optimizes for surgical, atomic DOM updates for unparalleled performance.
+     *
+     * `false` will enable the legacy string-based rendering strategy.
+     * In this mode, `Neo.vdom.Helper` will generate complete HTML strings (`outerHTML`) for VNode subtrees.
+     * `Neo.main.DeltaUpdates` will then use `Neo.main.render.StringBasedRenderer` to insert these
+     * strings into the DOM using methods like `parentNode.insertAdjacentHTML()`.
+     * While performant for large insertions, this mode is generally less secure due to potential XSS vectors
+     * and relies on browser HTML parsing, which can be less efficient for granular updates.
+     *
+     * This configuration affects both the initial painting of your applications and the creation
+     * of new component trees at runtime.
+     * @default true
+     * @memberOf! module:Neo
+     * @name config.useDomApiRenderer
+     * @type Boolean
+     */
+    useDomApiRenderer: true,
     /**
      * Flag if vdom ids should get mapped into DOM element ids.
      * false will convert them into a "data-neo-id" attribute.
@@ -246,18 +271,6 @@ const DefaultConfig = {
      * @type Boolean
      */
     useSharedWorkers: false,
-    /**
-     * `true` will let the `vdom.Helper` create a String-based representation of the vnode tree.
-     * Main will then use e.g.`parentNode.insertAdjacentHTML('beforeend', delta.outerHTML);`
-     * This affects the initial painting of your apps, but also the creation of new component trees at run-time.
-     * `false` will skip the creation of the String, and instead use DOM APIs to generate a fragment inside Main,
-     * into which the vnode tree will get applied.
-     * @default false
-     * @memberOf! module:Neo
-     * @name config.useStringBasedMounting
-     * @type Boolean
-     */
-    useStringBasedMounting: false,
     /**
      * True will generate a new task worker, which can get filled with own expensive remote methods
      * @default false
@@ -276,12 +289,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '10.0.0-alpha.3'
+     * @default '10.0.0-alpha.5'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '10.0.0-alpha.3'
+    version: '10.0.0-alpha.5'
 };
 
 Object.assign(DefaultConfig, {

package/src/Main.mjs

@@ -42,7 +42,7 @@ class Main extends core.Base {
         readQueue: [],
         /**
          * Remote method access for other workers
-         * @member {Object} remote={app: [//...]}
+         * @member {Object} remote
          * @protected
          */
         remote: {

package/src/Neo.mjs

@@ -436,6 +436,22 @@ Neo = globalThis.Neo = Object.assign({
         return Neo.create(className, config)
     },
 
+    /**
+     * Updates the global Neo.config object across all active workers and connected browser windows.
+     *
+     * This is the unified entry point for changing global framework configurations.
+     * The framework automatically handles the complex multi-threaded and multi-window
+     * synchronization (via App Workers and Shared Workers, if active), ensuring
+     * consistency across the entire application without boilerplate.
+     *
+     * You can pass a partial config object to update specific keys.
+     * For nested objects, Neo.mjs performs a deep merge to preserve existing properties.
+     *
+     * @memberOf module:Neo
+     * @function setGlobalConfig
+     * @param {Object} config The partial or full Neo.config object with changes to apply.
+     */
+
     /**
      * Internally used at the end of each class / module definition
      * @memberOf module:Neo

package/src/button/Base.mjs

@@ -225,8 +225,8 @@ class Button extends Component {
     afterSetBadgeText(value, oldValue) {
         let {badgeNode} = this;
 
-        badgeNode.html      = value;
         badgeNode.removeDom = !Boolean(value);
+        badgeNode.text      = value;
 
         this.update()
     }
@@ -380,7 +380,7 @@ class Button extends Component {
         textNode.removeDom = isEmpty;
 
         if (!isEmpty) {
-            textNode.html = value
+            textNode.text = value
         }
 
         me.update()

package/src/calendar/view/MainContainerStateProvider.mjs

@@ -154,7 +154,7 @@ class MainContainerStateProvider extends StateProvider {
 
         let {data} = this;
 
-        switch(key) {
+        switch (key) {
             case 'locale': {
                 data.intlFormat_time = new Intl.DateTimeFormat(value, data.timeFormat);
                 break

package/src/grid/{View.mjs → Body.mjs}

@@ -6,21 +6,21 @@ import RowModel        from '../selection/grid/RowModel.mjs';
 import VDomUtil        from '../util/VDom.mjs';
 
 /**
- * @class Neo.grid.View
+ * @class Neo.grid.Body
  * @extends Neo.component.Base
  */
-class GridView extends Component {
+class GridBody extends Component {
     static config = {
         /**
-         * @member {String} className='Neo.grid.View'
+         * @member {String} className='Neo.grid.Body'
          * @protected
          */
-        className: 'Neo.grid.View',
+        className: 'Neo.grid.Body',
         /**
-         * @member {String} ntype='grid-view'
+         * @member {String} ntype='grid-body'
          * @protected
          */
-        ntype: 'grid-view',
+        ntype: 'grid-body',
         /**
          * @member {Boolean} animatedRowSorting_=false
          */
@@ -36,23 +36,23 @@ class GridView extends Component {
          */
         availableRows_: 0,
         /**
-         * Internal flag. Gets calculated after mounting grid.View rows
+         * Internal flag. Gets calculated after mounting grid.Body rows
          * @member {Number} availableWidth_=0
          */
         availableWidth_: 0,
         /**
-         * @member {String[]} baseCls=['neo-grid-view']
+         * @member {String[]} baseCls=['neo-grid-body']
          * @protected
          */
-        baseCls: ['neo-grid-view'],
+        baseCls: ['neo-grid-body'],
         /**
-         * The amount of columns (cells) to paint before the first & after the last visible column,
+         * The number of columns (cells) to paint before the first and after the last visible column,
          * to enhance the scrolling performance
          * @member {Number} bufferColumnRange_=0
          */
         bufferColumnRange_: 0,
         /**
-         * The amount of rows to paint before the first & after the last visible row,
+         * The number of rows to paint before the first and after the last visible row,
          * to enhance the scrolling performance
          * @member {Number} bufferRowRange_=3
          */
@@ -63,7 +63,7 @@ class GridView extends Component {
          */
         colspanField: 'colspan',
         /**
-         * Internal flag. Gets calculated after mounting grid.View rows
+         * Internal flag. Gets calculated after mounting grid.Body rows
          * @member {Number} containerWidth_=0
          */
         containerWidth_: 0,
@@ -150,9 +150,9 @@ class GridView extends Component {
          */
         visibleRows: [0, 0],
         /**
-         * @member {String[]} wrapperCls=[]
+         * @member {String[]} wrapperCls=['neo-grid-body-wrapper']
          */
-        wrapperCls: ['neo-grid-view-wrapper'],
+        wrapperCls: ['neo-grid-body-wrapper'],
         /**
          * @member {Object} _vdom
          */
@@ -686,7 +686,7 @@ class GridView extends Component {
             dataField = me.getCellDataField(id),
             record    = me.getRecord(id);
 
-        me.parent.fire(eventName, {data, dataField, record, view: me})
+        me.parent.fire(eventName, {body: me, data, dataField, record})
     }
 
     /**
@@ -698,7 +698,7 @@ class GridView extends Component {
             id     = data.currentTarget,
             record = me.getRecord(id);
 
-        me.parent.fire(eventName, {data, record, view: me})
+        me.parent.fire(eventName, {body: me, data, record})
     }
 
     /**
@@ -1133,4 +1133,4 @@ class GridView extends Component {
     }
 }
 
-export default Neo.setupClass(GridView);
+export default Neo.setupClass(GridBody);

package/src/grid/Container.mjs

@@ -1,7 +1,7 @@
 import BaseContainer     from '../container/Base.mjs';
 import ClassSystemUtil   from '../util/ClassSystem.mjs';
 import Collection        from '../collection/Base.mjs';
-import GridView          from './View.mjs';
+import GridBody          from './Body.mjs';
 import ScrollManager     from './ScrollManager.mjs';
 import Store             from '../data/Store.mjs';
 import VerticalScrollbar from './VerticalScrollbar.mjs';
@@ -52,6 +52,16 @@ class GridContainer extends BaseContainer {
          * @protected
          */
         baseCls: ['neo-grid-container'],
+        /**
+         * Configs for Neo.grid.Body
+         * @member {Object|null} [bodyConfig=null]
+         */
+        bodyConfig: null,
+        /**
+         * @member {String|null} bodyId_=null
+         * @protected
+         */
+        bodyId_: null,
         /**
          * true uses grid.plugin.CellEditing
          * @member {Boolean} cellEditing_=false
@@ -105,16 +115,6 @@ class GridContainer extends BaseContainer {
          * @member {Neo.data.Store} store_=null
          */
         store_: null,
-        /**
-         * Configs for Neo.grid.View
-         * @member {Object|null} [viewConfig=null]
-         */
-        viewConfig: null,
-        /**
-         * @member {String|null} viewId_=null
-         * @protected
-         */
-        viewId_: null,
         /**
          * @member {Array|null} items=null
          * @protected
@@ -142,19 +142,19 @@ class GridContainer extends BaseContainer {
     scrollManager = null
 
     /**
-     * Convenience method to access the Neo.grid.header.Toolbar
-     * @returns {Neo.grid.header.Toolbar|null}
+     * Convenience method to access the Neo.grid.Body
+     * @returns {Neo.grid.Body|null}
      */
-    get headerToolbar() {
-        return Neo.getComponent(this.headerToolbarId) || Neo.get(this.headerToolbarId)
+    get body() {
+        return Neo.getComponent(this.bodyId) || Neo.get(this.bodyId)
     }
 
     /**
-     * Convenience method to access the Neo.grid.View
-     * @returns {Neo.grid.View|null}
+     * Convenience method to access the Neo.grid.header.Toolbar
+     * @returns {Neo.grid.header.Toolbar|null}
      */
-    get view() {
-        return Neo.getComponent(this.viewId) || Neo.get(this.viewId)
+    get headerToolbar() {
+        return Neo.getComponent(this.headerToolbarId) || Neo.get(this.headerToolbarId)
     }
 
     /**
@@ -166,8 +166,8 @@ class GridContainer extends BaseContainer {
         let me = this,
             {appName, rowHeight, store, windowId} = me;
 
+        me.bodyId          = Neo.getId('grid-body');
         me.headerToolbarId = Neo.getId('grid-header-toolbar');
-        me.viewId          = Neo.getId('grid-view');
 
         me.items = [{
             module           : header.Toolbar,
@@ -176,13 +176,13 @@ class GridContainer extends BaseContainer {
             sortable         : me.sortable,
             ...me.headerToolbarConfig
         }, {
-            module       : GridView,
+            module       : GridBody,
             flex         : 1,
             gridContainer: me,
-            id           : me.viewId,
+            id           : me.bodyId,
             rowHeight,
             store,
-            ...me.viewConfig
+            ...me.bodyConfig
         }];
 
         me.scrollbar = Neo.create({
@@ -218,7 +218,7 @@ class GridContainer extends BaseContainer {
 
         if (mounted) {
             ResizeObserver.register(resizeParams);
-            await me.passSizeToView()
+            await me.passSizeToBody()
         } else {
             me.initialResizeEvent = true;
             ResizeObserver.unregister(resizeParams)
@@ -262,9 +262,9 @@ class GridContainer extends BaseContainer {
 
             await me.timeout(50);
 
-            await me.passSizeToView();
+            await me.passSizeToBody();
 
-            me.view?.createViewData()
+            me.body?.createViewData()
         }
     }
 
@@ -287,14 +287,14 @@ class GridContainer extends BaseContainer {
      */
     afterSetRowHeight(value, oldValue) {
         if (value > 0) {
-            let {scrollbar, view} = this;
+            let {body, scrollbar} = this;
 
             if (scrollbar) {
                 scrollbar.rowHeight = value
             }
 
-            if (view) {
-                view.rowHeight = value
+            if (body) {
+                body.rowHeight = value
             }
         }
     }
@@ -340,12 +340,22 @@ class GridContainer extends BaseContainer {
         value   ?.on(listeners);
         oldValue?.un(listeners);
 
-        // in case we dynamically change the store, the view needs to get the new reference
-        if (me.view) {
-            me.view.store = value
+        // in case we dynamically change the store, grid.Body needs to get the new reference
+        if (me.body) {
+            me.body.store = value
         }
     }
 
+    /**
+     * Triggered before the bodyId config gets changed.
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    beforeSetBodyId(value, oldValue) {
+        return value || oldValue
+    }
+
     /**
      * Triggered before the columns config gets changed.
      * @param {Object[]} value
@@ -384,16 +394,6 @@ class GridContainer extends BaseContainer {
         return value
     }
 
-    /**
-     * Triggered before the viewId config gets changed.
-     * @param {String} value
-     * @param {String} oldValue
-     * @protected
-     */
-    beforeSetViewId(value, oldValue) {
-        return value || oldValue
-    }
-
     /**
      * In case you want to update multiple existing records in parallel,
      * using this method is faster than updating each record one by one.
@@ -401,19 +401,19 @@ class GridContainer extends BaseContainer {
      * @param {Object[]} records
      */
     bulkUpdateRecords(records) {
-        let {store, view} = this,
+        let {body, store} = this,
             {keyProperty} = store;
 
-        if (view) {
-            view.silentVdomUpdate = true;
+        if (body) {
+            body.silentVdomUpdate = true;
 
             records.forEach(item => {
                 store.get(item[keyProperty])?.set(item)
             });
 
-            view.silentVdomUpdate = false;
+            body.silentVdomUpdate = false;
 
-            view.update()
+            body.update()
         }
     }
 
@@ -527,9 +527,9 @@ class GridContainer extends BaseContainer {
         let me = this;
 
         me.scrollManager = Neo.create({
+            gridBody     : me.body,
             module       : ScrollManager,
-            gridContainer: me,
-            gridView     : me.view
+            gridContainer: me
         })
     }
 
@@ -540,11 +540,11 @@ class GridContainer extends BaseContainer {
         let me = this;
 
         if (!me.initialResizeEvent) {
-            await me.passSizeToView(true);
+            await me.passSizeToBody(true);
 
-            me.view.updateMountedAndVisibleColumns();
+            me.body.updateMountedAndVisibleColumns();
 
-            await me.headerToolbar.passSizeToView()
+            await me.headerToolbar.passSizeToBody()
         } else {
             me.initialResizeEvent = false
         }
@@ -561,7 +561,7 @@ class GridContainer extends BaseContainer {
 
         me.store.sort(opts);
         me.removeSortingCss(opts.property);
-        opts.direction && me.view.onStoreLoad()
+        opts.direction && me.body.onStoreLoad()
     }
 
     /**
@@ -589,16 +589,16 @@ class GridContainer extends BaseContainer {
      * @param {Boolean} silent=false
      * @returns {Promise<void>}
      */
-    async passSizeToView(silent=false) {
+    async passSizeToBody(silent=false) {
         let me                          = this,
             [containerRect, headerRect] = await me.getDomRect([me.id, me.headerToolbarId]);
 
         // delay for slow connections, where the container-sizing is not done yet
         if (containerRect.height === headerRect.height) {
             await me.timeout(100);
-            await me.passSizeToView(silent)
+            await me.passSizeToBody(silent)
         } else {
-            me.view[silent ? 'setSilent' : 'set']({
+            me.body[silent ? 'setSilent' : 'set']({
                 availableHeight: containerRect.height - headerRect.height,
                 containerWidth : containerRect.width
             })
@@ -624,8 +624,8 @@ class GridContainer extends BaseContainer {
      */
     scrollByColumns(index, step) {
         let me           = this,
-            {view}       = me,
-            {columnPositions, containerWidth, mountedColumns, visibleColumns} = view,
+            {body}       = me,
+            {columnPositions, containerWidth, mountedColumns, visibleColumns} = body,
             countColumns = columnPositions.getCount(),
             newIndex     = index + step,
             column, mounted, scrollLeft, visible;