How to configure a dropdown in the MODX Collections children grid? - modx

Question

I want to be able to change the value of a TV for Resources shown in a Collections grid using a dropdown select bo.
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
populated from a fixed list, simply options 1, 2, 3
I understand this is possible but can't find an example close enough to what I need to achieve that I can figure it out on my own.
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
I've looked for examples of similar dropdowns in the source code of other Extras. I see xtype references but am unable to reverse engineer them to figure what I need to create my own dropdown in the Collections grid.
Susan Otwell's example above creates a dropdown based on xtype modx-combo-user. This looks close to what I need but I can't figure how to adapt this to create a dropdown from either TV values or a fixed list.
{"xtype":"modx-combo-user","renderer":true,"fields": ["fullname","username","id"],"displayField": "fullname","baseParams": {"action": "security/user/getlist","usergroup":2}}
Can anyone provide an example or point me to another resource that may help?

Answer 1

I just answered this one on the MODX forums but here it is for anyone on StackOverflow:
Create a JS file in your assets directory. For simplicity sake,
create a file called test.js in your assets directory.
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.
For this example, copy and paste the following ZoomLevel (meant for Google Maps zoom) example into your new test.js file.
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);
Once pasted, save the file.
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:
https://github.com/modxcms/Collections/blob/9a328fa881b76e2ce355876156eaca3126065717/assets/components/collections/js/mgr/extra/collections.combo.js