How to configure the designer for group checkboxes

[MMirabito]

Dear forum,

I am having difficulty in understating how I can accomplish the following with EXT designer.
In summary I have a form panel and I need to have check group boxes. Here is a sample of the code that I was able to do with regular ExtJS but it’s not obvious to me how I should configure the designer to accomplish the same.



myForm= new Ext.FormPanel({
bodyStyle:'padding: 4px',
autoWidth:true,
width: '125',
border: false,

items:[{
autoHeight: true,
bodyStyle: 'padding:4px',
border: true,
items: [{
id: "myGroup",
xtype: 'checkboxgroup',
hideLabel: true,
hideLabels: true,
border: true,
columns: 1,
items: [
{xtype: 'label', html: '<b>LABEL1:</b>', cls:'x-form-check-group-label', anchor:'-15'},
{boxLabel: 'Item 11', name: 'Item 11', id: 'Item11', value: 'Item 11', listeners: {check: onCheck}},
{boxLabel: 'Item 12', name: 'Item 12', id: 'Item12', value: 'Item 12', listeners: {check: onCheck}},
{boxLabel: 'Item 13', name: 'Item 13', id: 'Item13', value: 'Item 13', listeners: {check: onCheck}},

{xtype: 'label', html: '<b>LABEL2:</b>', cls:'x-form-check-group-label', anchor:'-15'},
{boxLabel: 'Item 21', name: 'Item 21', id: 'Item21', value: 'Item 21', listeners: {check: onCheck}},
{boxLabel: 'Item 22', name: 'Item 22', id: 'Item22', value: 'Item 22', listeners: {check: onCheck}},

{xtype: 'label', html: '<b>LABEL3:</b>', cls:'x-form-check-group-label', anchor:'-15'},
{boxLabel: 'Item 31', name: 'Item 31', id: 'Item31', value: 'Item 31', listeners: {check: onCheck}},
{boxLabel: 'Item 32', name: 'Item 32', id: 'Item32', value: 'Item 32', listeners: {check: onCheck}},
{boxLabel: 'Item 33', name: 'Item 33', id: 'Item33', value: 'Item 33', listeners: {check: onCheck}},

],
}]
}]
});



In the event the designer does not currently support it is there an alternative?

Thanks in advance for any suggestions

MAx

[jarrednicholls]

Hi Max,

The CheckboxGroup component is not enabled in the Designer because it is broken in some areas (same with RadioGroup). We were told to keep it out until the issues are fixed in Ext JS proper. I think 3.3 we will be able to enable them again.

In the meantime, you can structure your UI much like the groups do by using a combination of hbox/vbox containers. In your above example, you are only showing the checkboxes in a single column...so you can just do a single vbox container.

Hope that helps.

[MMirabito]

Hi Jared,

Thanks for the suggestion will go ahead and implement they way you suggest


Max

[MMirabito]

Hi Jared,

Sorry to continue to pester you. I followed your suggestion but now I am wondering how I can access the checkboxes easily. Do I need to do just bite the bullet and access each object individually (e.g. by ID our autoRef)? Or is there an elegant way which is in not obvious to me:).

I tried using what I had prior to using EXT designer (see code snippet below) but because I do not have an “xtype” of “checkboxgroup” it does not look like it will work.




var queryParam = new Array();
queryParam['types'] = "";

var element = Ext.getCmp('myGroup').getValue();
queryParam['myType'] = "";
for (var x = 0; x < element.length; x++) {
queryParam['types'] += element[x].value + ((x != element.length - 1) ? ',' : '') ;
}


Thaks again,

Max

[jarrednicholls]

Hey Max,

Yeah that is the downfall to not having the checkboxgroup component. With a proper naming sequence (which you mostly have in your first example code) a quick loop could solve the problem:



var values = [];
for (var i = 1; i <= 3; i++)
values.push(Ext.getCmp('item1' + i).getValue());
for (var i = 1; i <= 2; i++)
values.push(Ext.getCmp('item2' + i).getValue());
for (var i = 1; i <= 3; i++)
values.push(Ext.getCmp('item3' + i).getValue());


If this is all contained inside of a FormPanel, you can just rely on the BasicForm function "getValues()"



var values = myFormPanel.getForm().getValues();
alert( values['Item 11'] );


Hope that helps!

[MMirabito]

Jarred,

Thanks this is very helpfull.

Max