Results 1 to 2 of 2

Thread: RadioGroup magic or how I am stuck...

  1. #1

    Default RadioGroup magic or how I am stuck...

    Hi guys

    I am really stuck on the very stupid thing. I cannot make RedioGroup to select just one option.
    My test RedioGroup inside fieldset t1 does not work correctly. I can select several options, but I don't understand why?
    Is there any magic property must be set? I don't understand how it is done in the example.

    Thanks in advance

    Look at the code below - modified check-radio.js from examples:
    Code:
    /*!
     * Ext JS Library 3.1.1
     * Copyright(c) 2006-2010 Ext JS, LLC
     * [email protected]
     * http://www.extjs.com/license
     */
    Ext.onReady(function(){
    
        Ext.QuickTips.init();
        
        // turn on validation errors beside the field globally
        Ext.form.Field.prototype.msgTarget = 'side';
    
    
        /*====================================================================
         * Individual checkbox/radio examples
         *====================================================================*/
        
        // Using checkbox/radio groups will generally be easier and more flexible than
        // using individual checkbox and radio controls, but this shows that you can
        // certainly do so if you only need a single control, or if you want to control  
        // exactly where each check/radio goes within your layout.
        var individual = [{
            bodyStyle: 'padding-right:5px;',
            items: {
                xtype: 'fieldset',
                title: 'Individual Checkboxes',
                autoHeight: true,
                defaultType: 'checkbox', // each item will be a checkbox
                items: [{
                    xtype: 'textfield',
                    name: 'txt-test1',
                    fieldLabel: 'Alignment Test'
                }, {
                    fieldLabel: 'Favorite Animals',
                    boxLabel: 'Dog',
                    name: 'fav-animal-dog'
                }, {
                    fieldLabel: '',
                    labelSeparator: '',
                    boxLabel: 'Cat',
                    name: 'fav-animal-cat'
                }, {
                    checked: true,
                    fieldLabel: '',
                    labelSeparator: '',
                    boxLabel: 'Monkey',
                    name: 'fav-animal-monkey'
                }]
            }
        }, {
            bodyStyle: 'padding-left:5px;',
            items: {
                xtype: 'fieldset',
                title: 'Individual Radios',
                autoHeight: true,
                defaultType: 'radio', // each item will be a radio button
                items: [{
                    xtype: 'textfield',
                    name: 'txt-test2',
                    fieldLabel: 'Alignment Test'
                }, {
                    checked: true,
                    fieldLabel: 'Favorite Color',
                    boxLabel: 'Red',
                    name: 'fav-color',
                    inputValue: 'red'
                }, {
                    fieldLabel: '',
                    labelSeparator: '',
                    boxLabel: 'Blue',
                    name: 'fav-color',
                    inputValue: 'blue'
                }, {
                    fieldLabel: '',
                    labelSeparator: '',
                    boxLabel: 'Green',
                    name: 'fav-color',
                    inputValue: 'green'
                }]
            }
    }];
        
        var t1 = { xtype: 'fieldset',
        layout: 'form',
        autoHeight: true,
                   items: [{
                        // Use the default, automatic layout to distribute the controls evenly
                        // across a single row
                        xtype: 'radiogroup',
                        fieldLabel: 'Auto Layout',
                        //defaultType: 'radio',
                        items: [
                                { boxLabel: 'Item 1', name: 'ccb-auto-1', inputValue: 1 },
                                { boxLabel: 'Item 2', name: 'ccb-auto-2', inputValue: 2, checked: true },
                                { boxLabel: 'Item 3', name: 'ccb-auto-3', inputValue: 3 },
                                { boxLabel: 'Item 4', name: 'ccb-auto-4', inputValue: 4 },
                                { boxLabel: 'Item 5', name: 'ccb-auto-5', inputValue: 5 }
                            ]
                    }]
        };
        /*====================================================================
         * CheckGroup example
         *====================================================================*/
        var checkGroup = {
            xtype: 'fieldset',
            title: 'Checkbox Groups (initially collapsed)',
            autoHeight: true,
            layout: 'form',
            collapsed: true,   // initially collapse the group
            collapsible: true,
            items: [{
                xtype: 'textfield',
                name: 'txt-test3',
                fieldLabel: 'Alignment Test',
                anchor: '95%'
            },{
                // Use the default, automatic layout to distribute the controls evenly
                // across a single row
                xtype: 'checkboxgroup',
                fieldLabel: 'Auto Layout',
                items: [
                    {boxLabel: 'Item 1', name: 'cb-auto-1'},
                    {boxLabel: 'Item 2', name: 'cb-auto-2', checked: true},
                    {boxLabel: 'Item 3', name: 'cb-auto-3'},
                    {boxLabel: 'Item 4', name: 'cb-auto-4'},
                    {boxLabel: 'Item 5', name: 'cb-auto-5'}
                ]
            },{
                xtype: 'checkboxgroup',
                fieldLabel: 'Single Column',
                itemCls: 'x-check-group-alt',
                // Put all controls in a single column with width 100%
                columns: 1,
                items: [
                    {boxLabel: 'Item 1', name: 'cb-col-1'},
                    {boxLabel: 'Item 2', name: 'cb-col-2', checked: true},
                    {boxLabel: 'Item 3', name: 'cb-col-3'}
                ]
            },{
                xtype: 'checkboxgroup',
                fieldLabel: 'Multi-Column (horizontal)',
                // Distribute controls across 3 even columns, filling each row
                // from left to right before starting the next row
                columns: 3,
                items: [
                    {boxLabel: 'Item 1', name: 'cb-horiz-1'},
                    {boxLabel: 'Item 2', name: 'cb-horiz-2', checked: true},
                    {boxLabel: 'Item 3', name: 'cb-horiz-3'},
                    {boxLabel: 'Item 4', name: 'cb-horiz-4'},
                    {boxLabel: 'Item 5', name: 'cb-horiz-5'}
                ]
            },{
                xtype: 'checkboxgroup',
                fieldLabel: 'Multi-Column (vertical)',
                itemCls: 'x-check-group-alt',
                // Distribute controls across 3 even columns, filling each column
                // from top to bottom before starting the next column
                columns: 3,
                vertical: true,
                items: [
                    {boxLabel: 'Item 1', name: 'cb-vert-1'},
                    {boxLabel: 'Item 2', name: 'cb-vert-2', checked: true},
                    {boxLabel: 'Item 3', name: 'cb-vert-3'},
                    {boxLabel: 'Item 4', name: 'cb-vert-4'},
                    {boxLabel: 'Item 5', name: 'cb-vert-5'}
                ]
            },{
                xtype: 'checkboxgroup',
                fieldLabel: 'Multi-Column<br />(custom widths)',
                // Specify exact column widths (could also include float values for %)
                columns: [100, 100],
                vertical: true,
                items: [
                    {boxLabel: 'Item 1', name: 'cb-custwidth', inputValue: 1},
                    {boxLabel: 'Item 2', name: 'cb-custwidth', inputValue: 2, checked: true},
                    {boxLabel: 'Item 3', name: 'cb-custwidth', inputValue: 3},
                    {boxLabel: 'Item 4', name: 'cb-custwidth', inputValue: 4},
                    {boxLabel: 'Item 5', name: 'cb-custwidth', inputValue: 5}
                ]
            },{
                xtype: 'checkboxgroup',
                itemCls: 'x-check-group-alt',
                fieldLabel: 'Custom Layout<br />(w/ validation)',
                allowBlank: false,
                anchor: '95%',
                items: [{
                    // You can pass sub-item arrays along with width/columnWidth configs 
                    // ColumnLayout-style for complete layout control.  In this example we
                    // only want one item in the middle column, which would not be possible
                    // using the columns config.  We also want to make sure that our headings
                    // end up at the top of each column as expected.
                    columnWidth: '.25',
                    items: [
                        {xtype: 'label', text: 'Heading 1', cls:'x-form-check-group-label', anchor:'-15'},
                        {boxLabel: 'Item 1', name: 'cb-cust-1'},
                        {boxLabel: 'Item 2', name: 'cb-cust-2'}
                    ]
                },{
                    columnWidth: '.5',
                    items: [
                        {xtype: 'label', text: 'Heading 2', cls:'x-form-check-group-label', anchor:'-15'},
                        {boxLabel: 'A long item just for fun', name: 'cb-cust-3'}
                    ]
                },{
                    columnWidth: '.25',
                    items: [
                        {xtype: 'label', text: 'Heading 3', cls:'x-form-check-group-label', anchor:'-15'},
                        {boxLabel: 'Item 4', name: 'cb-cust-4'},
                        {boxLabel: 'Item 5', name: 'cb-cust-5'}
                    ]
                }]
            }]
        };
        
        /*====================================================================
         * RadioGroup examples
         *====================================================================*/
        // NOTE: These radio examples use the exact same options as the checkbox ones
        // above, so the comments will not be repeated.  Please see comments above for
        // additional explanation on some config options.
        
        var radioGroup = {
            
            xtype: 'fieldset',
            title: 'Radio Groups',
            autoHeight: true,
            items: [{
                xtype: 'textfield',
                name: 'txt-test4',
                fieldLabel: 'Alignment Test',
                anchor: '95%'
            },{
                xtype: 'radiogroup',
                fieldLabel: 'Auto Layout',
                items: [
                    {boxLabel: 'Item 1', name: 'rb-auto', inputValue: 1},
                    {boxLabel: 'Item 2', name: 'rb-auto', inputValue: 2, checked: true},
                    {boxLabel: 'Item 3', name: 'rb-auto', inputValue: 3},
                    {boxLabel: 'Item 4', name: 'rb-auto', inputValue: 4},
                    {boxLabel: 'Item 5', name: 'rb-auto', inputValue: 5}
                ]
            },{
                xtype: 'radiogroup',
                fieldLabel: 'Single Column',
                itemCls: 'x-check-group-alt',
                columns: 1,
                items: [
                    {boxLabel: 'Item 1', name: 'rb-col', inputValue: 1},
                    {boxLabel: 'Item 2', name: 'rb-col', inputValue: 2, checked: true},
                    {boxLabel: 'Item 3', name: 'rb-col', inputValue: 3}
                ]
            },{
                xtype: 'radiogroup',
                fieldLabel: 'Multi-Column<br />(horiz. auto-width)',
                columns: 3,
                items: [
                    {boxLabel: 'Item 1', name: 'rb-horiz', inputValue: 1},
                    {boxLabel: 'Item 2', name: 'rb-horiz', inputValue: 2, checked: true},
                    {boxLabel: 'Item 3', name: 'rb-horiz', inputValue: 3},
                    {boxLabel: 'Item 4', name: 'rb-horiz', inputValue: 4},
                    {boxLabel: 'Item 5', name: 'rb-horiz', inputValue: 5}
                ]
            },{
                xtype: 'radiogroup',
                fieldLabel: 'Multi-Column<br />(vert. auto-width)',
                itemCls: 'x-check-group-alt',
                columns: 3,
                vertical: true,
                items: [
                    {boxLabel: 'Item 1', name: 'rb-vert', inputValue: 1},
                    {boxLabel: 'Item 2', name: 'rb-vert', inputValue: 2, checked: true},
                    {boxLabel: 'Item 3', name: 'rb-vert', inputValue: 3},
                    {boxLabel: 'Item 4', name: 'rb-vert', inputValue: 4},
                    {boxLabel: 'Item 5', name: 'rb-vert', inputValue: 5}
                ]
            },{
                xtype: 'radiogroup',
                fieldLabel: 'Multi-Column<br />(custom widths)',
                columns: [100, 100],
                vertical: true,
                items: [
                    {boxLabel: 'Item 1', name: 'rb-custwidth', inputValue: 1},
                    {boxLabel: 'Item 2', name: 'rb-custwidth', inputValue: 2, checked: true},
                    {boxLabel: 'Item 3', name: 'rb-custwidth', inputValue: 3},
                    {boxLabel: 'Item 4', name: 'rb-custwidth', inputValue: 4},
                    {boxLabel: 'Item 5', name: 'rb-custwidth', inputValue: 5}
                ]
            },{
                xtype: 'radiogroup',
                itemCls: 'x-check-group-alt',
                fieldLabel: 'Custom Layout<br />(w/ validation)',
                allowBlank: false,
                anchor: '95%',
                items: [{
                    columnWidth: '.25',
                    items: [
                        {xtype: 'label', text: 'Heading 1', cls:'x-form-check-group-label', anchor:'-15'},
                        {boxLabel: 'Item 1', name: 'rb-cust', inputValue: 1},
                        {boxLabel: 'Item 2', name: 'rb-cust', inputValue: 2}
                    ]
                },{
                    columnWidth: '.5',
                    items: [
                        {xtype: 'label', text: 'Heading 2', cls:'x-form-check-group-label', anchor:'-15'},
                        {boxLabel: 'A long item just for fun', name: 'rb-cust', inputValue: 3}
                    ]
                },{
                    columnWidth: '.25',
                    items: [
                        {xtype: 'label', text: 'Heading 3', cls:'x-form-check-group-label', anchor:'-15'},
                        {boxLabel: 'Item 4', name: 'rb-cust', inputValue: 4},
                        {boxLabel: 'Item 5', name: 'rb-cust', inputValue: 5}
                    ]
                }]
            }]
        };
        
        // combine all that into one huge form
        var fp = new Ext.FormPanel({
            title: 'Check/Radio Groups Example',
            frame: true,
            labelWidth: 110,
            width: 600,
            renderTo:'form-ct',
            bodyStyle: 'padding:0 10px 0;',
            items: [t1,
                {
                    layout: 'column',
                    border: false,
                    // defaults are applied to all child items unless otherwise specified by child item
                    defaults: {
                        columnWidth: '.5',
                        border: false
                    },            
                    items: individual
                },
                checkGroup,
                radioGroup
            ],
            buttons: [{
                text: 'Save',
                handler: function(){
                   if(fp.getForm().isValid()){
                        Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+ 
                            fp.getForm().getValues(true).replace(/&/g,', '));
                    }
                }
            },{
                text: 'Reset',
                handler: function(){
                    fp.getForm().reset();
                }
            }]
        });
    });

  2. #2
    Sencha User
    Join Date
    Dec 2009
    Location
    Enschede, The Netherlands
    Posts
    327

    Default

    The second sentence of documentation on the RadioButton class gives the answer. (http://www.extjs.com/deploy/dev/docs...Ext.form.Radio) If you want to create a group of radio buttons they all need to have the same name:

    Code:
     var t1 = { xtype: 'fieldset',
        layout: 'form',
        autoHeight: true,
                   items: [{
                        // Use the default, automatic layout to distribute the controls evenly
                        // across a single row
                        xtype: 'radiogroup',
                        fieldLabel: 'Auto Layout',
                        //defaultType: 'radio',
                        items: [
                                { boxLabel: 'Item 1', name: 'ccb-auto', inputValue: 1 },
                                { boxLabel: 'Item 2', name: 'ccb-auto', inputValue: 2, checked: true },
                                { boxLabel: 'Item 3', name: 'ccb-auto', inputValue: 3 },
                                { boxLabel: 'Item 4', name: 'ccb-auto', inputValue: 4 },
                                { boxLabel: 'Item 5', name: 'ccb-auto', inputValue: 5 }
                            ]
                    }]
        };

Posting Permissions

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