Add MuliSelect predefined form element

elements-at · Nov 6, 2023 · 8cce47a · 8cce47a
1 parent d424497
commit 8cce47a
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 0 deletions.
diff --git a/src/Resources/public/js/executor/callback/example.js b/src/Resources/public/js/executor/callback/example.js
@@ -46,6 +46,23 @@ pimcore.plugin.processmanager.executor.callback.example = Class.create(pimcore.p
             mandatory : true
         }));
 
+
+        /*Multi select
+        The URL should return an array like this:
+       {
+            "data": [
+                {
+                  "key": 345,
+                  "value": "My Display field"
+                }
+            ]
+        }
+         */
+       /* items.push(this.getMultiSelect('classificationIndustry',{
+            url : '/admin/app/get-multiselect-options?type=classificationIndustry',
+            height: 150
+        }));*/
+
         //Select field
         var selectConfig = config;
         selectConfig.store = [

diff --git a/src/Resources/public/js/helper/form.js b/src/Resources/public/js/helper/form.js
@@ -76,6 +76,42 @@ pimcore.plugin.processmanager.helper.form = Class.create({
         }, config);
     },
 
+    getMultiSelect : function (fieldName,config) {
+        config = defaultValue(config,{});
+
+        let store = new Ext.data.Store({
+            proxy: {
+                url: config.url,
+                type: 'ajax',
+                reader: {
+                    type: 'json',
+                    rootProperty: "data"
+                }
+            },
+            fields: ["key","value"],
+            autoLoad: true
+        });
+
+        let value = this.getFieldValue(fieldName);
+        if(value == ''){
+            value = null;
+        }
+        return Ext.create('Ext.ux.form.MultiSelect', this.mergeConfigs({
+            name: fieldName,
+            triggerAction: "all",
+            editable:false,
+            labelWidth: defaultValue(config.labelWidth,this.labelWidth),
+            fieldLabel: this.getFieldLabel(fieldName, config),
+            width:'100%',
+            height : defaultValue(config.height,100),
+            store: store,
+            displayField: "value",
+            valueField: "key",
+            afterLabelTextTpl: this.getTooltip(config.tooltip),
+            value: value
+        },config));
+    },
+
     getLocaleSelection : function (fieldName,config) {
         config = defaultValue(config,{});
         var localestore = [];