neo.mjs 4.0.15 → 4.0.16

package/apps/covid/view/WorldMapContainer.mjs

@@ -1,6 +1,6 @@
 import Container                   from '../../../src/container/Base.mjs';
 import NumberField                 from '../../../src/form/field/Number.mjs';
-import Toolbar                     from '../../../src/container/Toolbar.mjs';
+import Toolbar                     from '../../../src/toolbar/Base.mjs';
 import WorldMapComponent           from './WorldMapComponent.mjs';
 import WorldMapContainerController from './WorldMapContainerController.mjs';
 

package/apps/realworld2/view/HeaderToolbar.mjs

@@ -1,9 +1,9 @@
 import HeaderToolbarController from './HeaderToolbarController.mjs';
-import Toolbar                 from '../../../src/container/Toolbar.mjs';
+import Toolbar                 from '../../../src/toolbar/Base.mjs';
 
 /**
  * @class RealWorld2.view.HeaderToolbar
- * @extends Neo.container.Toolbar
+ * @extends Neo.toolbar.Base
  */
 class HeaderToolbar extends Toolbar {
     static getConfig() {return {

package/apps/realworld2/view/article/FormContainer.mjs

@@ -1,7 +1,7 @@
 import ChipField from '../../../../src/form/field/Chip.mjs';
 import Container from '../../../../src/form/Container.mjs';
 import TextArea  from '../../../../src/form/field/TextArea.mjs';
-import Toolbar   from '../../../../src/container/Toolbar.mjs';
+import Toolbar   from '../../../../src/toolbar/Base.mjs';
 import TextField from '../../../../src/form/field/Text.mjs';
 
 /**

package/apps/realworld2/view/user/LoginFormContainer.mjs

@@ -1,7 +1,7 @@
 import Container     from '../../../../src/form/Container.mjs';
 import PasswordField from '../../../../src/form/field/Password.mjs';
 import TextField     from '../../../../src/form/field/Text.mjs';
-import Toolbar       from '../../../../src/container/Toolbar.mjs';
+import Toolbar       from '../../../../src/toolbar/Base.mjs';
 
 /**
  * @class RealWorld2.view.user.LoginFormContainer

package/apps/realworld2/view/user/SettingsFormContainer.mjs

@@ -1,6 +1,6 @@
 import Container from '../../../../src/form/Container.mjs';
 import TextField from '../../../../src/form/field/Text.mjs';
-import Toolbar   from '../../../../src/container/Toolbar.mjs';
+import Toolbar   from '../../../../src/toolbar/Base.mjs';
 
 /**
  * @class RealWorld2.view.user.SettingsFormContainer

package/apps/sharedcovid/view/WorldMapContainer.mjs

@@ -1,6 +1,6 @@
 import Container                   from '../../../src/container/Base.mjs';
 import NumberField                 from '../../../src/form/field/Number.mjs';
-import Toolbar                     from '../../../src/container/Toolbar.mjs';
+import Toolbar                     from '../../../src/toolbar/Base.mjs';
 import WorldMapComponent           from './WorldMapComponent.mjs';
 import WorldMapContainerController from './WorldMapContainerController.mjs';
 

package/apps/shareddialog/view/MainContainer.mjs

@@ -1,7 +1,7 @@
 import Button                  from '../../../src/button/Base.mjs';
 import Radio                   from '../../../src/form/field/Radio.mjs';
 import MainContainerController from './MainContainerController.mjs';
-import Toolbar                 from '../../../src/container/Toolbar.mjs';
+import Toolbar                 from '../../../src/toolbar/Base.mjs';
 import Viewport                from '../../../src/container/Viewport.mjs';
 
 /**

package/apps/shareddialog2/view/MainContainer.mjs

@@ -1,6 +1,6 @@
 import Button                  from '../../../src/button/Base.mjs';
 import MainContainerController from './MainContainerController.mjs';
-import Toolbar                 from '../../../src/container/Toolbar.mjs';
+import Toolbar                 from '../../../src/toolbar/Base.mjs';
 import Viewport                from '../../../src/container/Viewport.mjs';
 
 /**

package/examples/calendar/basic/MainContainer.mjs

@@ -1,7 +1,7 @@
 import Button                  from '../../../src/button/Base.mjs';
 import Calendar                from '../../../src/calendar/view/MainContainer.mjs';
 import MainContainerController from './MainContainerController.mjs';
-import Toolbar                 from '../../../src/container/Toolbar.mjs';
+import Toolbar                 from '../../../src/toolbar/Base.mjs';
 import Viewport                from '../../../src/container/Viewport.mjs';
 
 /**

package/examples/component/wrapper/cesiumJS/MainContainer.mjs

@@ -1,7 +1,7 @@
 import Button                  from '../../../../src/button/Base.mjs';
 import CesiumJSComponent       from '../../../../src/component/wrapper/CesiumJS.mjs';
 import MainContainerController from './MainContainerController.mjs';
-import Toolbar                 from '../../../../src/container/Toolbar.mjs';
+import Toolbar                 from '../../../../src/toolbar/Base.mjs';
 import Viewport                from '../../../../src/container/Viewport.mjs';
 
 /**

package/examples/dialog/MainContainer.mjs

@@ -1,7 +1,7 @@
 import Button     from '../../src/button/Base.mjs';
 import CheckBox   from '../../src/form/field/CheckBox.mjs';
 import NeoArray   from '../../src/util/Array.mjs';
-import Toolbar    from '../../src/container/Toolbar.mjs';
+import Toolbar    from '../../src/toolbar/Base.mjs';
 import DemoDialog from './DemoDialog.mjs';
 import Viewport   from '../../src/container/Viewport.mjs';
 

package/examples/list/animate/MainContainer.mjs

@@ -4,7 +4,7 @@ import MainContainerController from './MainContainerController.mjs';
 import MainStore               from './MainStore.mjs';
 import NumberField             from '../../../src/form/field/Number.mjs';
 import TextField               from '../../../src/form/field/Text.mjs';
-import Toolbar                 from '../../../src/container/Toolbar.mjs';
+import Toolbar                 from '../../../src/toolbar/Base.mjs';
 import Viewport                from '../../../src/container/Viewport.mjs';
 
 /**

package/examples/remotesApi/basic/MainContainer.mjs

@@ -1,6 +1,6 @@
 import Button                  from '../../../src/button/Base.mjs';
 import MainContainerController from './MainContainerController.mjs';
-import Toolbar                 from '../../../src/container/Toolbar.mjs';
+import Toolbar                 from '../../../src/toolbar/Base.mjs';
 import Viewport                from '../../../src/container/Viewport.mjs';
 
 /**

package/examples/todoList/version2/MainContainer.mjs

@@ -3,7 +3,7 @@ import Container     from '../../../src/container/Base.mjs';
 import TextField     from '../../../src/form/field/Text.mjs';
 import TodoList      from './TodoList.mjs';
 import TodoListStore from './TodoListStore.mjs';
-import Toolbar       from '../../../src/container/Toolbar.mjs';
+import Toolbar       from '../../../src/toolbar/Base.mjs';
 
 /**
  * @class Neo.examples.todoList.version2.MainContainer

package/examples/toolbar/paging/app.mjs

@@ -0,0 +1,6 @@
+import MainContainer from './view/MainContainer.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: MainContainer,
+    name    : 'Neo.examples.toolbar.paging'
+});

package/examples/toolbar/paging/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo Paging Toolbar</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/toolbar/paging/model/User.mjs

@@ -0,0 +1,38 @@
+import Model from '../../../../src/data/Model.mjs';
+
+/**
+ * @class Neo.examples.toolbar.paging.model.User
+ * @extends Neo.data.Model
+ */
+class User extends Model {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.toolbar.paging.model.User'
+         * @protected
+         */
+        className: 'Neo.examples.toolbar.paging.model.User',
+        /**
+         * @member {Object[]} fields
+         */
+        fields: [{
+            name: 'firstname',
+            type: 'String'
+        }, {
+            name: 'id',
+            type: 'Integer'
+        }, {
+            name: 'image',
+            type: 'String'
+        }, {
+            name: 'isOnline',
+            type: 'Boolean'
+        }, {
+            name: 'lastname',
+            type: 'String'
+        }]
+    }}
+}
+
+Neo.applyClassConfig(User);
+
+export default User;

package/examples/toolbar/paging/neo-config.json

@@ -0,0 +1,8 @@
+{
+    "appPath"      : "examples/toolbar/paging/app.mjs",
+    "basePath"     : "../../../",
+    "environment"  : "development",
+    "mainPath"     : "./Main.mjs",
+    "remotesApiUrl": "remotes-api.json",
+    "themes"       : ["neo-theme-dark", "neo-theme-light"]
+}

package/examples/toolbar/paging/remotes-api.json

@@ -0,0 +1,21 @@
+{
+    "namespace": "MyApp.backend",
+    "type"     : "websocket",
+    "url"      : "ws://localhost:3001",
+
+    "services": {
+        "FriendService": {
+            "methods": {
+                "getAll": {}
+            }
+        },
+        "UserService": {
+            "methods": {
+                "create" : {},
+                "destroy": {},
+                "read"   : {"params":  [{"type":  "Object"}]},
+                "update" : {}
+            }
+        }
+    }
+}

package/examples/toolbar/paging/store/Users.mjs

@@ -0,0 +1,39 @@
+import UserModel from '../model/User.mjs';
+import Store     from '../../../../src/data/Store.mjs';
+
+/**
+ * @class Neo.examples.toolbar.paging.store.Users
+ * @extends Neo.data.Store
+ */
+class Users extends Store {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.toolbar.paging.store.Users'
+         * @protected
+         */
+        className: 'Neo.examples.toolbar.paging.store.Users',
+        /**
+         * @member {Object|String|null} api
+         */
+        api: 'MyApp.backend.UserService',
+        /**
+         * @member {Boolean} autoLoad=true
+         */
+        autoLoad: true,
+        /**
+         * @member {Neo.data.Model} model=UserModel
+         */
+        model: UserModel,
+        /**
+         * @member {Object[]} sorters
+         */
+        sorters: [{
+            direction: 'ASC',
+            property : 'id'
+        }]
+    }}
+}
+
+Neo.applyClassConfig(Users);
+
+export default Users;

