PDA

View Full Version : How to get Checked values in Grid



paritalak
13 Mar 2013, 5:15 AM
Hi

I am new to EXTJS and wondering how I can get the cheked values in the GRID.

This is the requirement

In the grid i have a column with checkboxes
User will select the records and click the button on top of the grid
Then I need to get the list of selected checkboxes values and need to pass them.
Please help me on this.

slemmon
13 Mar 2013, 7:42 AM
Are you using the checkbox selection model (http://docs.sencha.com/ext-js/4-2/#!/api/Ext.selection.CheckboxModel)?
If so, the checked rows are all 'selected' in the grid's view. You can retrieve them by doing something like the following on your button click:



var selected = grid.getSelectionModel().getSelection();
// returns an array of selected records (or an empty array if none are selected/checked)


If that doesn't match what you're doing in your code you might provide a bit more detail or a code snippet for your grid for reference.

paritalak
13 Mar 2013, 9:22 AM
I know I am doing in very bad way. this is how I am doing

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('jrasapprovalgrid-win');
if(!win){
win = desktop.createWindow({
width:1100,
height:700,
iconCls: 'icon-grid',
id: 'approvalsgrid',
animCollapse:false,
constrainHeader:true,
layout: 'fit',
items: [
{
border: false,
xtype: 'grid',
store: Ext.create('SspReview.store.jrasApprovalStore', {}),
viewConfig: {
stripeRows: true
},
id: 'approvalsgrid',
columns: [
{
header: '',
renderer:function addCheckBox(val){
return '<input type="checkbox" value="'+val+'" onclick="alert(this.value);">';
},
dataIndex: 'jrasId',
width: 30
},
{
text: "JRAS ID",
width: 70,
sortable: true,
dataIndex: 'jrasId'
} ]
}
],
tbar:[{
xtype:'button',
text:'Approve',
renderTo: Ext.getBody(),
handler: function() {
alert('getting grid reference');
var grid = Ext.getCmp("approvalsgrid");
alert(grid.getSelectionModel().getSelections());
}
}

Please suggest me how to add check boxes if there is better way of doing it.

slemmon
13 Mar 2013, 11:24 AM
What I've done before is used a boolean column.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Boolean

In the example on the API docs page you'll see that you can set the trueText and the falseText configs where the text can be any HTML - I just used checkbox images - one checked and one unchecked, though you could do whatever.

Then on the grid's view I set up a listener for cell click to set the value of that record for that column (could use a pre-defined field or create a field using the convert (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Field-cfg-convert)() method). The listeners looks to see if the click was on the boolean column and if so then it set the value to the opposite of whatever it was right then, which would check/uncheck my checkbox image.

Then you can just do a queryBy (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-method-queryBy)() method on the grid's store to look for {true} records.

paritalak
13 Mar 2013, 11:47 AM
Sorry, this is what I am trying to do.
I have a checkbox column where the values are unique ID(Primary key) of my object (not of type boolean. This is of type Number). When user select multiple records(checked) and submit I need to get the list of selected values of the check boxes selected.

I try to submit Screenshot what i have but having hard time uploading.

Hope this will explain what I am trying to do.

paritalak
14 Mar 2013, 5:12 AM
Finally I got the solution for this.
This is how I am doing now (key points I missed are)
When creating the grid we just need to say
selModel: Ext.create('Ext.selection.CheckboxModel') //This will add a new checkbox column
multiSelect: true //This will also works but it won't add new checkbox column. Users need to hold CTRL/SHIFT key to select multiple records.

Once we have this grid ready on button handler function add like this
function somename()
{
var grid = Ext.getCmp("gridID"); //
var selRecords = grid.getSelectionModel().getSelection();
for(var i=0;i<selRecords.length; i++){
alert(selRecords[i].get('dataitem')); //use data item you want to get the value for
}
}

Hope this will help for someone looking for this kind of functionality.

Thanks for your help