1. #1
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    49
    Vote Rating
    0
    FCTim is on a distinguished road

      0  

    Default Answered: Ext.selection.CheckboxModel checkbox vs row body selection difference

    Answered: Ext.selection.CheckboxModel checkbox vs row body selection difference


    Hi All,

    I wasn't sure if this was a bug but the functionality doesn't make sense to me. I have a normal CheckboxModel with mode = 'MULTI' and a normal Ext.grid.Panel. I noticed that in the code, it will change the selectionMode on you if you are selecting on the checkbox instead of the row body.

    Code from Ext.selection.checkboxModel:
    Code:
            onRowMouseDown: function(view, record, item, index, e) {
                view.el.focus();
                var me = this,
                    checker = e.getTarget('.' + Ext.baseCSSPrefix + 'grid-row-checker');
                    
                if (!me.allowRightMouseSelection(e)) {
                    return;
                }
    
                // checkOnly set, but we didn't click on a checker.
                if (me.checkOnly && !checker) {
                    return;
                }
    
                if (checker) {
                    var mode = me.getSelectionMode();
                    // dont change the mode if its single otherwise
                    // we would get multiple selection
                    if (mode !== 'SINGLE') {
                        me.setSelectionMode('SIMPLE');
                    }
                
                    me.selectWithEvent(record, e);
                    me.setSelectionMode(mode);
                } 
                else {
                    me.selectWithEvent(record, e);
                }
            }
    My test case is:
    1) Select 1 row by clicking on the row body.
    2) Hold Shift and click on another row.
    3) Hold Shift and click on a third row.
    4) Now let go of shift and click on a row. The selection will correctly change to ONLY the last row you selected.

    Now repeat that test by clicking on the actual checkbox for each row and at step #4 you will notice that all rows are still selected. I would have assumed that the behavior would be the same no matter where you click on the grid.

    You can see this behavior in the grid plugins example: http://docs.sencha.com/ext-js/4-0/#!/example/grid/grid-plugins.html

    Thanks,
    Tim

  2. What you describe is the expected behaviour. Users find it counter-intuitive to have to press Ctrl or Shift when clicking on the checkbox and that's what the code you've highlighted fixes.

    If you want clicking on the rows to behave the same way as clicking on the checkboxes then just set mode to 'SIMPLE'. This is quite a common way to configure a grid with a checkbox model.

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,606
    Answers
    543
    Vote Rating
    326
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    What you describe is the expected behaviour. Users find it counter-intuitive to have to press Ctrl or Shift when clicking on the checkbox and that's what the code you've highlighted fixes.

    If you want clicking on the rows to behave the same way as clicking on the checkboxes then just set mode to 'SIMPLE'. This is quite a common way to configure a grid with a checkbox model.

  4. #3
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    49
    Vote Rating
    0
    FCTim is on a distinguished road

      0  

    Default


    Quote Originally Posted by skirtle View Post
    If you want clicking on the rows to behave the same way as clicking on the checkboxes then just set mode to 'SIMPLE'. This is quite a common way to configure a grid with a checkbox model.
    Thanks for your quick response. I actually need the reverse so I guess I will just have to override and comment out the setSelectionMode() part. I was hoping to avoid another override.

    Thanks again,
    Tim

  5. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,606
    Answers
    543
    Vote Rating
    326
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    That sounds odd to me. I would expect that to be very confusing for your users. Perhaps it would make more sense to just use a row model instead of a checkbox model?

  6. #5
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    49
    Vote Rating
    0
    FCTim is on a distinguished road

      0  

    Default


    I agree, now if I could just convince the decision makers.

  7. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,404
    Answers
    3549
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Since you are overriding, I would get rid of the 'check all' checkbox then too. I would also suggest changing from a checkbox to a radio. This is simple as the checkbox isn't really a checkbox but just some CSS classes using an images.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #7
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    49
    Vote Rating
    0
    FCTim is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    Since you are overriding, I would get rid of the 'check all' checkbox then too. I would also suggest changing from a checkbox to a radio. This is simple as the checkbox isn't really a checkbox but just some CSS classes using an images.
    Really the root of the problem is that the users have been trained that a checkbox means you can select a row and not having a checkbox means you can't. I think making it a radio would confuse matters more.

    P.S. I went back to our old version of the app (3.x) and noticed that we are using base functionality so I'll remove my override and hopefully won't get any complaints.

    Thank you guys for the support.

Thread Participants: 2

Tags for this Thread