Dynamically generate a CheckboxGroup from JSON

Ext.define('Ext.ux.MessagePanel', {
extend: 'Ext.form.Panel',
initComponent: function(){
Ext.apply(this, {
renderTo: Ext.getBody(),
title: 'Message',
tbar: [{
text: 'Send',
handler: function(){
console.log(this.getValues());
},
scope: this
}],
items: []
});
this.callParent(arguments);
}
});
var messagePanel = new Ext.ux.MessagePanel();

2. Before we start coding the guts of the recipe, we will create a simple JSON file that
will be the target of our AJAX call. It will contain a simple list of names, IDs, and
selected flags. A snippet is shown as follows:
{
"success": true,
"recipients": [{
"fullName": "Stuart Ashworth",
"userID": 1,
"selected": true // check the generated CheckBox
}, {
"fullName": "Andrew Duncan",
"userID": 2,
"selected": false
}
...
]
}

3. Our next step, is to create an AJAX call that will load our JSON file and then use it to
create our form. We start by creating a loadCheckboxes method as part of the
class we defined in step 1. This will make our AJAX call and output the response to
the console so that we can see what's happening:
loadCheckboxes: function(){
Ext.Ajax.request({
url: 'recipients.json',
success: function(response){
console.log(response);
},
scope: this
});
}

4. We can now call this method just after our callParent call in the initComponent
method so the data loading process starts as soon as possible:
this.loadCheckboxes();

5. At the moment, after our AJAX call has received its response all we do is log its
output. We will now replace this placeholder method and create an onLoad method
that will process this response and start to create our checkboxes. Initially we will
define our onLoad method to decode the JSON response and check whether it
was successful.
onLoad: function(response){
var jsonResponse = Ext.decode(response.responseText);
if (jsonResponse.success) {
// success
}
}

6. We can then wire this method up to the AJAX request's success handler that we
defined in the previous step:
Ext.Ajax.request({
url: 'recipients.json',
success: this.onLoad,
scope: this
});

7. Now we get to the important part where we create our checkbox group. All we must
do is, after the onLoad method's success check, define the configuration for the
group and pass it as a parameter to the form's add method:
var checkboxGroup = {
xtype: 'checkboxgroup',
columns: 2,
fieldLabel: 'Recipients',
name: 'recipients',
style: {
padding: '10px'
},
items: []
};
this.add(checkboxGroup);

8. We can now see our empty checkbox group in our form, so our final step is to use our
loaded data to create its checkboxes. We do this by looping around the elements in
the recipients array and pushing a checkbox configuration onto the items array
of checkboxGroup. We do this before calling the form's add method:
var i, len = jsonResponse.recipients.length, recipient;
for (i = 0; i < len; i++) {
recipient = jsonResponse.recipients[i];
checkboxGroup.items.push({
xtype: 'checkbox',
boxLabel: recipient.fullName,
name: 'recipients',
inputValue: recipient.userID,
checked: recipient.selected
});
}