Getting MODx to use a custom option widget in System Settings

<?php
/**
 * @var modX $modx
 * @event OnManagerPageBeforeRender
 */
// Make sure we are on the system setting 'page'
if (70 == $_GET['a']) {
    /** @var modManagerController $controller */
    $controller = $modx->event->params['controller'];
    $controller->addJavascript('/url/to/your/js/file.js');
}

return '';

<?php
/**
 * @var modX $modx
 * @event OnManagerPageBeforeRender
 */
// Make sure we are on the system setting 'page'
if (70 == $_GET['a']) {
    /** @var modManagerController $controller */
    $controller = $modx->event->params['controller'];
    // Commented here is the "custom xtype will be hardcoded later (see var demoXtype)
    //$controller->addJavascript('/url/to/your/js/file.js');
    $controller->addHtml(
'<script type="text/javascript">
    // This a demo combo, instead use your own with your processor to load your "options"
    var demoXtype = function(config) {
        Ext.apply(config, {
            store: new Ext.data.SimpleStore({
                fields: ["data","value"]
                ,data: [
                    ["Displayed", "value"]
                    ,["Displayed2", "value2"]
                ]
            })
            ,displayField: "data"
            ,valueField: "value"
            ,mode: "local"
        });
        demoXtype.superclass.constructor.call(this, config);
    };
    Ext.extend(demoXtype, MODx.combo.ComboBox);
    Ext.reg("demo-xtype", demoXtype);

    Ext.onReady(function() {
        Ext.override(MODx.combo.xType, {
            listeners: {
                afterRender: {
                    fn: function(elem) {
                        var store = elem.getStore();
                        // Add your custom xtype(s)
                        var newXtypes = [
                            new Ext.data.Record({
                                d: "Demo xtype"
                                ,v: "demo-xtype"
                            })
                            ,new Ext.data.Record({
                                d: "Another fake xtype"
                                ,v: "textfield"
                            })
                        ];
                        store.add(newXtypes);
                    }
                    ,scope: this
                }
            }
        });
});
</script>');
}

return '';