package/examples/toolbar/paging/view/AddUserDialog.mjs

@@ -0,0 +1,67 @@
+import Dialog    from '../../../../src/dialog/Base.mjs';
+import TextField from '../../../../src/form/field/Text.mjs';
+
+/**
+ * @class Neo.examples.toolbar.paging.view.AddUserDialog
+ * @extends Neo.dialog.Base
+ */
+class AddUserDialog extends Dialog {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.toolbar.paging.view.AddUserDialog'
+         * @protected
+         */
+        className: 'Neo.examples.toolbar.paging.view.AddUserDialog',
+        /**
+         * @member {Object} containerConfig={style:{padding:'1em'}}
+         */
+        containerConfig: {
+            style: {
+                padding: '1em'
+            }
+        },
+        /**
+         * @member {Object[]} headers
+         */
+        headers: [{
+            cls  : ['neo-footer-toolbar', 'neo-toolbar'],
+            dock : 'bottom',
+            items: ['->', {
+                text: 'Submit'
+            }]
+        }],
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module    : TextField,
+            flex      : 'none',
+            labelText : 'Firstname:',
+            labelWidth: 110
+        }, {
+            module    : TextField,
+            flex      : 'none',
+            labelText : 'Lastname:',
+            labelWidth: 110
+        }],
+        /**
+         * @member {Boolean} resizable=false
+         */
+        resizable: false,
+        /**
+         * @member {String} title='Edit User'
+         */
+        title: 'Add User',
+        /**
+         * @member {Object} wrapperStyle={height:'300px',width:'400px'}
+         */
+        wrapperStyle: {
+            height: '300px',
+            width : '400px'
+        }
+    }}
+}
+
+Neo.applyClassConfig(AddUserDialog);
+
+export default AddUserDialog;

