PDA

View Full Version : Read values of grid's checkcolumn



sj_tt6
11 Nov 2013, 3:52 PM
Hi,

I have a grid that has 4 checkcolumns. The grid is displayed ok.

1. How do I get the values of check boxes to check what row has a check box selected?
2. How do I make one row has only one check box selected? That means when a check box is checked other check boxes in other columns will be deselected if any of them previously selected.

Thank you very much,

mazhar.shaikh
11 Nov 2013, 4:48 PM
Ans 1: // Get the selected item first

var grid = Ext.getCmp('gridName');
var selection = grid.getSelectionModel().getSelection(); // Selection is your currently selected row/rows
var store = Ext.getStore('yourGridStore');
if (selection.length > 0){ // validation before you do any action
for(var i=0; i < selection.length; i++){
if (selection.length == 1){
// If one is selected
// perform some action
}
else{
// if more than one row selected
// perform some other action
}
}
}



Ans 2: Set config mode:'Single' for the checkboxselectionmodel of your grid. You have other options as well.

Thanks

sj_tt6
11 Nov 2013, 6:18 PM
Hi Mazhar,

1. I have tried to call mygrid.getSelectionModel().getSelection() but I always got an array of 1 element: the last selection.

2. I have also tried the SINGLE mode but it did not work.

Maybe I did something wrong with my grid and selection model. Below is my code. Please show me the problem as well as the fix.



Ext.define('myapp.view.AttributesSelector', {
extend: 'Ext.grid.Panel',
alias: 'widget.attributesselector',
itemId: 'attributesselector',
store: 'AnonymizationAttributes',
selModel: 'AttributeSelectionModel',
title: 'Anonymization Attributes',
hideHeaders: false,
autoScroll: 'auto',
forceFit: true,
initComponent: function() {
this.columns = [
{
text: 'Data',
dataIndex: 'column',
width: 200
},
{
xtype: 'checkcolumn',
text: 'Insenstive',
dataIndex: 'insensitive',
stopSelection : true,
align: 'center',
width: 95,
listeners: {
checkchange: function(column, rowIndex, checked){
console.log("[INSENSITIVE COLUMN] TEXT: " + column.text + " row: " + rowIndex + " status: " + checked);
}
}
},
{
xtype: 'checkcolumn',
text: 'Identifying',
dataIndex: 'identifying',
stopSelection : false,
align: 'center',
width: 97
},
{
xtype: 'checkcolumn',
text: 'Quasi-Identifying',
dataIndex: 'quasi_identifying',
stopSelection : false,
align: 'center',
width: 120
},
{
xtype: 'checkcolumn',
text: 'Senstive',
dataIndex: 'sensitive',
stopSelection : false,
align: 'center',
width: 90
}
];
this.callParent();
}
});
=========
Ext.define('myapp.model.AttributeSelectionModel', {
extend: 'Ext.selection.CheckboxModel',
mode: 'SINGLE',
checkOnly: true,
listeners: {
select: function(this, record, index, o) {
console.log("[CHECKBOX MODEL] INDEX: " + index);
var ob = record.getData();
console.log("DATA: " + ob);
var selected = this.getSelection();
console.log("Num of selected model: " + selected.length);
},
selectionChange: function(this, selected, o) {
Ext.each(selected, function(o){
var ob = o.getData();
console.log(" data: " +ob);
})
}
}
});
===============
Ext.define('myapp.store.AnonymizationAttributes', {
extend: 'Ext.data.Store',
requires: 'myapp.model.AnonymizationAttribute',
model: 'myapp.model.AnonymizationAttribute',
id: 'attributestore'
});
===============
Ext.define('myapp.model.AnonymizationAttribute', {
extend: 'Ext.data.Model',
fields: [
{name: 'column', type: 'string'},
{name: 'insensitive', type: 'boolean', defaultValue: false, convert: null},
{name: 'identifying', type: 'boolean', defaultValue: false, convert: null},
{name: 'quasi_identifying', type: 'boolean', defaultValue: false, convert: null},
{name: 'sensitive', type: 'boolean', defaultValue: false, convert: null}
]
});

mazhar.shaikh
11 Nov 2013, 6:37 PM
Can you attach a screen shot of your grid? Or better yet, can you put a working example on jsfiddle that I could play with.
I am not able to figure out looking at the code above.
Thanks

sj_tt6
11 Nov 2013, 8:18 PM
Hi Mazhar,

Please the screenshot of my grid.

Thanks,

sj_tt6
11 Nov 2013, 8:49 PM
Hi,

I'm confused about models. I create a store and a Ext.data.Model for my grid as usual. In addition, I create a Ext.selection.CheckboxModel and assign it to selModel in my grid. Is it correct? So my grid has 2 models, one for the store and one for selModel?

Thanks,