contextSettingsCustomField.js

console.log('🤙');

myBrowser = function (config) {
    config = config || {};

    // if (config.length != 0 && config.openTo != undefined) {
    //     if (!/^\//.test(config.openTo)) {
    //         config.openTo = '/' + config.openTo;
    //     }
    //     if (!/$\//.test(config.openTo)) {
    //         var tmp = config.openTo.split('/');
    //         delete tmp[tmp.length - 1];
    //         tmp = tmp.join('/');
    //         config.openTo = tmp.substr(1)
    //     }
    // }

    Ext.applyIf(config, {
        width: 300
      , triggerAction: 'all'
      , hideFiles: false
      // , store: new Ext.data.SimpleStore({
      //     fields: ["data","value"]
      //   , data: [
      //       ["Displayed", "value"]
      //     ]
      //   })
      // , displayField: "data"
      // , valueField: config.value
    });
    myBrowser.superclass.constructor.call(this, config);
    this.config = config;
};
Ext.extend(myBrowser, Ext.form.TriggerField, {
    browser: null,

    onTriggerClick: function () {
      if (this.disabled) {
        return false;
      }
      var browser = MODx.load({
        xtype: 'modx-browser',
        id: Ext.id(),
        multiple: false,
        source: this.config.source || MODx.config['default_media_source'],
        rootVisible: this.config.rootVisible || false,
        allowedFileTypes: this.config.allowedFileTypes || '',
        wctx: this.config.wctx || 'web',
        openTo: this.config.openTo || '',
        rootId: this.config.rootId || '/',
        hideSourceCombo: this.config.hideSourceCombo || false,
        hideFiles: this.config.hideFiles || true,
        listeners: {
          select: {
            fn: function (data) {
              console.log(this);
              // Ext.getCmp(this.trigger.id).setValue(data.fullRelativeUrl);
              this.fireEvent('select', data);
            }, scope: this
          }
        },
      });
      // browser.win.buttons[0].on('disable', function () {
      //   this.enable()
      // });
      // browser.win.tree.on('click', function (n) {
      //   console.log(n);
      //   this.setValue(this.getPath(n));
      // }, this);
      // browser.win.tree.on('dblclick', function (n) {
      //   console.log(n);
      //   this.setValue(this.getPath(n));
      //   browser.hide()
      // }, this);
      browser.show();
    },

    getPath: function (n) {
        if (n.id == '/') {
            return '';
        }

        return n.attributes.pathRelative + '/';
    }
});
Ext.reg('my-combo-browser', myBrowser);

// 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"
            })
          , new Ext.data.Record({
              d: "my-combo-browser"
            , v: "my-combo-browser"
            })
          , new Ext.data.Record({
              d: "modx-panel-static"
            , v: "modx-panel-static"
            })
          ];
          store.add(newXtypes);
        }
      , scope: this
      }
    }
  });
});