ExtJS -- dynamically generate checkboxes - extjs

Question

I have a checkbox group which will have a dynamic number of checkboxes. The backend returns data containing the label and the input value. I loop these records and generate a checkbox object for each one. But when I pass the generated array into the items array, nothing happens.
Here are snippets of my checkbox group class.
Ext.define("MyApp.view.form.field.CheckboxGroup",{
extend:"Ext.form.CheckBoxGroup",
...
...
initComponent:function(){
this.items = getCheckboxes();
...
this.callParent(arguments);
},
getCheckboxes:function(){
Ext.Ajax.request({
url:"blah/getcheckboxes",
scope:this,
success:function(resp_){
var resp = Ext.JSON.decode(resp_.responseText);
var checkboxesArr = [];
if(resp.data){
for(var i=0; i<resp.data.length; i++){
checkboxesArr.push({boxLabel:resp.data[i].label, inputValue:resp.data[i].id, ....});
}
}
return checkboxesArr;
});
/*return checkboxesArr = [
{boxLabel: 'Yes', name: this.name, inputValue: 'Y'},
{boxLabel: 'No', name: this.name, inputValue: 'N'}
];*/
}
If I uncomment the static checkboxesArr with the 2 checkboxes and return that instead it works, but it doesnt work with the checkboxesArr generated with the backend response.
Thanks

Answer 1

The ajax call is asynchronous so you can add the items instead:
getCheckboxes: function () {
Ext.Ajax.request({
url: "data1.json",
scope: this,
success: function (resp_) {
var resp = Ext.JSON.decode(resp_.responseText);
var checkboxesArr = [];
if (resp.data) {
for (var i = 0; i < resp.data.length; i++) {
checkboxesArr.push({
boxLabel: resp.data[i].label,
inputValue: resp.data[i].id
});
}
}
this.add(checkboxesArr);
}
});
}
Working example: https://fiddle.sencha.com/#view/editor&fiddle/1lgc