examples.grid.bigData.MainContainer: add a header toolbar with controls #6212

Author: tobiu

examples/grid/bigData/MainContainer.mjs

@@ -1,4 +1,6 @@
+import ComboBox      from '../../../src/form/field/ComboBox.mjs';
 import GridContainer from './GridContainer.mjs';
+import Toolbar       from '../../../src/toolbar/Base.mjs';
 import Viewport      from '../../../src/container/Viewport.mjs';
 
 /**
@@ -13,18 +15,81 @@ class MainContainer extends Viewport {
          */
         className: 'Neo.examples.grid.bigData.MainContainer',
         /**
-         * @member {Object[]} items=[GridContainer]
+         * @member {Object[]} items
          */
-        items: [GridContainer],
+        items: [{
+            module: Toolbar,
+            flex  : 'none',
+            style : {marginBottom: '1em'},
+            items : [{
+                module      : ComboBox,
+                clearable   : false,
+                displayField: 'id',
+                editable    : false,
+                labelText   : 'Amount Rows',
+                labelWidth  : 110,
+                listeners   : {change: 'up.onAmountRowsChange'},
+                store       : ['1000', '5000', '10000', '20000'],
+                value       : '10000',
+                width       : 200
+            }, {
+                module      : ComboBox,
+                clearable   : false,
+                displayField: 'id',
+                editable    : false,
+                labelText   : 'Amount Columns',
+                labelWidth  : 135,
+                listeners   : {change: 'up.onAmountColumnsChange'},
+                store       : ['25', '50', '75', '100'],
+                style       : {marginLeft: '2em'},
+                value       : '50',
+                width       : 200
+            }, {
+                module      : ComboBox,
+                clearable   : false,
+                displayField: 'id',
+                editable    : false,
+                labelText   : 'Buffer Rows',
+                labelWidth  : 100,
+                listeners   : {change: 'up.onAmountBufferRowsChange'},
+                store       : ['0', '3', '5', '10', '25', '50'],
+                style       : {marginLeft: '2em'},
+                value       : '5',
+                width       : 160
+            }]
+        }, {
+            module: GridContainer
+        }],
         /**
-         * @member {Object} layout={ntype:'fit'}
+         * @member {Object} layout={ntype:'vbox',align:'stretch'}
          */
-        layout: {ntype: 'fit'},
+        layout: {ntype: 'vbox', align: 'stretch'},
         /**
          * @member {Object} style={padding:'20px'}
          */
         style: {padding: '20px'}
     }
+
+    /**
+     * @param {Object} data
+     */
+    onAmountBufferRowsChange(data) {
+        console.log('onAmountBufferRowsChange', data);
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onAmountColumnsChange(data) {
+        console.log('onAmountColumnsChange', data);
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onAmountRowsChange(data) {
+        console.log('onAmountRowsChange', data);
+    }
 }
 
 export default Neo.setupClass(MainContainer);

examples/grid/bigData/MainStore.mjs

@@ -16,7 +16,7 @@ class MainStore extends Store {
      */
     construct(config) {
         super.construct(config);
-        this.data = this.generateData(50000);
+        this.data = this.generateData(10000);
         console.log(this);
     }