How to configure a TV dropdown in the Collections children grid?

Support Extras
1

Specifically I want to be able to change the value of a TV using a dropdown select box in the Collections children grid.

Can anyone provide an example of how to create a select box in a Collection grid that is either

  • populated from the options in an existing Template Variable (tv.pin-order, TV configuration noted at end)
  • populated from a fixed list, simply options 1, 2, 3

Things I’ve tried are

I have seen Susan Otwell’s example of how to change Created By with a select box
http://modxcookbook.com/add-ons/collections/editable-grid-view.html

Discussion linked below addresses a similar problem but remains unanswered
https://forums.modx.com/thread/95984/adding-modx-combo-to-collections-list

MIGX configuration and syntax appear similar but not close enough that I can figure what I need to do
https://forums.modx.com/thread/91403/single-select-listbox-entries-in-migx

MODx.combo.ComboBox docs look like they have some relevant detail but I don’t know enough to understand if this is useful
https://docs.modx.com/revolution/2.x/developing-in-modx/advanced-development/custom-manager-pages/modext/modx.combo.combobox

Configuration of my TV - tv.pin-order

  • Type: Listbox (single select)
  • Input Option Values: 1||2||3

Note: edited to improve clarity of the query.

2

Edited original query to improve clarity - can anyone help me configure a dropdown select box in the Collections children grid please?

3

Super Helpful, all these answers!

4

Silence over on Stack Overflow as well.

Looks like I’ll need to resume trial and error. Or risk raising an issue on Github despite this not being an issue with the code.

5

Hi!
Sorry no one’s replied to you yet, just saw this.
You said you tried Susan’s example. What happened? It didn’t work?

Here’s a combo box I made recently for adjusting the zoom of a google map. It uses static (local) numbering.

/**
 * ComboBox for selecting Zoom Level of a Google Map.
 * @param config
 * @constructor
 */
MyExtra.combo.ZoomLevel = function(config) {
    config = config || {};
    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'
    });
    MyExtra.combo.ZoomLevel.superclass.constructor.call(this,config);
};
Ext.extend(MyExtra.combo.ZoomLevel,MODx.combo.ComboBox);
Ext.reg('myextra-combo-zoomlevel',MyExtra.combo.ZoomLevel);

And here’s an example of one that uses remote data from a processor.

MyExtra.combo.Category = function(config) {
    config = config || {};
    Ext.applyIf(config,{
        url: MyExtra.config.connectorUrl
        ,baseParams: {
            action: 'mgr/category/getlist'
        }
        ,fields: ['id','name']
        ,mode: 'remote'
        ,displayField: 'name'
        ,valueField: 'id'
        ,typeAhead: true
        ,editable:true
        ,forceSelection:true
    });
    MyExtra.combo.Category.superclass.constructor.call(this,config);
};
Ext.extend(MyExtra.combo.Category,MODx.combo.ComboBox);
Ext.reg('myextra-combo-category',MyExtra.combo.Category);
6

So I had a play around with Collections to see how to get the combobox definitions in there.
The definitions I posted above are JavaScript and meant for custom manager pages so you won’t be able to just copy and paste them into the Collections column editor field. That only allows JSON.

Collections has been designed really well (kudos to the author @theboxer ) and allows you to set your own custom JS file to get loaded.

  1. Create a JS file in your assets directory. For simplicity sake, create a file called test.js in your assets directory.

  2. Go to the MODX system settings page and select the Collections namespace filter. Then in the collections.user_js setting, enter the value: {assets_url}test.js. This will instruct Collections to load your new test.js file whenever Collections is initiated.

  3. For this example, copy and paste the ZoomLevel example I posted above into your new test.js file but change all the “MyExtra” parts to “collections”. i.e.

collections.combo.ZoomLevel = function(config) {
    config = config || {};
    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);

  1. Once pasted, save the file!

  2. Go to your collections view page and add a new column for your collections grid. In the editor field, copy and paste the following JSON:

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

You now have a combobox editor with the values we defined in the test.js file.

These combo-boxes are very configurable but it can be a bit of a steep learning curve to find out what setting does what.

Here you can see the combos that Collections itself defines:

7

@digitalpenguin thanks very much.

You said you tried Susan’s example. What happened? It didn’t work?

Didn’t try this as it uses x-type: modx-combo-user. I recognised it as similar to what I need but not close enough that I could figure out how to make it happen on my own.

From your example (and link to collections.combo.js which I failed to recognise when poking around the code on my own), I should have enough to be able to make a combo dropdown with key > value pairs for more user friendly display eg. zoomlevel high=1, medium=5, low=10.

Heavy workload today but I’ll get to this over the weekend.

Thanks again.

8

OK great, good luck with it. MODX has extended the original ExtJS functionality of comboboxes a bit but all the original settings should still apply.

Find them here:
https://docs.sencha.com/extjs/3.4.0/#!/api/Ext.form.ComboBox

Edit: The forum won’t allow the direct link it seems, so just search for combobox when you’re at the documentation home page.

9

Quick update - I got what I needed done based on @digitalpenguin 's ZoomLevel example with static numbering.

When time allows I’ll have a go at the same but with a remote processor.

Thanks again.

1 Like