MODX SuperBoxSelect For Dummies

Dealing now more then one year with MODX revo and ExtJS, I thought it can’t be too hard to add a SuperBoxSelect component to a custom manager page. The fact that it’s now even integrated in MODX (thanks Ben), made me believe this will be a 5 min job (yeah i’m still an optimist and obviously there’s allot to learn).

Also there are plenty of information, forums and examples out there but it still took me almost half a night to puzzle them together and made it actually work.

So here, step by step what finally worked for me (not sure if this is the best solution so any input welcome).

1. I created a custom component so I can re use it later.

/**
 * User SuperBoxSelect
 *
 * @class MODx.combo.Users
 * @extends Ext.ux.form.SuperBoxSelect
 * @xtype modx-superbox-user
 */
MODx.combo.Users = function (config) {
    config = config || {};
    Ext.applyIf(config, {
        xtype:'superboxselect'
        ,triggerAction: 'all'
    ,mode: 'remote'
        ,valueField: "id"
        ,displayField: "username"
    ,store: new Ext.data.JsonStore({
        id:'id',
        autoLoad: true,
        root:'results',
        fields: ['username', 'id'],
        url: MODx.config.connectors_url+'security/user.php',
        baseParams:{
            action: 'getList'
            ,usergroup: 2
        }
    })
    });
    MODx.combo.Users.superclass.constructor.call(this, config);
};
Ext.extend(MODx.combo.Users, Ext.ux.form.SuperBoxSelect);
Ext.reg('modx-superbox-user', MODx.combo.Users );

2. Added the form field to the panel:

id: 'sofa-panel-users'
,xtype: 'panel'
,hidden: true
,layout: 'form'
,border: false
,autoHeight: true
,autoWidth: true
,preventRender:  true
,items: [{
    fieldLabel: _('sofa.selectuser'),
    id: 'sofa-superbox-users',
    name: 'users[]',
    xtype: 'modx-superbox-user',
    resizable: true,
}]

3. So far so good this still dint, set my values correctly when the panel was loading, so the only way to actually set my selection was to manually add them on success:

Ext.extend(MODx.panel.UserGroups,MODx.FormPanel,{
    setup: function() {
        if (this.config.userid === '' || this.config.userid === 0) {
            this.fireEvent('ready');
            return false;
        }
    MODx.Ajax.request({
            url: this.config.url
            ,params: {
                action: 'get'
                ,userid: this.config.userid
                ,getGroups: true
            }
            ,listeners: {
                'success': {fn:function(r) {
                    this.getForm().setValues(r.object);

            /**
             * Set superbox User values
             *
             * I'm sure there's a better way just couldnt find out how....
             */
            Ext.getCmp('sofa-superbox-users').setValue( r.object.users );

                    this.fireEvent('ready',r.object);
                },scope:this}
            }
        });
    }
});

4. The PHP behind is simple as the actual users are retrieved directly via MODX security user processor, so i just had to save the data and retrieved them again.

// Save selected users
$pnaelInformation['users'] = $modx->toJSON( $scriptProperties['users'] );

// Get selected users as comma seperate list
$pnaelInformation['users'] = implode(',',$pnaelInformation['users']);

5. Et voila:

As I said, a 5 min job. Still can’t remember what i did for the othe 295 minutes.

// Save selected users
$pnaelInformation['users'] = $modx->toJSON( $scriptProperties['users'] );

// Get selected users as comma seperate list
$pnaelInformation['users'] = implode(',',$pnaelInformation['users']);