Results 1 to 10 of 10

Thread: 4.2.1 radiogroup and checkboxgroup invalid border

    You found a bug! We've classified it as EXTJS-10232 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Mar 2013
    Posts
    18
    Vote Rating
    4
      1  

    Default 4.2.1 radiogroup and checkboxgroup invalid border

    Hi. After going from 4.2.0 to 4.2.1 we noticed a bug that radiogroup and checkbox group doesnt show a red border when validation on them is invalid.
    I am not sure if it is a bug or default behavior in newest version, but seems like a bug, because it isn't mentioned in releas notes.
    It can be seen in official examples too:
    http://docs.sencha.com/extjs/4.2.1/#...eck-radio.html

    The problem is simply, that 'x-form-invalid' class isn't added when validation fails. If it is a bug then a workaround is to add:
    invalidCls: 'x-form-invalid'

    *EDIT BY SLEMMON
    Issue observed in 4.2.1 in Classic and Neptune. Tested ok in 4.2.0.
    Test case:
    Code:
    Ext.create('Ext.form.Panel', {
        title: 'Checkbox Group',
        width: 300,
        bodyPadding: 10,
        renderTo: Ext.getBody(),
        items:[{
            xtype: 'checkboxgroup',
            fieldLabel: 'Two Columns',
            allowBlank: false,
            // Arrange checkboxes into two columns, distributed vertically
            columns: 2,
            vertical: true,
            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' }
            ]
        }, {
            xtype: 'radiogroup',
            fieldLabel: 'Two Columns',
            // Arrange radio buttons into two columns, distributed vertically
            columns: 2,
            vertical: true,
            allowBlank: false,
            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' }
            ]
        }],
        listeners: {
            boxready: function () {
                this.isValid();
            }
        }
    });
    Last edited by slemmon; 16 Jun 2013 at 8:50 PM. Reason: additional test notes

  2. #2
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Vote Rating
    255
      0  

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha Premium Member
    Join Date
    Jul 2009
    Posts
    138
    Vote Rating
    4
      0  

    Default

    Why was this bug NOT fixed in 4.2.2 ?

  4. #4
    Sencha Premium Member
    Join Date
    Nov 2013
    Posts
    8
    Vote Rating
    0
      0  

    Default

    It's a problem for me as well.

  5. #5
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    1,018
    Vote Rating
    125
      1  

    Default

    Hi,

    Today I faced the same issue and investigated it. The bug has been introduced somewhere between 4.2.0 and 4.2.1.744 when the FieldContainer class got this option:
    Code:
    invalidCls: ''
    So, the CheckboxGroup class (and the RadioGroup one further) inherited that option.

    The fix is:
    Code:
    Ext.form.CheckboxGroup.override({
        invalidCls: Ext.baseCSSPrefix + 'form-invalid'
    });
    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Write C#. Run JavaScript! - Live | Twitter
    --------------------------------------------------

  6. #6
    Sencha Premium Member
    Join Date
    Apr 2013
    Posts
    10
    Vote Rating
    0
      0  

    Default

    Not fixed in 5.1.1

  7. #7
    Ext JS Premium Member devtig's Avatar
    Join Date
    Jan 2010
    Location
    Rotterdam, The Netherlands
    Posts
    422
    Vote Rating
    15
      0  

    Default

    Wow, never would expect to still be needing this in 6.2.1
    Christiaan Westerbeek @ Devotis
    Contact me for help with Ext JS, Node JS, FireBase, AngularJS and Javascript in general. Email me or find me at AirPair to connect.

  8. #8
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    22
    Vote Rating
    8
      0  

    Default

    Still not fixed in 6.5.3

  9. #9
    Sencha Premium Member
    Join Date
    Jan 2010
    Location
    Vancouver, Canada
    Posts
    256
    Vote Rating
    73
      0  

    Default

    Doesn't appear to be fixed in 6.6.0. Daniil's workaround doesn't work in 6.6.0 for a RadioGroup.

    Update After more testing, Daniil's workaround actually works in 6.6.0 - I was originally wrong.

  10. #10
    Sencha Premium Member
    Join Date
    Mar 2011
    Location
    Betelgeuse VII
    Posts
    101
    Vote Rating
    13
      0  

    Default

    Confirming this is still an issue with 6.6.

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
  •