Hello,

Coder of 17 years but new to Ext.js. Basically I am lost with it. Working on an issue in a component installed in Modx admin with Ext version 3.4.0. For this reason many of the code samples out there, including the Sencha checkboxgroup samples, aren't working. Please assume I've been over the documentation as well as a few hundred other resources trying to solve this **simple** task:

The task:

A "company" has "workers" and the workers may work at multiple locations. When the worker edit window loads, it queries a php script that indeed returns a valid JSON string with the company's locations. I simply cannot get the data into checkboxes that render in the form.

What DOES (sorta) work: This is a combo box that does populate the locations, but for whatever reason, multiSelect does NOT work (probably something deep in the modx code disabling it: )

Code:
ThisComponent.combo.Locations = function(config) {
    config = config || {};
    Ext.applyIf(config,{
        name: 'locations'
        ,hiddenName: 'locations'
        ,displayField: 'name'
        ,valueField: 'id'
        ,multiSelect: true
        ,fields: ['id','name']
        ,url: ThisComponent.config.connectorUrl
        ,baseParams: { 
            action: "mgr/locations/getCheckboxList"
            ,practice: ThisComponent.request.practice
        }
    });
    ThisComponent.combo.Locations.superclass.constructor.call(this,config);
};
Ext.extend(ThisComponent.combo.Locations,MODx.combo.ComboBox);
Ext.reg('this-component-combo-locations',ThisComponent.combo.Locations);
If multiSelect worked as it should, we could use this, but it doesn't. On to checkboxes.

There is a master .js in the component that defines the objects, here is what I've come up with gathered from various sources:

Code:
var LocationsItems = [];
Ext.namespace("Ext.checkboxgroup");
Ext.checkboxgroup.RemoteCheckboxGroup = function(config) {
    config = config || {};
    
    var resourceStore = new Ext.data.JsonStore({
        fieldValue: 'id'
        ,fields: ["id", "name"]                                                                                                          
        ,autoLoad: true 
        ,root: "results"
        ,url: ThisComponent.config.connectorUrl
        ,baseParams: { 
            action: "mgr/locations/getCheckboxList"
            ,practice: ThisComponent.request.companyid
        }                                                                                                                                                                             
        ,listeners: {                                                                                                                         
            load: function(results) {                                 
                 for(var i = 0; i < records.length; i++) {                                                                                         
                   LocationsItems.push({id: records[i].data.id, boxLabel: records[i].data.name});                                             
                 }                                                                                                                            
            }                                                                                                                                  
        }
        ,items:LocationsItems                                                                                                                           
    });                                                                                                                                                                                                                                                                            
    resourceStore.load();
    Ext.checkboxgroup.RemoteCheckboxGroup.superclass.constructor.call(this, config);
};
Ext.extend(Ext.checkboxgroup.RemoteCheckboxGroup,Ext.form.CheckboxGroup);
Ext.reg('this-component-checkboxgroup-locations',Ext.checkboxgroup.RemoteCheckboxGroup);
And my window, which otherwise works fine:

Code:
PD.window.UpdateWorker = function(config) {

    this.ident = config.ident || 'this-component-window-du';
    Ext.applyIf(config,{
        id: this.ident
        ,width: 500
        ,title: 'Update Worker'
        ,url: ThisComponent.config.connectorUrl
        ,action: 'mgr/workers/update'
        ,fields: [{
            xtype: 'hidden'
            ,name: 'id'
            ,value: true
         },{
            xtype: 'this-component-checkboxgroup-locations'
            ,fieldLabel: 'Locations'
        },{
        // For the combo list that doesn't work as multiselect
        /* },{
            xtype: 'this-component-combo-locations'
            ,fieldLabel: 'Locations (Hold CRTL to select multiple locations)'
            ,fieldValue: 'id'
            ,width: 300
        },{*/
             fieldLabel: 'First Name'
             ,name: 'first_name'
             ,xtype: 'textfield'
             ,width: 300
             ,allowBlank: false
         },{
             fieldLabel: 'Last Name'
             ,name: 'last_name'
             ,xtype: 'textfield'
             ,width: 300
             ,allowBlank: false
         },{
             fieldLabel: 'Specialty'
             ,name: 'specialty'
             ,xtype: 'this-component-combo-fullspecialty'
             ,width: 300
             ,allowBlank: false
         }]
    });
    ThisComponent.window.UpdateWorker.superclass.constructor.call(this,config);
};
What can I do here to get the checkboxes in the form window?