package/examples/toolbar/paging/view/MainContainer.mjs

@@ -0,0 +1,44 @@
+import MainContainerController from './MainContainerController.mjs';
+import MainContainerModel      from './MainContainerModel.mjs';
+import PagingToolbar           from '../../../../src/toolbar/Paging.mjs';
+import UserTableContainer      from './UserTableContainer.mjs';
+import Viewport                from '../../../../src/container/Viewport.mjs';
+
+/**
+ * @class Neo.examples.toolbar.paging.view.MainContainer
+ * @extends Neo.container.Viewport
+ */
+class MainContainer extends Viewport {
+    static getConfig() {return {
+        className : 'Neo.examples.toolbar.paging.view.MainContainer',
+        autoMount : true,
+        controller: MainContainerController,
+        layout    : {ntype: 'vbox', align: 'stretch'},
+        model     : MainContainerModel,
+        style     : {padding: '20px'},
+
+        items: [{
+            ntype: 'toolbar',
+            flex : 'none',
+            items: ['->', {
+                handler: 'onAddUserButtonClick',
+                iconCls: 'fa fa-circle-plus',
+                text   : 'Add User'
+            }]
+        }, {
+            module      : UserTableContainer,
+            bind        : {store: 'stores.users'},
+            flex        : 1,
+            reference   : 'user-table',
+            wrapperStyle: {maxHeight: '300px'}
+        }, {
+            module: PagingToolbar,
+            bind  : {store: 'stores.users'},
+            flex  : 'none'
+        }]
+    }}
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/examples/toolbar/paging/view/MainContainerController.mjs

@@ -0,0 +1,53 @@
+import ComponentController from '../../../../src/controller/Component.mjs';
+
+/**
+ * @class Neo.examples.toolbar.paging.view.MainContainerController
+ * @extends Neo.controller.Component
+ */
+class MainContainerController extends ComponentController {
+    /**
+     * @member {Neo.examples.toolbar.paging.view.AddUserDialog|null} addUserDialog=null
+     */
+    addUserDialog = null
+
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.toolbar.paging.view.MainContainerController'
+         * @protected
+         */
+        className: 'Neo.examples.toolbar.paging.view.MainContainerController'
+    }}
+
+    /**
+     * @param {Object} data
+     */
+    onAddUserButtonClick(data) {
+        let me = this;
+
+        if (!me.addUserDialog) {
+            import('./AddUserDialog.mjs').then(module => {
+                me.addUserDialog = Neo.create(module.default, {
+                    animateTargetId: data.component.id,
+                    appName        : me.component.appName,
+                    closeAction    : 'hide'
+                });
+            });
+        } else {
+            me.addUserDialog.show();
+        }
+    }
+
+    /**
+     * Sending messages through a WebSocket inside the data worker
+     * @param {Object} data
+     */
+    onUserServiceReadButtonClick(data) {
+        MyApp.backend.UserService.read().then(response => {
+            console.log(response);
+        })
+    }
+}
+
+Neo.applyClassConfig(MainContainerController);
+
+export default MainContainerController;

