Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Custom ComboBox (list) as a value type for MODX system settings
let ChildhoodPeriods = function(config) {
config = config || {};
const store = new{
fields: ['key', 'caption'],
data: [
['inf', 'Infants (0-1 year)'],
['tdl', 'Toddlers (1-3 years)'],
['prs', 'Preschoolers (3-5 years)'],
['mch', 'Middle Childhood (9-11 years)'],
['ytn', 'Young Teens (12-14 years)'],
['tng', 'Teenagers (15-17 years)'],
Ext.applyIf(config, {
store: store,
name: 'childhood-periods',
hiddenName: 'childhood-periods',
displayField: 'caption',
valueField: 'key',
mode: 'local',
triggerAction: 'all',
editable: false,
selectOnFocus: false,
preventRender: true
});, config);
Ext.extend(ChildhoodPeriods, MODx.combo.ComboBox);
Ext.reg('childhood-periods', ChildhoodPeriods);
if ('OnManagerPageBeforeRender' !== $modx->event->name) {
return; // exit if any other event happened
if ('system/settings' !== $_GET['a']) {
return; // exit if any other page than system settings loaded
$pathPrefix = MODX_ASSETS_URL . 'components/csf/js/mgr/';
$modx->controller->addLastJavascript($pathPrefix . 'childhood-periods.combo.js');
$modx->controller->addLastJavascript($pathPrefix . 'ss-xtypes-loader.js');
let TypesListSpec = Ext.ComponentMgr.create(
const record = new
{d: 'Childhood Periods', v: 'childhood-periods'}
TypesList = function(config) {
config = config || {};
displayField: 'd',
valueField: 'v',
mode: 'local',
name: 'xtype',
hiddenName: 'xtype',
triggerAction: 'all',
editable: false,
selectOnFocus: false,
value: 'textfield'
});, config);
Ext.extend(TypesList, Ext.form.ComboBox);
Ext.reg('modx-combo-xtype-spec', TypesList);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment