Custom ComboBox (list) as a value type for MODX system settings

childhood-periods.combo.js

let ChildhoodPeriods = function(config) {
  config = config || {};
    
  const store = new Ext.data.SimpleStore({
    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
  });

  ChildhoodPeriods.superclass.constructor.call(this, config);
};

Ext.extend(ChildhoodPeriods, MODx.combo.ComboBox);
Ext.reg('childhood-periods', ChildhoodPeriods);

CustomSettingFields.php

<?php

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');

ss-xtypes-loader.js

let TypesListSpec = Ext.ComponentMgr.create(
  Ext.ComponentMgr.types['modx-combo-xtype-spec']
);

const record = new TypesListSpec.initialConfig.store.recordType(
  {d: 'Childhood Periods', v: 'childhood-periods'}
);

TypesListSpec.initialConfig.store.add(record);

TypesList = function(config) {
    config = config || {};
    Ext.applyIf(config,{
        store: TypesListSpec.initialConfig.store,
        displayField: 'd',
        valueField: 'v',
        mode: 'local',
        name: 'xtype',
        hiddenName: 'xtype',
        triggerAction: 'all',
        editable: false,
        selectOnFocus: false,
        value: 'textfield'
    });
    TypesList.superclass.constructor.call(this, config);
};
Ext.extend(TypesList, Ext.form.ComboBox);
Ext.reg('modx-combo-xtype-spec', TypesList);