package/examples/toolbar/paging/view/MainContainerModel.mjs

@@ -0,0 +1,29 @@
+import Component from '../../../../src/model/Component.mjs';
+import UserStore from '../store/Users.mjs';
+
+/**
+ * @class Neo.examples.toolbar.paging.view.MainContainerModel
+ * @extends Neo.model.Component
+ */
+class MainContainerModel extends Component {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.toolbar.paging.view.MainContainerModel'
+         * @protected
+         */
+        className: 'Neo.examples.toolbar.paging.view.MainContainerModel',
+        /**
+         * @member {Object} stores
+         */
+        stores: {
+            users: {
+                module  : UserStore,
+                pageSize: 30
+            }
+        }
+    }}
+}
+
+Neo.applyClassConfig(MainContainerModel);
+
+export default MainContainerModel;

package/examples/toolbar/paging/view/UserTableContainer.mjs

@@ -0,0 +1,39 @@
+import TableContainer from '../../../../src/table/Container.mjs';
+
+/**
+ * @class Neo.examples.toolbar.paging.view.UserTableContainer
+ * @extends Neo.table.Container
+ */
+class UserTableContainer extends TableContainer {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.toolbar.paging.view.UserTableContainer'
+         * @protected
+         */
+        className: 'Neo.examples.toolbar.paging.view.UserTableContainer',
+        /**
+         * @member {Object[]} columns
+         */
+        columns: [{
+            dataField: 'id',
+            text     : 'Id'
+        }, {
+            dataField: 'firstname',
+            text     : 'Firstname'
+        }, {
+            dataField: 'lastname',
+            text     : 'Lastname'
+        },  {
+            dataField: 'isOnline',
+            text     : 'Is Online'
+        }, {
+            dataField: 'image',
+            flex     : 1,
+            text     : 'Image'
+        }]
+    }}
+}
+
+Neo.applyClassConfig(UserTableContainer);
+
+export default UserTableContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.0.15",
+    "version": "4.0.16",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -35,9 +35,9 @@
     "homepage": "https://neomjs.github.io/pages/",
     "dependencies": {
         "@fortawesome/fontawesome-free": "^6.1.1",
-        "@material/mwc-button": "^0.25.3",
-        "@material/mwc-textfield": "^0.25.3",
-        "autoprefixer": "^10.4.5",
+        "@material/mwc-button": "^0.26.0",
+        "@material/mwc-textfield": "^0.26.0",
+        "autoprefixer": "^10.4.7",
         "chalk": "^5.0.1",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^9.2.0",
@@ -52,7 +52,7 @@
         "sass": "^1.51.0",
         "webpack": "^5.72.0",
         "webpack-cli": "^4.9.2",
-        "webpack-dev-server": "4.8.1",
+        "webpack-dev-server": "4.9.0",
         "webpack-hook-plugin": "^1.0.7",
         "webpack-node-externals": "^3.0.0"
     },

