one column having string data and check box in extjs4.1 - html

Question

in my grid,i should have the ability to have check boxes and String data based on the statuses returned from the webservice.Now i am writing custom renderer function given below :
function customcolumn1(value, metadata, record) {
var completedTime = record.get('nccompletedTime');
var completedByLastName = record.get('nccompletedByLastName');
var completedByFirstName = record.get('nccompletedByFirstName');
if (value == 'Completed') {
return completedTime + " " + completedByLastName + "," + completedByFirstName;
} else if (value == 'Pending') {
return "<input type='checkbox' disabled>";
} else if (value == 'Assigned') {
return "<input type='checkbox'>";
}
}
And the grid is
var SAFjobgrid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{
text: "",
width: 30,
renderer: customSeqNumber,
dataIndex: 'sequenceNumber'},
{
text: "Task",
width: 350,
renderer: customTask,
dataIndex: 'label'},
{
text: "Complete",
width: 160,
renderer: customcolumn2,
dataIndex: 'stampActionStatus'},
{
text: "Verified",
width: 160,
renderer: customcolumn,
dataIndex: 'verifyActionStatus'},
{
text: "Non Compliance",
flex: 1,
renderer: customcolumn1,
dataIndex: 'ncActionStatus'}
]
});
Now i want to check the check boxes and capture the stampIds for those records.And when i click on update button which is oustside of the grid,i should be able to call the webservice with the captured stampId's.I tried to put onclick event on checkbox while returning from the renderer function.But how should i access the stampId for that record.if i select multiple checkboxes,multiple stampid's should go to webservice and if i uncheck the checkbox,the corresponding stampid should be removed from stampId's.
Could anyone help on this one..

Answer 1

You can look at CheckColumn user extension http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ux.CheckColumn But in your case you have to override renderer method like this
renderer : function(value, meta, record){
var cssPrefix = Ext.baseCSSPrefix,
cls = [cssPrefix + 'grid-checkheader'],
completedTime = record.get('nccompletedTime'),
completedByLastName = record.get('nccompletedByLastName'),
completedByFirstName = record.get('nccompletedByFirstName');
if (value == 'Completed') {
//render string instead of checkbox
return Ext.String.format('{0} {1},{2}', completedTime, completedByLastName, completedByFirstName);
}
if (value === 'Assigned') {
cls.push(cssPrefix + 'grid-checkheader-checked');
}
//render checkbox stub,
//it is actually a div element with special css classes to simulate checkbox
return '<div class="' + cls.join(' ') + '"> </div>';
}
To collect al checked/unchecked rows you can use this store method http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.AbstractStore-method-getUpdatedRecords
It returns array of models which were updated by checking/unchecking this column