Collections Editors Complete List

01-introduction.md

1 Introduction

Collections is a handy tool to display the child resources of a parent inside a configurable grid. Each column can get its own configurable editor so you can edit a resource right from the grid.

Example for a datatime editor

Editors can be attached by editing the collections column settings:

An editor can be used any valid xtype (string) or JSON object.

https://docs.modx.com/current/en/extras/collections/index#:~:text=Editors-,%C2%B6,-As%20an%20editor

simple datefield WITHOUT configuation

datefield

advanced datefield WITH configuration as JSON array

{"xtype":"datefield","format":"d.m.Y H:i"}
```

This gists aims to collect all available information about available editors that work inside collections.

Sources:
* Modx: https://github.com/modxcms/revolution/blob/b3c5d74cd4ea53645e3d26d56a93d11c0c94ee26/manager/assets/modext/widgets/core/modx.combo.js
* Collections: https://github.com/modxcms/Collections/blob/4aa35b229787a0ec76dfcc50da578cf01ff69b1a/assets/components/collections/js/mgr/extra/collections.combo.js

# Editors:

02-questions.md

2 Unsolved problems

Richtext Editor (not confirmed)

untested solution with tinymce... https://forums.modx.com/thread/83447/how-bind-rich-text-editor-tinymce-package-to-modext-textarea-field-in-custom-component

modx-combo:superboxselect (broken)

{"xtype":"superboxselect","store":["FR","SO","JR","SR"]}

Select pops up, but is cluncky to edit. Data is also not saved to db

modx-combo-browser (doesn't work)

{"xtype": "modx-combo-browser", "renderer": true} 
or just 
modx-combo-browser

Renders the combo browser element, clicking the icon opens the browser and a file can be picked. Field is not updated for unknown reasons. I suspect the same cause as the one responsibe for the superboxselect problem above.

03-collections.md

3 Collections xtypes

textfield (ok)

textfield

textarea (ok)

textarea

htmleditor

There is a primitive html editor that adds simple spans and br elements. This editor seems unrelated to the system rte.

{"xtype": "htmleditor"}

numberfield (ok)

numberfield 

datefield (ok)

datefield

xtype:collections-combo-resource

Displays a paginated list of resources. Resource id is returned

{"xtype": "collections-combo-resource"}

04-modx.md

4 Native MODX xtypes

xtype:numberfield (ok)

{"xtype":"numberfield","allowDecimals":false,"allowNegative":false}

xtype:datefield (ok)

{"xtype":"datefield","format":"d.m.Y H:i"}

docs

• http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.Date
• http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.Date

modx-combo-boolean (ok)

Shows true/false dropdown. Returns either 1 OR nothing (EMPTY).

{"xtype":"modx-combo-boolean"}

xtype:modx-combo (ok)

Returns 1 or 2

{"xtype":"modx-combo","store":["1","2"]} 

Returns label 1 or label 2

With labels:

{"xtype":"modx-combo", "fields": ["id","label"], "store": [[1,"label 1"],[2, "label 2"]]}

xtype:modx-combo-template (ok)

{"xtype": "modx-combo-template"}

xtype:modx-combo-country (ok)

Returns a list of countries and stores the countries two letter code.

{"xtype":"modx-combo-country"} 

xtype:modx-combo-charset (ok)

Returns a list of countries and charsets and returns the charsetcode

{"xtype":"modx-combo-charset"} 

xtype:odx-combo-language (ok)

Returns a list of two letter country codes

{"xtype":"modx-combo-language"} 

Note: It would be great to have labels here.

xtype:modx-combo-user (ok)

code: https://github.com/modxcms/revolution/blob/b3c5d74cd4ea53645e3d26d56a93d11c0c94ee26/manager/assets/modext/widgets/core/modx.combo.js#L240

{"xtype":"modx-combo-user","renderer":true,"fields": ["fullname","username","id"],"displayField": "fullname","baseParams": {"action": "security/user/getlist","usergroup":1}}

docs: https://modxcookbook.com/add-ons/collections/editable-grid-view.html

xtype:modx-combo-usergroup (ok)

code: https://github.com/modxcms/revolution/blob/b3c5d74cd4ea53645e3d26d56a93d11c0c94ee26/manager/assets/modext/widgets/core/modx.combo.js#L261

{"xtype":"modx-combo-usergroup" ,"renderer": true}

09-collections-combo-zoomlevel.md

Example custom editor by digitalpenguin (ok)

Source: https://community.modx.com/t/how-to-configure-a-tv-dropdown-in-the-collections-children-grid/859/5

Usage: {"xtype": "collections-combo-zoomlevel","renderer": true}

Copy the code below into your collection user.js file:

Ext.applyIf(config,{
        store: new Ext.data.ArrayStore({
            id: 0
            ,fields: ['level']
            ,data: [
                ['1'],
                ['2'],
                ['3'],
                ['4'],
                ['5'],
                ['6'],
                ['7'],
                ['8'],
                ['9'],
                ['10'],
                ['11'],
                ['12'],
                ['13'],
                ['14'],
                ['15'],
                ['16'],
                ['17'],
                ['18'],
                ['19'],
                ['20'],
                ['21']
            ]
        })
        ,mode: 'local'
        ,displayField: 'level'
        ,valueField: 'level'
        ,name: 'zoom_level'
        ,hiddenName:'zoom_level'
    });
    collections.combo.ZoomLevel.superclass.constructor.call(this,config);
};
Ext.extend(collections.combo.ZoomLevel,MODx.combo.ComboBox);
Ext.reg('collections-combo-zoomlevel',collections.combo.ZoomLevel);

19-collections-combo-resourcelist.md

Return a list of resources. results can be filtered by id,parent,template,etc. A complete list of options can be found in core/model/modx/processors/resource/search.class.php#L46

/*
    collections.combo.resourcelist
    ------------------------------
    https://github.com/modxcms/revolution/blob/2.x/core/model/modx/processors/resource/getlist.class.php
    https://github.com/modxcms/revolution/blob/28f1b46d4d4984c84dff7f4a5770b81ebe2be00e/core/model/modx/processors/resource/search.class.php#L46
    {"xtype":"collections-combo-resourcelist","baseParams": {"action": "resource/search","parent":15}}
*/

    collections.combo.resourcelist = function(config) {
        config = config || {};
        Ext.applyIf(config,{
             name: 'resource'
            ,hiddenName: 'resource'
            ,displayField: 'pagetitle'
            ,valueField: 'id'
            ,pageSize: 20
            ,fields: ['id','pagetitle','longtitle']
            ,tpl: new Ext.XTemplate(
                 '<tpl for=".">'
                    ,'<div class="x-combo-list-item">'
                        ,'<span style="font-weight: bold">{id}: {pagetitle:htmlEncode}</span>'
                        ,'<tpl if="longtitle"> - <span style="font-style:italic">{longtitle:htmlEncode}</span></tpl>'
                    ,'</div>'
                ,'</tpl>'
            )
            ,url: MODx.config.connector_url
            ,baseParams: {
                 action: 'resource/search'
                ,combo: 1 // ??
                ,parent: 17
                ,sort: 'id' // works
                ,dir: 'DESC' // works, important: CAPITAL LETTERS
            }
            // ,listWidth: 350
            ,allowBlank: true
        });
        collections.combo.resourcelist.superclass.constructor.call(this,config);
    };
    Ext.extend(collections.combo.resourcelist,MODx.combo.ComboBox);
    Ext.reg('collections-combo-resourcelist',collections.combo.resourcelist);