Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Touch Premium Member
    Join Date
    Feb 2008
    Posts
    206
    Vote Rating
    0
    BlueCamel is on a distinguished road

      0  

    Default [FIXED-354][3.0.3] checkboxgroup and radiogroup validation markers are not cleared

    [FIXED-354][3.0.3] checkboxgroup and radiogroup validation markers are not cleared


    Ext version tested: Ext 3.0.3
    Adapter used: ext
    css used: only default ext-all.css
    Browser versions tested against: Firefox 3.5.5
    Operating System: Linux

    Description:

    Ive noticed this on my own form as well the the ExtJS example page. If allowBlank: false is set for a checkboxgroup or radiogroup and the field is showing invalid, when the user clicks a selection from the group the invalid flag does not clear.

    Test Case:

    See http://www.extjs.com/deploy/dev/exam...eck-radio.html

    Steps to reproduce the problem:
    1. Go to http://www.extjs.com/deploy/dev/exam...eck-radio.html
    2. Click "Save" to submit the form without making any changes
    3. Select any item from the "Custom Layout (w/ validation)" radiogroup
    4. The validation error indicator remains visible after making the selection

    The result that was expected:

    With other fields the validation indicator will clear when the user corrects the validation error. The same thing is expected for checkboxgroup and radiogroup.

    The result that occurs instead:

    The error validation indicator remains on the screen even when the user corrects the validation error.

  2. #2
    Touch Premium Member
    Join Date
    Feb 2008
    Posts
    206
    Vote Rating
    0
    BlueCamel is on a distinguished road

      0  

    Default


    Bumping because I'm not sure if this has been seen yet. Or, since this is my first bug report, I may have just not given enough info.

    Has anyone else been able to confirm this behavior? If not I'll load up a few additional browsers in a VM and test more.

  3. #3
    Sencha User
    Join Date
    Nov 2009
    Location
    France
    Posts
    23
    Vote Rating
    0
    Pyja is on a distinguished road

      0  

    Wink My bugfix

    My bugfix


    I found too this problem..

    I solved it like this :


    1. give access to Group from checkbox (and radio)
    Code:
    Ext.override(Ext.form.Checkbox, {
        // Allow to retrieve the group container, if existing
        getGroup : function (){
            var anEl = this.getCheckEl().up('.x-form-element');
            if(anEl){
                var anElId = anEl.id;
                anElId = anElId.sub ('x-form-el-', '');
                return Ext.getCmp (anElId);
            }
            return null;
        }
    });

    2. validate the group when select a radio

    Code:
    Ext.override(Ext.form.Radio, {
        // Allow to validate group if setValue
        onClick : function(){
            Ext.form.Radio.superclass.onClick.call(this);
           var aGroup = this.getGroup ();
            if (aGroup){
                aGroup.validate ();
            }
        }
    });
    Last edited by Pyja; 17 Nov 2009 at 3:17 AM. Reason: POST CODE IN [code][/code] TAGS. see http://extjs.com/forum/misc.php?do=bbcode#code

  4. #4
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    18
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Fixed in svn 5642 for the 3.1 release.

  5. #5
    Touch Premium Member
    Join Date
    Feb 2008
    Posts
    206
    Vote Rating
    0
    BlueCamel is on a distinguished road

      0  

    Default


    I tested these overrides on the examples checkbox-radio form and didn't see them work. I tried to modify them a bit to handle the situation but didn't get far.

    From debugging it looks like getGroup() override doesn't return the expected component. anElId.sub() simply seems to take the element id and wrap it in <sub></sub> tags instead of what appears to be the intended use of extracting the elment id number.

    The private getCheckEl() function appears to return the entire radiogroup anyway. Likely what's needed here is to transverse from the radiogroup element to component?

  6. #6
    Touch Premium Member
    Join Date
    Feb 2008
    Posts
    206
    Vote Rating
    0
    BlueCamel is on a distinguished road

      0  

    Default


    Quote Originally Posted by Jamie Avins View Post
    Fixed in svn 5642 for the 3.1 release.
    Nice! I'll check it out and take a look. Thanks!

  7. #7
    Touch Premium Member
    Join Date
    Feb 2008
    Posts
    206
    Vote Rating
    0
    BlueCamel is on a distinguished road

      0  

    Default


    Quote Originally Posted by Jamie Avins View Post
    Fixed in svn 5642 for the 3.1 release.
    This fix introduces a new behavior where the following happens:

    1. Load the example checkbox form
    2. select one of the validating radio buttons
    3. click 'Reset'
    4. The group is now marked invalid when the selection is cleared. Clicking reset a second time leaves the group selection cleared and also clears the invalid mark.

  8. #8
    Sencha User
    Join Date
    Nov 2009
    Location
    France
    Posts
    23
    Vote Rating
    0
    Pyja is on a distinguished road

      0  

    Exclamation Oups..

    Oups..


    Quote Originally Posted by BlueCamel View Post
    I tested these overrides on the examples checkbox-radio form and didn't see them work. I tried to modify them a bit to handle the situation but didn't get far.

    From debugging it looks like getGroup() override doesn't return the expected component. anElId.sub() simply seems to take the element id and wrap it in <sub></sub> tags instead of what appears to be the intended use of extracting the elment id number.

    The private getCheckEl() function appears to return the entire radiogroup anyway. Likely what's needed here is to transverse from the radiogroup element to component?
    I Didn't tested on a full Ext 3 Environment
    My environment is a Ext2.2 (because lot of work with this version, and not enough time to migrate EXT 3) with some EXT 3 overrides (like Checkbox, Radio, CheckboxGroup, RadioGroup, DisplayField, ..), & some CSS

    So, maybe doesn't work completely on EXT 3

    Sorry for that

  9. #9
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    18
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Quote Originally Posted by BlueCamel View Post
    This fix introduces a new behavior where the following happens:

    1. Load the example checkbox form
    2. select one of the validating radio buttons
    3. click 'Reset'
    4. The group is now marked invalid when the selection is cleared. Clicking reset a second time leaves the group selection cleared and also clears the invalid mark.
    Fixed in svn 5652. Added a fix for when BasicForm is resetting both the group and the individual items.

  10. #10
    Sencha User
    Join Date
    Oct 2012
    Posts
    13
    Vote Rating
    0
    santoshballary is on a distinguished road

      0  

    Default


    Hi ,

    I am using extjs 4 and using rowEditor inside a row there is an radio groups , on add button am setting default value to the radio groups as 'null', it will come fine while saving ill select one value, after that once again if i click on add row , the radio group is taking previous value here is the code.


    grid = Ext.create('Ext.grid.Panel', {
    renderTo: Ext.Element.get('testDiv'),
    plugins: [rowEditing],
    store: userStore,
    width: 960,
    height:250,
    frame: true,
    selModel: Ext.create('Ext.selection.CheckboxModel'),
    title: 'Meeting Clients',
    columns: [{
    text: 'ID',
    width: 40,
    sortable: true,
    dataIndex: 'id',
    hidden:true
    },{
    text: 'First Name',
    flex: 1,
    sortable: true,
    //renderer: renderTopic,
    dataIndex: 'firstName',
    field: {
    xtype: 'textfield',
    allowBlank: false
    }
    }, {
    text: 'Last Name',
    flex: 1,
    sortable: true,
    dataIndex: 'lastName',
    field: {
    xtype: 'textfield',
    allowBlank: false
    }
    },

    {
    text: 'Company Name',
    flex: 1,
    sortable: true,
    dataIndex: 'companyName',
    field: {
    xtype: 'textfield',
    allowBlank: false
    }
    },
    {
    text: 'Country',
    flex: 1,
    sortable: true,
    dataIndex: 'country',
    field: {
    xtype: 'textfield',
    allowBlank: false
    },
    renderer: function (value, meta, record) {
    var max = 42;
    meta.tdAttr = 'data-qtip="' + value + '"';
    return value.length < max ? value : value.substring(0, max - 3) + '...';
    }
    },
    {
    //xtype: 'radiogroup',

    flex: 1,
    sortable: true,
    //tooltip: 'C Name Some name test',
    text: "<span ' title='#{meetingManager.antiBriberyPlolicy()}'>Gov\'t Official ? <img src=\"#{request.contextPath}/images/help2.jpg \" height=\"18\" width=\"18\"/></span>",
    //xtype: 'fieldcontainer',
    id: 'govtOff',
    defaultType: 'radiofield',
    renderer: renderStatus,
    dataIndex: 'govtOfficial',
    field: {
    xtype: 'radiogroup',
    allowBlank: false,
    cls: 'x-check-group-alt',
    items: [
    {boxLabel: 'Yes', name: 'govtOfficial', inputValue: true, checked:false},
    {boxLabel: 'No', name: 'govtOfficial', inputValue: false, checked:false}
    ],
    setValue: function (value) {
    if (!Ext.isObject(value)) {
    var obj = new Object();
    obj[this.name] = value;
    value = obj;
    }
    Ext.form.RadioGroup.prototype.setValue.call(this, value);
    }


    }

    },{
    xtype: 'actioncolumn',
    width:60,
    sortable: false,
    items: [{
    icon:'#{request.contextPath}/images/trash-btn-2011.png',
    tooltip: 'Delete Meeting Clients',
    dataIndex: 'id',
    handler: function(grid, rowIndex, colIndex) {
    Ext.MessageBox.confirm('', "Would you like to delete this Client?", function (btn) {
    if (btn == 'yes')
    userStore.removeAt(rowIndex);
    });
    }
    }]
    }
    ]
    ,
    dockedItems: [{
    xtype: 'pagingtoolbar',
    store: userStore,
    layout: 'hbox', // same store GridPanel is using
    dock:'bottom',
    align:'center',
    hideRefresh: true,
    displayInfo: true,
    listeners: {
    'afterrender': function (component)
    {
    component.down('#refresh').hide()
    },single: true
    },
    displayMsg: 'Clients {0} - {1} of {2}',
    prependButtons: true,
    items: [
    {
    xtype: 'label',
    width:300
    }
    ],
    otherItems: [
    {
    xtype: 'combo',
    itemId: 'combotop',
    id:'combotop',
    autoSelect:true,
    readOnly:false,
    allowblank:false,
    width:50,
    disabled: true,
    queryMode: 'local',
    store: new Ext.data.ArrayStore({
    id: 0,
    fields: [
    'myId', // numeric value is the key
    'displayText'
    ],
    data: [[50, '50'], [100, '100'],[150, '150'], [200, '200']] // data is local
    }),
    listeners: {
    'afterrender': function(combo) {
    var recordSelected = combo.getStore().getAt(0);
    combo.setValue(recordSelected.get('myId'));
    },
    'select': function (combo, records, eOpts)
    {
    Ext.getCmp('combobottom').setValue(combo.getValue());
    grid.store.pageSize = combo.getValue();
    userStore.loadPage(1);
    }
    },
    valueField: 'myId',
    displayField: 'displayText',
    triggerAction: 'all'
    }
    ],
    emptyMsg: "No Clients to display"
    },
    {
    xtype: 'pagingtoolbar',
    store: userStore, // same store GridPanel is using
    dock: 'top',
    align:'center',
    hideRefresh: true,
    displayInfo: true,
    listeners: {
    'afterrender': function (component)
    {
    component.down('#refresh').hide()
    },single: true
    },
    displayMsg: 'Clients {0} - {1} of {2}',
    prependButtons: true,
    items: [
    {
    xtype: 'label',
    width:300
    }
    ],
    otherItems: [
    {
    xtype: 'combo',
    itemId: 'combobottom',
    id:'combobottom',
    autoSelect:true,
    readOnly:false,
    allowblank:false,
    width:50,
    disabled: true,
    queryMode: 'local',
    store: new Ext.data.ArrayStore({
    id: 0,
    fields: [
    'myId', // numeric value is the key
    'displayText'
    ],
    data: [[50, '50'], [100, '100'],[150, '150'], [200, '200']] // data is local
    }),
    listeners: {
    'afterrender': function(combo) {
    var recordSelected = combo.getStore().getAt(0);
    combo.setValue(recordSelected.get('myId'));
    },
    'select': function (combo, records, eOpts)
    {
    Ext.getCmp('combotop').setValue(combo.getValue());
    grid.store.pageSize = combo.getValue();
    userStore.loadPage(1);
    }
    },
    valueField: 'myId',
    displayField: 'displayText',
    triggerAction: 'all'
    }
    ],
    emptyMsg: "No Clients to display"
    },{
    xtype: 'toolbar',
    dock: 'top',
    align:'center',
    items: [{
    text: 'Add Client',
    iconCls: 'icon-add2',
    minWidth : 100,
    pressed: true,
    handler: function(){
    // empty record
    // edit = this.editing;
    //edit.cancelEdit();


    rowEditing.cancelEdit();

    var r = Ext.ModelManager.create({


    firstName: '',
    lastName:'',
    companyName:'',
    country:'',
    govtOfficial:null



    }, 'MeetingClients');


    Ext.getCmp("govtOff").reset;

    userStore.insert(0, r);
    rowEditing.startEdit(0, 0);




    }
    },{
    iconCls: 'icon-trash3',
    pressed: true,
    handler: function(){

    selections = grid.getSelectionModel().getSelection();
    var delArray='';
    if(selections.length === 0){
    alert('Atleast select one record to delete');
    }
    else if (selections) {
    Ext.MessageBox.confirm('', 'Would you like to delete '+ selections.length +' Clients?', function(btn) {
    if (btn == 'yes'){

    //selected=grid.getSelectionModel().getSelection();

    Ext.each(selections, function (item) {

    //delArray.push(item.data.meetingClientId);
    delArray = delArray +','+item.data.meetingClientId;
    });

    deleteSelected(delArray);
    }
    });
    }

    }
    }] //items end
    },

    ] //docked items end
    })//Grid End

    thanks in advance for your help