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>