How to use Grid with checkbox selection model and check column

[offshoreteam]

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.

<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>

[slemmon]

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.

[offshoreteam]

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.

[slemmon]

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?

[offshoreteam]

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.

[slemmon]

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