JsWidgets: improve LogicalGrid demo

crispin-kirchner · Jun 3, 2024 · 8076f90 · 8076f90
1 parent 8707389
commit 8076f90
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 7 deletions.
diff --git a/code/widgets/org.eclipse.scout.jswidgets.ui.html/src/main/js/logicalgrid/LogicalGridForm.ts b/code/widgets/org.eclipse.scout.jswidgets.ui.html/src/main/js/logicalgrid/LogicalGridForm.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
+ * Copyright (c) 2010, 2024 BSI Business Systems Integration AG
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -42,17 +42,28 @@ export class LogicalGridForm extends Form {
     logicalGridField.setValue(groupBox.logicalGrid);
     logicalGridField.on('propertyChange:value', event => this.widget('DetailBox').setLogicalGrid(event.newValue));
 
+    let gridColumnCountField = this.widget('GridColumnCountField');
+    gridColumnCountField.setValue(groupBox.gridColumnCount);
+    gridColumnCountField.on('propertyChange:value', event => this.widget('DetailBox').setGridColumnCount(event.newValue));
+
+    let bodyLayoutConfigBox = this.widget('BodyLayoutConfigBox');
+    bodyLayoutConfigBox.getLayoutConfig = () => groupBox.bodyLayoutConfig;
+    bodyLayoutConfigBox.setLayoutConfig = layoutConfig => {
+      groupBox.setBodyLayoutConfig(layoutConfig);
+    };
+    bodyLayoutConfigBox.setField(groupBox);
+
     this.widget('GridDataBox').setEnabled(!!targetField.value);
 
     this.widget('Actions.AddFieldBox').setField(groupBox);
     this.widget('Actions.DeleteFieldBox').setField(groupBox);
   }
 
   protected _initFields(fields: FormField[]) {
-    fields.forEach(function(field) {
+    fields.forEach(field => {
       field.off('render', this._fieldRenderHandler);
       field.on('render', this._fieldRenderHandler);
-    }, this);
+    });
   }
 
   protected _onFieldRender(event: Event<FormField>) {

diff --git a/...dgets/org.eclipse.scout.jswidgets.ui.html/src/main/js/logicalgrid/LogicalGridFormModel.ts b/...dgets/org.eclipse.scout.jswidgets.ui.html/src/main/js/logicalgrid/LogicalGridFormModel.ts
@@ -1,14 +1,16 @@
 /*
- * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
+ * Copyright (c) 2010, 2024 BSI Business Systems Integration AG
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
  * which is available at https://www.eclipse.org/legal/epl-2.0/
  *
  * SPDX-License-Identifier: EPL-2.0
  */
-import {FormModel, GroupBox, SmartField, StringField, TabBox, TabItem} from '@eclipse-scout/core';
-import {GridDataBox, GridDataBoxWidgetMap, GroupBoxAddFieldBox, GroupBoxAddFieldBoxWidgetMap, GroupBoxDeleteFieldBox, GroupBoxDeleteFieldBoxWidgetMap, LogicalGridLookupCall} from '../index';
+import {FormModel, GroupBox, NumberField, SmartField, StringField, TabBox, TabItem} from '@eclipse-scout/core';
+import {
+  GridDataBox, GridDataBoxWidgetMap, GroupBoxAddFieldBox, GroupBoxAddFieldBoxWidgetMap, GroupBoxDeleteFieldBox, GroupBoxDeleteFieldBoxWidgetMap, LogicalGridLayoutConfigBox, LogicalGridLayoutConfigBoxWidgetMap, LogicalGridLookupCall
+} from '../index';
 
 export default (): FormModel => ({
   id: 'jswidgets.LogicalGridForm',
@@ -72,9 +74,17 @@ export default (): FormModel => ({
                     label: 'Logical Grid',
                     lookupCall: LogicalGridLookupCall,
                     tooltipText: '${textKey:LogicalGridTooltip}'
+                  }, {
+                    id: 'GridColumnCountField',
+                    objectType: NumberField,
+                    label: 'Grid Column Count'
                   }
                 ]
               },
+              {
+                id: 'BodyLayoutConfigBox',
+                objectType: LogicalGridLayoutConfigBox
+              },
               {
                 id: 'GridDataBox',
                 objectType: GridDataBox,
@@ -127,9 +137,11 @@ export type LogicalGridFormWidgetMap = {
   'PropertiesBox': GroupBox;
   'TargetField': SmartField<any>;
   'LogicalGridField': SmartField<any>;
+  'GridColumnCountField': NumberField;
+  'BodyLayoutConfigBox': LogicalGridLayoutConfigBox;
   'GridDataBox': GridDataBox;
   'CalculatedGridDataBox': GridDataBox;
   'ActionsTab': TabItem;
   'Actions.AddFieldBox': GroupBoxAddFieldBox;
   'Actions.DeleteFieldBox': GroupBoxDeleteFieldBox;
-} & GridDataBoxWidgetMap & GroupBoxAddFieldBoxWidgetMap & GroupBoxDeleteFieldBoxWidgetMap;
+} & LogicalGridLayoutConfigBoxWidgetMap & GridDataBoxWidgetMap & GroupBoxAddFieldBoxWidgetMap & GroupBoxDeleteFieldBoxWidgetMap;