Results 1 to 4 of 4

Thread: changing multiple values on groups of checkboxes in ext 3.x

  1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    6

    Default changing multiple values on groups of checkboxes in ext 3.x

    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

    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!

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409

    Default

    You have the right idea:

    Code:
    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'] });

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    6

    Default

    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

    Code:
        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?


    Quote Originally Posted by scottmartin View Post
    You have the right idea:

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

  4. #4
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,335

    Default

    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.
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •