View Full Version : Initializing CheckboxGroup with checkboxes loaded through Ajax

23 Sep 2009, 11:46 PM

inspired by a few threads around this forum I'm trying to initialize my CkeckboxGroup with checkboxes from an ajax request. Here's my code:


Ext.ux.RemoteCheckboxGroup = Ext.extend(Ext.form.CheckboxGroup, {

label : 'label',
value : 'value',
items: [{boxLabel: ""}],

initComponent : function() {
onRender : function(H, F) {
scope : this,
url : '[',
success : function(result, response) {

if (response.success) {

this.options = Ext.util.JSON.decode(result.responseText);
if (this.options.length > 0) {
this.items = [];
for (var i = 0; i < this.options.length; i++) {
var record = this.options[i];
item = {
boxLabel : eval("record." + this.label),
name : "edition_" + eval("record." + this.value),
inputValue : eval("record." + this.value)
Ext.ux.RemoteCheckboxGroup.superclass.onRender.call(this, H, F);
failure : function() {
Ext.Msg.alert("Failure while fetching options.")

Ext.reg("remotecheckboxgroup", Ext.ux.RemoteCheckboxGroup);

Even if this is rendered correctly, it ends up with an error saying this.el is undefined. Not surprising at all because it is most likely that the asynchronous ajax callback success hasn't completed when the RemoteCheckboxgroup is rendered, which means the superclass onRender hasn't been called while the component already has been rendered.

Playing around with all this I tried to call the superclass onRender first and then after fetching the boxes call this.doLayout() to make them show up. Unfortunately this won't show the boxes, leaving me without a clue(or error) why no showing up.

So my question is: Any hints on this particular case? Or, more generally asked, what is the best way to fetch something through an ajax call in advance that will construct parts of components in forms?

Thanks in advance for any hints!