Results 1 to 4 of 4

Thread: radiogroup. user can unselect ?

  1. #1
    Sencha User
    Join Date
    Feb 2010
    Location
    Figueres (Spain)
    Posts
    370
    Answers
    15
    Vote Rating
    5
      0  

    Default Answered: radiogroup. user can unselect ?

    If an user selects a radio field value in a form, is there any way that he can unselect it ? I mean , he choose one value, and then he wants to let the value empty...is it possible, without adding any other control (ex: button with action) ?

    Manel
    -------------------
    Manel Juarez

  2. Something like this:

    Code:
    Ext.onReady(function () {
    
        Ext.create('Ext.form.Panel', {
            title: 'Checkbox Group',
            width: 300,
            height: 125,
            bodyPadding: 10,
            renderTo: Ext.getBody(),
            items:[
            {
                xtype: 'checkboxgroup',
                fieldLabel: 'Two Columns',
                columns: 2,
                vertical: true,
                
                listeners: {
                    change: function(checkbox, newValue, oldValue) {
                        if (Ext.isArray(oldValue.rb)) {
                            oldValue.rb = oldValue.rb[0];
                        }
    
                        if (newValue.rb && newValue.rb.length > 1) {
                            newValue.rb.splice(newValue.rb.indexOf(oldValue.rb),1);
                            checkbox.setValue({ rb: newValue.rb });
                        }
                    }
                },
    
                items: [
                    { boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
                    { boxLabel: 'Item 2', name: 'rb', inputValue: '2' },
                    { boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
                    { boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
                    { boxLabel: 'Item 5', name: 'rb', inputValue: '5' },
                    { boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
                ]
            }
    
            ]
        });
            
    });

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    504
      0  

    Default

    You would have to override the default to allow you to toggle the image.

    The other option is a single select checkbox group.

  4. #3
    Sencha User
    Join Date
    Feb 2010
    Location
    Figueres (Spain)
    Posts
    370
    Answers
    15
    Vote Rating
    5
      0  

    Default

    Scottmartin, do you have a piece of code of this ? "single select checkbox group"

    Thanks
    Manel
    -------------------
    Manel Juarez

  5. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    504
      0  

    Default

    Something like this:

    Code:
    Ext.onReady(function () {
    
        Ext.create('Ext.form.Panel', {
            title: 'Checkbox Group',
            width: 300,
            height: 125,
            bodyPadding: 10,
            renderTo: Ext.getBody(),
            items:[
            {
                xtype: 'checkboxgroup',
                fieldLabel: 'Two Columns',
                columns: 2,
                vertical: true,
                
                listeners: {
                    change: function(checkbox, newValue, oldValue) {
                        if (Ext.isArray(oldValue.rb)) {
                            oldValue.rb = oldValue.rb[0];
                        }
    
                        if (newValue.rb && newValue.rb.length > 1) {
                            newValue.rb.splice(newValue.rb.indexOf(oldValue.rb),1);
                            checkbox.setValue({ rb: newValue.rb });
                        }
                    }
                },
    
                items: [
                    { boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
                    { boxLabel: 'Item 2', name: 'rb', inputValue: '2' },
                    { boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
                    { boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
                    { boxLabel: 'Item 5', name: 'rb', inputValue: '5' },
                    { boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
                ]
            }
    
            ]
        });
            
    });

Posting Permissions

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