RadioGroup does not give any visual indicator of being invalid. Only if you move the mouse over the group the qtip would show up.

Ext version tested:


Browser versions tested against:


DOCTYPE tested against:


Description:



  • When radiogroup is marked invalid you cannot see any red border around the component. Only when you move mouse over qtip w/ error shows up. Otherwise, no visual sign.


The result that was expected:



  • red border around radiogroup component


The result that occurs instead:





Code:



Ext.create('Ext.form.Panel', {
    title: 'RadioGroup Example',
    width: 500,
    //height: 500,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'radiogroup',
        id: 'radio',
        fieldLabel: 'Two Columns',
        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: 'panel',
        buttons: [{
            xtype: 'button',
            text: 'markInvalid',
            handler: function (button) {
              Ext.getCmp('radio').markInvalid(Ext.getCmp('radio').blankText);
            }
          }]
      }]
  });