PDA

View Full Version : Extjs grid actioncolumn handler function rowIndex always taking 0 value



mahajanprasanna
17 Apr 2014, 2:40 AM
function inside xtype:actioncolumn
rowIndex always taking 0 value independent of actual row clicked


Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.toolbar.Paging',
'Ext.ModelManager',
'Ext.tip.QuickTipManager'
]);




var sendMail = function(documentId,documentDate)
{
Ext.Ajax.request({
url: 'senddocumentbymail',
params: {
documentId: documentId,
documentDate:documentDate
},
success: function(response){
var text = response.responseText;
return true;
},
failure: function(response, opts) {
Ext.Msg.alert('Status', 'Mail Failed.');
return false;
}
});
//return false;
};


var deleteDocument = function(documentId,documentDate)
{
Ext.Ajax.request({
url: 'deletedocument',
params: {
documentId: documentId,
documentDate:documentDate
},
success: function(response){
var text = response.responseText;
return true;
},
failure: function(response, opts) {
Ext.Msg.alert('Status', 'Delete failed.');
return false;
}
});
//return false;
};




Ext.onReady(function(){
Ext.tip.QuickTipManager.init();

Ext.define('documentModel', {
extend: 'Ext.data.Model',
idProperty: 'documentId',
fields: [ 'documentId', 'documentName',{name: 'documentDate', mapping: 'documentDate', type: 'date', dateFormat: 'timestamp'},'edate']

});

var store = Ext.create('Ext.data.Store', {
pageSize: 10,
model: 'documentModel',
remoteSort: true,
$color:'#fffff',
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
type: 'ajax',
//url: 'http://www.sencha.com/forum/topics-browse-remote.php',
url:'getdocumentlist',
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalCount'
},
// sends single sort as multi parameter
simpleSortMode: true
},
sorters: [{
property: 'documentId',
direction: 'DESC'
}]
});

function renderDoc(value, p, record) {
return Ext.String.format(
'<b><a href="./get_document_in_pdf?documentId={1}&time={2}" target="_blank">{0}</a>',
value,
record.data.documentId,
record.data.edate
);
}

function renderDate(value, p, r) {
return Ext.String.format('{0}', Ext.Date.dateFormat(value, 'M j, Y, g:i a'));
}

var grid = Ext.create('Ext.grid.Panel', {
width: 600,
height: 500,
title: 'Document Vault',
store: store,
frame: true,
//disableSelection: true,
//loadMask: true,
// grid columns
columns:[
{xtype: 'rownumberer',
text:'No.',
width:'5%'},
{
text: "Document ",
dataIndex: 'documentName',
width: '40%',
align: 'left',
sortable: false,
renderer: renderDoc
},
{
text: "Date ",
dataIndex: 'documentDate',
width: '30%',
align: 'left',
sortable: false,
renderer:renderDate
},{
xtype:'actioncolumn',
width:'15%',
//text:'Mail',
align:'center',
items: [{
icon: '../resources/icon/mail.png', // Use a URL in the icon config
tooltip: 'Mail',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
var result = sendMail(rec.get('documentId'),rec.get('edate'));
if(result==true)
Ext.Msg.alert('Mail','You will recieve mail shortly');
else
{//Ext.Msg.alert('Failed','Sorry for incovenience');}
}
},{
icon: '../resources/icon/edit.png',
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
var recid = rec.get('documentId');
var recdate= rec.get('edate');
var recname= rec.get('documentName');
var location = "../user/updatedocument.html?documentId="+recid+"&documentDate="+recdate+"&documentName="+recname;
window.open(location, '_blank');
}
},{
icon: '../resources/icon/remove.png',
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
var result = deleteDocument(rec.get('documentId'),rec.get('edate'));
if(result==true)
{
grid.store.removeAt(rowIndex);
Ext.Msg.alert('Document','Document is deleted');
}
else
//{Ext.Msg.alert('Failed','Sorry for incovenience');}
}
}]
}],
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
emptyMsg: "No document created "
}),
renderTo: 'form-ct'
});

store.loadPage(1);
});

scottmartin
17 Apr 2014, 4:49 AM
I was unable to run your example, but this seems to display the correct rowindex



Ext.onReady(function() {

Ext.create('Ext.data.Store', {
storeId:'employeeStore',
fields:['firstname', 'lastname', 'seniority', 'dep', 'hired'],
data:[
{firstname:"Michael", lastname:"Scott"},
{firstname:"Dwight", lastname:"Schrute"},
{firstname:"Jim", lastname:"Halpert"},
{firstname:"Kevin", lastname:"Malone"},
{firstname:"Angela", lastname:"Martin"}
]
});

Ext.create('Ext.grid.Panel', {
title: 'Action Column Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{text: 'First Name', dataIndex:'firstname'},
{text: 'Last Name', dataIndex:'lastname'},
{
xtype:'actioncolumn',
width:50,
items: [{
icon: 'extjs/examples/shared/icons/fam/cog_edit.png',
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rowIndex);
}
},{
icon: 'extjs/examples/restful/images/delete.png',
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Terminate " + rowIndex);
}
}]
}
],
width: 250,
renderTo: Ext.getBody()
});

});

mahajanprasanna
17 Apr 2014, 8:43 AM
Thanks,

I found reason
Actually,
idProperty of store was not unique
(for multiple rows id of store was same)

there is some relation between idProperty of store and rowIndex of grid

I corrected it
and now it is working fine