PDA

View Full Version : Refresh checkboxgroup after adding items



shilong
17 Dec 2011, 1:43 PM
Hi Forum

I have built an extension to the checkboxgroup class which allows me to load the checkboxes dynamically via json. The loading itself works fine, but for some reason I can't manage to get the checkboxes displayed after loading them...


//Extend Ext.form.CheckboxGroup class to support remote loading of checkbox items
FR.DynamicCheckboxGroup = Ext.extend(Ext.form.CheckboxGroup, {
onRender: function(H, F) {

this.items = [{boxLabel:'not available',disabled:true}];

// Define store
this.store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: this.url}),
reader: new Ext.data.JsonReader({
root: 'data',
fields: [ {name: 'id'},{name: 'value'},{name: 'name'}]
}),
remoteSort: false
}); // eo store

// Error handling
this.store.on('exception',function(proxy,type,action,o,response,arg){ showError('Loading store failed', Ext.decode(response.responseText).errorMessage); },this);
// Load store, trigger callback function
this.store.load({scope:this, callback: function (records, options, success){
Ext.each(records, function(rec) {
var checkbox = new Ext.form.Checkbox({name: rec.data.name, id: rec.data.id, boxLabel: rec.data.value});
this.items.add(checkbox);
},this);

console.log(this.items);
this.doLayout({force:true});
this.ownerCt.doLayout({force:true});
}}, this); // eo load()

FR.DynamicCheckboxGroup.superclass.onRender.call(this, H)
}, // eo onRender


});
Ext.reg("dynamiccheckboxgroup", FR.DynamicCheckboxGroup);

The only thing that gets rendered is the "not available" dummy-checkbox, even though I can see the new configuration of the checkboxgroup in firebug. I probably just need to call some "refresh" method or something, but which one? :)

Any ideas?
Thanks in advance

mitchellsimoens
18 Dec 2011, 4:41 AM
Have you inspected the DOM? Is it just a sizing issue? You may have to call doLayout on the parent of the checkboxgroup.

shilong
18 Dec 2011, 5:40 AM
Have you inspected the DOM?

Yes, the DOM looks fine as far as I can tell. However, when I analyze the generated HMTL code in Firebug, there's only the code for the dummy checkbox...it seems that the other ones just don't get rendered?


Is it just a sizing issue? You may have to call doLayout on the parent of the checkboxgroup.

Yes I was thinking about that, but that's what I would expect the line


this.ownerCt.doLayout({force:true});

in the load callback function to do?

Joshua Pruitt
25 May 2012, 8:06 AM
So... did you ever resolve this issue? I'm doing pretty much the same thing, and I'm stuck at the same place.

shilong
29 May 2012, 2:46 AM
So... did you ever resolve this issue? I'm doing pretty much the same thing, and I'm stuck at the same place.

Not really. I got it working by doing something like this:

Load the store
Create a config-array for the new checkboxgroup from the store
disable() and hide() the existing group (deleting it caused some other strange problems in my case which I didn't further investigate)
create a new checkboxgroup and render it to the container

This does the job, but I would prefer a possibility to "reconfigure" the existing checkboxgroup instead of replacing it with a new one...