1. #1
    Sencha User
    Join Date
    Mar 2013
    Posts
    31
    Vote Rating
    0
    offshoreteam is an unknown quantity at this point

      0  

    Default Unanswered: How to use Grid with checkbox selection model and check column

    Unanswered: How to use Grid with checkbox selection model and check column


    What we want to achieve: We wanted to have checkcolumn in a grid along with checkbox selection model in another column.
    What we have done so far: we have used CheckColumn.js file to use add check column in grid and checkbox selection model for another column.

    What problem we are facing:
    1. When user checked/uncheked the checkcolumn the check box for selection model also get checked/uncheked. It seems that its loosing rows selection state.
    2. We have also used checkOnly option as well but it didn't help.

    Please find below code to understand the problem.

    Code:
    <script src="../../Scripts/ux/CheckColumn.js" type="text/javascript"></script>
    <style>
    .x-grid-with-row-lines .x-grid-cell-checkcolumn .x-grid-cell-inner {
        padding-top: 3px;
    }
    .x-grid-checkheader {
        height: 14px;
        background-image: url('/../Images/unchecked.gif');
        background-position: 50% -2px;
        background-repeat: no-repeat;
        background-color: transparent;
    }
    
    .x-grid-checkheader-checked {
        background-image: url('/../Images/checked.gif');
    }
    
    .x-grid-checkheader-editor .x-form-cb-wrap {
        text-align: center;
    }
    </style>
    <div id="weekdayGrid">
    </div>
    <script type="text/javascript">
        Ext.onReady(function () {
    
            Ext.create('Ext.data.Store', {
                storeId: 'simpsonsStore',
                fields: ['name', 'email', 'phone', 'active'],
                data: [
    { 'name': 'Lisa', "email": "lisa@ttt.com", "phone": "123-111-1224", "active": true },
    { 'name': 'Bart', "email": "bart@ttt.com", "phone": "123-222-1234","active": false}
    ]
            });
    
      var sm = new Ext.selection.CheckboxModel({
                checkOnly:true
            });
    
            Ext.create('Ext.grid.Panel', {
                title: 'Simpsons',
                selModel:sm,
                store: Ext.data.StoreManager.lookup('simpsonsStore'),
                columns: [
    { text: 'Name', dataIndex: 'name' },
    { text: 'Email', dataIndex: 'email', flex: 1 },
    { text: 'Phone', dataIndex: 'phone' },
    { xtype: 'checkcolumn', text: 'Active', dataIndex: 'active', align: 'center', defaultType: 'boolean' }
    ],
                height: 400,
                width: 800,
                renderTo: 'weekdayGrid'
            });
    });
    
    </script>

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,993
    Vote Rating
    212
    Answers
    477
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    I'm afraid I'm not seeing that same behavior. I tested your code in Chrome and the only way I could select a row/record was by clicking on the checkbox in column: 0.

  3. #3
    Sencha User
    Join Date
    Mar 2013
    Posts
    31
    Vote Rating
    0
    offshoreteam is an unknown quantity at this point

      0  

    Default How to use Grid with checkbox selection model and check column

    How to use Grid with checkbox selection model and check column


    Thanks for your reply.

    Your statement is correct, however below are some steps to produce the correct problem.
    1. Select two rows by selecting checkbox in the column 0.
    2. Select checkbox of active column in any of the selected row.
    -- It unselects the checkbox in the column 0 for that row.

    Please see if you can re-produce it with the above steps.

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,993
    Vote Rating
    212
    Answers
    477
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    I'm still not seeing the issue when I test. I'm testing with 4.2 on Chrome on OSX.

    Are you seeing the issue if you test at this link:
    http://jsfiddle.net/slemmon/s7GSb/

    If so, what browser and OS are you testing with?

  5. #5
    Sencha User
    Join Date
    Mar 2013
    Posts
    31
    Vote Rating
    0
    offshoreteam is an unknown quantity at this point

      0  

    Default How to use Grid with checkbox selection model and check column

    How to use Grid with checkbox selection model and check column


    Thanks for your reply.

    Your statement is correct. This is working perfect with Ext JS version 4.2

    But we are using Ext JS version 4.1 and facing this issue .

    Is any workaround ,so it will work with Ext Js 4.1 also.

  6. #6
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,993
    Vote Rating
    212
    Answers
    477
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    I'm sorry. We don't have a workaround - just the fixes that are release with the subsequent versions of the framework.

Thread Participants: 1

Tags for this Thread