View Full Version : Dynamic numbers of items (checkboxes) in checkboxgroup

22 Jun 2010, 11:27 PM

I have a problem with creating the dynamic list of checkbox in my application. My goal is to create dynamic list of checkboxes when application is starting. I was thinking that I could generate this checkbox maybe in the load listener in my json story, but I am having troubles with doing that. Here is may code:

var filterStory = new Ext.data.JsonStore({
proxy: filterProxy,
'load': function(obj,records){

// first approach
checkGroup.items[0].items.push({boxLabel: 'pawel', name: 'paweldd'}); //does not work

// second approach
var myCheckboxGroup = new Ext.form.CheckboxGroup({
xtype: 'checkboxgroup',
fieldLabel: 'Single Column',
itemCls: 'x-check-group-alt',
columns: 1,
items: [
// this is created statical but even like that it does not work
{boxLabel: 'data from jstory', name: 'cb-col-1'},
{boxLabel: 'data from jstory', name: 'cb-col-2', checked: true},
{boxLabel: 'data from jstory, name: 'cb-col-3'}
checkGroup.items.push(myCheckboxGroup); // does not work

// some other solutions ???????????????????????
fields: ['collection_urn'] //maybe it is Interger

var checkGroup = {
xtype: 'fieldset',
title: 'Filter',
layout: 'fit',
border: false,
collapsed: true, // initially collapse the group
collapsible: true,
items: [{
xtype: 'checkboxgroup',
items: [], //empty at the beginning... is this a good approach ????
listeners: {
change: myFunction

I just like to say that I do not want to change the value of checkbox, I would like to create them dynamically when application is starting. Maybe the place in json story is not the right solution?
I have found some solutions on the forum but non of them worked in my case. Maybe I am missing something...

Can anyone please help me?


23 Jun 2010, 4:28 AM
Can anybody please help with that, or just give any clue...

23 Jun 2010, 4:57 AM
See here (http://www.sencha.com/forum/showthread.php?53181-Dynamically-Adding-items-in-checkbox-group&p=252950#post252950) how to add checkboxes to a rendered checkboxgroup.

23 Jun 2010, 7:37 AM
Hi Condor!

Thank you for help and for a hope. Unfortunately this does not work. I know that you post this message in 2008 so I guess API has changeed a little bit. I have found your other message in here: http://www.sencha.com/forum/showthread.php?88616-how-to-change-checkboxgroup-s-items-dynamic I guess this is more current. I have been trying to combine this two together and get program to work but unfortunately with no good result. I am still dealing with your code, so maybe I will find a solution. I just want to tell you where I find some errors:

var group = Ext.getCmp('filterCheckboxGroup');// my checkgroupboxgroup
var checkbox = new Ext.form.Checkbox({});
var col = group.panel.items.get(group.items.getCount() % group.panel.items.getCount()); // do not know what the method getCount is, do not know what the panel is
group.items.add(checkbox); // does not have method add
col.add(checkbox);// does have method add

I just would like to say that my checkboxgroup (http://www.sencha.com/forum/showthread.php?102317-Dynamic-numbers-of-items-%28checkboxes%29-in-checkboxgroup) is in the fieldset and not in the panel. It it tells you something please write to me....

Anyway thanks for your help, I will try to make it work. If I do not succeed I will write to you. If you think about something that may help me, please write to me... I would really appreciate.


23 Jun 2010, 8:27 AM
Condor it works!!! but there is some problem...

My code now looks like that:

var items = filterCheckboxGroup.items;
items.push({boxLabel: 'nis_el_int_switch', name: 'nis_el_int_switch'});

I have added it in load listener in JSONStore, because from that story I want to have the names of the checkboxes. The problem is that when I start the application I have to wait for about 3 seconds for all the checkboxes to appear in the application. This is real weard. You maybe know why is that happening... Oooo, and even more important in the firebug console I have got error:

Extend is null: this.extent = extent.clone();this is in the file Renderer.js. This in method setExtend:

setExtent: function(extent, resolutionChanged) { this.extent = extent.clone();
if (resolutionChanged) {
this.resolution = null;

This is maybe cousing the problem.... Do you know maybe something about it?