package/resources/scss/src/toolbar/Paging.scss

@@ -0,0 +1,5 @@
+.neo-paging-toolbar {
+    .neo-label {
+        font-size: 13px;
+    }
+}

package/src/calendar/view/MainContainer.mjs

@@ -5,7 +5,7 @@ import DateUtil              from '../../util/Date.mjs';
 import EditCalendarContainer from './calendars/EditContainer.mjs';
 import EditEventContainer    from './EditEventContainer.mjs';
 import MainContainerModel    from './MainContainerModel.mjs';
-import Toolbar               from '../../container/Toolbar.mjs';
+import Toolbar               from '../../toolbar/Base.mjs';
 
 const todayDate = new Date();
 

package/src/container/Base.mjs

@@ -37,7 +37,7 @@ class Base extends Component {
          * @example
          * import Button      from '../button/Base.mjs';
          * import MyRedButton from 'myapp/MyRedButton.mjs';
-         * import Toolbar     from '../container/Toolbar.mjs';
+         * import Toolbar     from '../toolbar/Base.mjs';
          *
          * let myButton = Neo.create(Button, {
          *     text: 'Button1'

package/src/container/Panel.mjs

@@ -1,5 +1,5 @@
 import Container from './Base.mjs';
-import Toolbar   from './Toolbar.mjs';
+import Toolbar   from '../toolbar/Base.mjs';
 
 /**
  * An extended Container supporting multiple docked header toolbars

package/src/data/Store.mjs

@@ -50,6 +50,10 @@ class Store extends Base {
          * @member {Boolean} autoLoad=false
          */
         autoLoad: false,
+        /**
+         * @member {Number} currentPage_=1
+         */
+        currentPage_: 1,
         /**
          * @member {Array|null} data_=null
          */
@@ -74,6 +78,11 @@ class Store extends Base {
          * @member {Neo.data.Model} model_=null
          */
         model_: null,
+        /**
+         * Use a value of 0 to not limit the pageSize
+         * @member {Number} pageSize_=0
+         */
+        pageSize_: 0,
         /**
          * True to let the backend handle the filtering.
          * Useful for buffered stores
@@ -86,6 +95,10 @@ class Store extends Base {
          * @member {Boolean} remoteSort=false
          */
         remoteSort: false,
+        /**
+         * @member {Number} totalCount=0
+         */
+        totalCount: 0,
         /**
          * Url for Ajax requests
          * @member {String|null} url=null
@@ -118,6 +131,16 @@ class Store extends Base {
         return super.add(this.beforeSetData(item));
     }
 
+    /**
+     * Triggered after the currentPage config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetCurrentPage(value, oldValue) {
+        oldValue && this.load();
+    }
+
     /**
      * @param value
      * @param oldValue
@@ -160,6 +183,19 @@ class Store extends Base {
         }
     }
 
+    /**
+     * Triggered after the pageSize config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetPageSize(value, oldValue) {
+        if (oldValue) {
+            this._currentPage = 1; // silent update
+            this.load();
+        }
+    }
+
     /**
      * @param {Object|String|null} value
      * @param {Object|String|null} oldValue
@@ -254,13 +290,16 @@ class Store extends Base {
             if (!service) {
                 console.log('Api is not defined', this);
             } else {
-                // todo: add params
-
-                service[fn]().then(response => {
-                    me.data = response.data;
+                service[fn]({
+                    page    : me.currentPage,
+                    pageSize: me.pageSize
+                }).then(response => {
+                    if (response.success) {
+                        me.totalCount = response.totalCount;
+                        me.data       = response.data; // fires the load event
+                    }
                 });
             }
-
         } else {
             Neo.Xhr.promiseJson({
                 url: me.url

package/src/dialog/Base.mjs

@@ -81,7 +81,7 @@ class Base extends Panel {
          */
         dragZoneConfig: null,
         /**
-         * @member {Neo.container.Toolbar|null} headerToolbar=null
+         * @member {Neo.toolbar.Base|null} headerToolbar=null
          */
         headerToolbar: null,
         /**

package/src/form/field/Select.mjs

@@ -10,6 +10,16 @@ import VDomUtil        from '../../util/VDom.mjs';
  * @extends Neo.form.field.Picker
  */
 class Select extends Picker {
+    /**
+     * @member {String} filterOperator='like'
+     */
+    filterOperator = 'like'
+    /**
+     * Set this config to false, in case typing into the input field should not filter list items
+     * @member {Boolean} useFilter=true
+     */
+    useFilter = true
+
     static getStaticConfig() {return {
         /**
          * Valid values for triggerAction
@@ -148,12 +158,12 @@ class Select extends Picker {
         let me = this,
             filters;
 
-        if (value) {
+        if (value && me.useFilter) {
             filters = value.filters || [];
 
             filters.push({
                 includeEmptyValues: true,
-                operator          : 'like',
+                operator          : me.filterOperator,
                 property          : me.displayField,
                 value             : value.get(me.value)?.[me.displayField] || me.value
             });
@@ -209,7 +219,7 @@ class Select extends Picker {
      * @protected
      */
     beforeSetStore(value, oldValue) {
-        oldValue && oldValue.destroy();
+        oldValue?.destroy();
 
         return ClassSystemUtil.beforeSetInstance(value, Store);
     }
@@ -452,7 +462,7 @@ class Select extends Picker {
             me.afterSetValue(value, oldValue, true); // prevent the list from getting filtered
 
             me.fire('select', {
-                record: record,
+                record,
                 value : record[displayField]
             });
         }

package/src/grid/header/Toolbar.mjs

@@ -1,8 +1,8 @@
-import BaseToolbar from '../../container/Toolbar.mjs';
+import BaseToolbar from '../../toolbar/Base.mjs';
 
 /**
  * @class Neo.grid.header.Toolbar
- * @extends Neo.container.Toolbar
+ * @extends Neo.toolbar.Base
  */
 class Toolbar extends BaseToolbar {
     static getConfig() {return {

package/src/list/Base.mjs

@@ -293,6 +293,7 @@ class Base extends Component {
                 break;
             }
 
+            case 'Number':
             case 'String': {
                 item.html = itemContent;
             }

package/src/tab/Container.mjs

@@ -369,7 +369,7 @@ class Container extends BaseContainer {
     }
 
     /**
-     * @returns {Neo.container.Toolbar}
+     * @returns {Neo.toolbar.Base}
      */
     getTabBar() {
         return Neo.getComponent(this.tabBarId);

package/src/tab/header/Toolbar.mjs

@@ -1,8 +1,8 @@
-import BaseToolbar from '../../container/Toolbar.mjs';
+import BaseToolbar from '../../toolbar/Base.mjs';
 
 /**
  * @class Neo.tab.header.Toolbar
- * @extends Neo.container.Toolbar
+ * @extends Neo.toolbar.Base
  */
 class Toolbar extends BaseToolbar {
     static getConfig() {return {

package/src/table/View.mjs

@@ -150,6 +150,10 @@ class View extends Component {
                     }
                 }
 
+                if (column.flex) {
+                    config.style.width = '100%';
+                }
+
                 data[i].cn.push(config);
             }
 

package/src/table/header/Toolbar.mjs

@@ -1,8 +1,8 @@
-import BaseToolbar from '../../container/Toolbar.mjs';
+import BaseToolbar from '../../toolbar/Base.mjs';
 
 /**
  * @class Neo.table.header.Toolbar
- * @extends Neo.container.Toolbar
+ * @extends Neo.toolbar.Base
  */
 class Toolbar extends BaseToolbar {
     static getConfig() {return {

package/src/{container/Toolbar.mjs → toolbar/Base.mjs}

@@ -1,14 +1,14 @@
 import Button    from '../button/Base.mjs';
 import Component from '../component/Base.mjs';
-import Container from './Base.mjs';
+import Container from '../container/Base.mjs';
 import Label     from '../component/Label.mjs';
 import NeoArray  from '../util/Array.mjs';
 
 /**
- * @class Neo.container.Toolbar
+ * @class Neo.toolbar.Base
  * @extends Neo.container.Base
  */
-class Toolbar extends Container {
+class Base extends Container {
     static getStaticConfig() {return {
         /**
          * Valid values for dock
@@ -20,10 +20,10 @@ class Toolbar extends Container {
 
     static getConfig() {return {
         /**
-         * @member {String} className='Neo.container.Toolbar'
+         * @member {String} className='Neo.toolbar.Base'
          * @protected
          */
-        className: 'Neo.container.Toolbar',
+        className: 'Neo.toolbar.Base',
         /**
          * @member {String} ntype='toolbar'
          * @protected
@@ -189,6 +189,6 @@ class Toolbar extends Container {
     }
 }
 
-Neo.applyClassConfig(Toolbar);
+Neo.applyClassConfig(Base);
 
-export default Toolbar;
+export default Base;

package/src/toolbar/Paging.mjs

@@ -0,0 +1,280 @@
+import ClassSystemUtil from '../util/ClassSystem.mjs';
+import SelectField     from '../form/field/Select.mjs';
+import Toolbar         from './Base.mjs';
+
+/**
+ * @class Neo.toolbar.Paging
+ * @extends Neo.toolbar.Base
+ */
+class Paging extends Toolbar {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.toolbar.Paging'
+         * @protected
+         */
+        className: 'Neo.toolbar.Paging',
+        /**
+         * @member {String} ntype='paging-toolbar'
+         * @protected
+         */
+        ntype: 'paging-toolbar',
+        /**
+         * @member {String[]} cls=['neo-paging-toolbar','neo-toolbar']
+         */
+        cls: ['neo-paging-toolbar', 'neo-toolbar'],
+        /**
+         * @member {Number} currentPage_=1
+         */
+        currentPage_: 1,
+        /**
+         * @member {Number} pageSize_=30
+         */
+        pageSize_: 30,
+        /**
+         * @member {Function} pagesText_=me=>`Page: ${me.page} / ${me.getMaxPages()}`
+         */
+        pagesText_: me => `Page ${me.currentPage} / ${me.getMaxPages()}`,
+        /**
+         * @member {Neo.data.Store|null} store_=null
+         */
+        store_: null,
+        /**
+         * @member {Function} totalText_=count=>`Total: ${count} records`
+         */
+        totalText_: count => `Total: ${count} rows`
+    }}
+
+    /**
+     * @param config
+     */
+    construct(config) {
+        super.construct(config);
+        this.createToolbarItems();
+    }
+
+    /**
+     * Triggered after the currentPage config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetCurrentPage(value, oldValue) {
+        if (oldValue) {
+            this.store.currentPage = value;
+        }
+    }
+
+    /**
+     * Triggered after the pageSize config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetPageSize(value, oldValue) {
+        if (oldValue) {
+            this._currentPage = 1; // silent update
+            this.store.pageSize = value;
+        }
+    }
+
+    /**
+     * Triggered after the pagesText config got changed
+     * @param {Function} value
+     * @param {Function} oldValue
+     * @protected
+     */
+    afterSetPagesText(value, oldValue) {
+        oldValue && this.updatePagesText();
+    }
+
+    /**
+     * Triggered after the totalText config got changed
+     * @param {Function} value
+     * @param {Function} oldValue
+     * @protected
+     */
+    afterSetTotalText(value, oldValue) {
+        oldValue && this.updateTotalText();
+    }
+
+    /**
+     * Triggered before the store config gets changed.
+     * @param {Neo.data.Store|Object|null} value
+     * @param {Neo.data.Store|null} oldValue
+     * @returns {Neo.data.Store}
+     * @protected
+     */
+    beforeSetStore(value, oldValue) {
+        let listeners = {
+            load : this.onStoreLoad,
+            scope: this
+        };
+
+        oldValue?.un(listeners);
+
+        return ClassSystemUtil.beforeSetInstance(value, null, {listeners});
+    }
+
+    /**
+     *
+     */
+    createToolbarItems() {
+        let me = this;
+
+        me.items = [{
+            handler  : me.onFirstPageButtonClick.bind(me),
+            iconCls  : 'fa fa-angles-left',
+            reference: 'nav-button-first'
+        }, {
+            handler  : me.onPrevPageButtonClick.bind(me),
+            iconCls  : 'fa fa-angle-left',
+            reference: 'nav-button-prev',
+            style    : {marginLeft: '2px'}
+        }, {
+            ntype    : 'label',
+            reference: 'pages-text',
+            style    : {marginLeft: '10px'},
+            text     : me.pagesText(me)
+        }, {
+            handler  : me.onNextPageButtonClick.bind(me),
+            iconCls  : 'fa fa-angle-right',
+            reference: 'nav-button-next',
+            style    : {marginLeft: '10px'}
+        }, {
+            handler  : me.onLastPageButtonClick.bind(me),
+            iconCls  : 'fa fa-angles-right',
+            reference: 'nav-button-last',
+            style    : {marginLeft: '2px'}
+        }, {
+            ntype: 'label',
+            style: {marginLeft: '50px'},
+            text : 'Rows per page:'
+        }, {
+            module       : SelectField,
+            clearable    : false,
+            hideLabel    : true,
+            listConfig   : {highlightFilterValue: false},
+            listeners    : {change: me.onPageSizeFieldChange.bind(me)},
+            style        : {margin: 0},
+            triggerAction: 'all',
+            useFilter    : false,
+            value        : 30,
+            width        : 70,
+
+            store: {
+                model: {
+                    fields: [
+                        {name: 'id',   type: 'Integer'},
+                        {name: 'name', type: 'Integer'}
+                    ]
+                },
+                data: [
+                    {id: 1, name:  10},
+                    {id: 2, name:  20},
+                    {id: 3, name:  30},
+                    {id: 4, name:  50},
+                    {id: 5, name: 100}
+                ]
+            }
+        }, '->', {
+            ntype    : 'label',
+            reference: 'total-text',
+            text     : me.totalText(me.store.totalCount)
+        }];
+    }
+
+    /**
+     * @returns {Number}
+     */
+    getMaxPages() {
+        return Math.ceil(this.store.totalCount / this.pageSize);
+    }
+
+    /**
+     *
+     */
+    onFirstPageButtonClick() {
+        this.currentPage = 1;
+    }
+
+    /**
+     *
+     */
+    onLastPageButtonClick() {
+        this.currentPage = this.getMaxPages();
+    }
+
+    /**
+     *
+     */
+    onNextPageButtonClick() {
+        let me = this;
+
+        if (me.currentPage < me.getMaxPages()) {
+            me.currentPage++;
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onPageSizeFieldChange(data) {
+        this.pageSize = data.value;
+    }
+
+    /**
+     *
+     */
+    onPrevPageButtonClick() {
+        if (this.currentPage > 1) {
+            this.currentPage--;
+        }
+    }
+
+    /**
+     *
+     */
+    onStoreLoad() {
+        let me = this;
+
+        me.updateNavigationButtons();
+        me.updatePagesText();
+        me.updateTotalText();
+    }
+
+    /**
+     *
+     */
+    updateNavigationButtons() {
+        let me          = this,
+            currentPage = me.currentPage,
+            maxPages    = me.getMaxPages();
+
+        me.down({reference: 'nav-button-first'}).disabled = currentPage === 1;
+        me.down({reference: 'nav-button-prev'}) .disabled = currentPage === 1;
+        me.down({reference: 'nav-button-next'}) .disabled = currentPage === maxPages;
+        me.down({reference: 'nav-button-last'}) .disabled = currentPage === maxPages;
+    }
+
+    /**
+     *
+     */
+    updatePagesText() {
+        let me = this;
+
+        me.down({reference: 'pages-text'}).text = me.pagesText(me);
+    }
+
+    /**
+     *
+     */
+    updateTotalText() {
+        let me = this;
+
+        me.down({reference: 'total-text'}).text = me.totalText(me.store.totalCount);
+    }
+}
+
+Neo.applyClassConfig(Paging);
+
+export default Paging;

package/src/util/ClassSystem.mjs

@@ -21,6 +21,8 @@ class ClassSystem extends Base {
      * @returns {Neo.core.Base} instance
      */
     static beforeSetInstance(config, DefaultClass=null, defaultValues={}) {
+        let isInstance = config instanceof Neo.core.Base;
+
         if (Neo.isString(DefaultClass)) {
             DefaultClass = Neo.ns(DefaultClass);
         }
@@ -29,7 +31,7 @@ class ClassSystem extends Base {
             config = Neo.create(DefaultClass, defaultValues);
         } else if (config?.isClass) {
             config = Neo.create(config, defaultValues);
-        } else if (Neo.isObject(config) && !(config instanceof Neo.core.Base)) {
+        } else if (Neo.isObject(config) && !isInstance) {
             if (config.ntype) {
                 config = Neo.ntype({
                     ...defaultValues,
@@ -49,6 +51,10 @@ class ClassSystem extends Base {
 
                 config = Neo.create(newConfig);
             }
+        } else if (isInstance) {
+            if (defaultValues?.listeners) {
+                config.on(defaultValues.listeners);
+            }
         }
 
         return config;