PDA

View Full Version : changing multiple values on groups of checkboxes in ext 3.x



alex2684
20 Aug 2012, 8:31 AM
I'm building up a form similar to the example shown here (with the 'checkbox groups' part expanded):

http://dev.sencha.com/deploy/ext-3.4.0/examples/form/check-radio.html

(http://dev.sencha.com/deploy/ext-3.4.0/examples/form/check-radio.html)After the form has loaded I would like to be able to change values within a group of checkboxes (for example if there are 4 boxes set a combination like (true, true, false, true)

I understand it should be possible to set a name: for the group and then use something like this to check the first 3 items to true, but how does it work in the case where there are several array's of 'items', is there a way of setting values within each array of the group?


checkboxGroup.setValue({
cbgroup: [1, 2, 3]
})Many thanks!

scottmartin
20 Aug 2012, 11:10 AM
You have the right idea:



items:[
{
xtype: 'checkboxgroup',
fieldLabel: 'Two Columns',
itemId: 'cbg1',
vertical: true,
items: [
{ boxLabel: 'Item 1', name: 'rb1', inputValue: '1' },
{ boxLabel: 'Item 2', name: 'rb1', inputValue: '2' },
{ boxLabel: 'Item 3', name: 'rb1', inputValue: '3' }
]
},
{
xtype: 'checkboxgroup',
fieldLabel: 'Two Columns',
itemId: 'cbg2',
vertical: true,
items: [
{ boxLabel: 'Item 1', name: 'rb2', inputValue: '1' },
{ boxLabel: 'Item 2', name: 'rb2', inputValue: '2' },
{ boxLabel: 'Item 3', name: 'rb2', inputValue: '3' }
]
}
]

...

var checkGroup1 = form.down('#cbg1');
checkGroup1.setValue({ rb1: ['1','2'] });

var checkGroup2 = form.down('#cbg2');
checkGroup2.setValue({ rb2: ['2','3'] });

alex2684
21 Aug 2012, 1:49 AM
Thanks for the help!

I'm using several checkboxgroup arrays defined as var checkGroup and for each array i've set an itemId which are then loaded into the items of a FormPanel



var fp = new Ext.FormPanel({
title: 'Check/Radio Groups Example',
frame: true,
labelWidth: 100, // doesnt do anything
width: 500, // width of whole form but doesnt increase columns for checkboxes?
renderTo: 'description',
bodyStyle: 'padding:0 10px 0;',
items: [
{
layout: 'column',
border: false,
// defaults are applied to all child items unless otherwise specified by child item
defaults: {
columnWidth: '.9', // increases width of text space beside chackboxes
border: false
},
items: checkGroup
}


If i want to change the checkbox values from outside the scope (just from some js function somewhere else) how do i reference this correctly? i've tried the following without success:

var checkgroup1 = form.down('#cbg1');

var checkgroup1 = checkGroup.down('#cbg1');

var checkgroup1 = fp.down('#cbg1');

what should replace form?



You have the right idea:




var checkGroup1 = form.down('#cbg1');
checkGroup1.setValue({ rb1: ['1','2'] });

var checkGroup2 = form.down('#cbg2');
checkGroup2.setValue({ rb2: ['2','3'] });

sword-it
22 Aug 2012, 10:10 PM
what should replace form?

Hi!

Actually, form is your formPanel which contains your Checkboxes.

form.down('#cbg1');

form is your formPanel. you may find your formPanel by various methods, for eg:-
yourScope.down('form').

here, yourScope is the scope of container/panel in which your formPanel lies.
.down() is used to find a child in a specific container/panel.