On button click take selected grid row data - extjs4

Question

I have a question about getting data from selected grid row.
This is the grid panel where the database information is stored:
gridHoldingPanel = _ui.createGrid({
extClass: 'Ext.grid.Panel',
width: windowSettings.gridPanel.width,
height: windowSettings.gridPanel.height,
id: _id.archiveHistoryGrid,
title: null,
selModel: 'rowmodel',
store: ds,
columns: [{
header: 'Archived at',
dataIndex: 'archived_at',
width: 120
}, {
header: 'Calls Starting',
dataIndex: 'date_from',
width: 120
}, {
header: 'Calls Ending',
dataIndex: 'date_to',
width: 120
}, {
header: 'Calls Archived',
dataIndex: 'total_calls',
width: 90
}, {
header: 'Database',
dataIndex: 'db_archived',
width: 70
}, {
header: 'Archive Path',
dataIndex: 'path',
width: 200
}],
stripeRows: true,
listeners : {
itemdblclick: function(dv, record, item, index, e) {
var win = _restoreCallsWindow(), field= win.down('textfield');
field.setValue(record.get('path'));
win.show();
}
}
})
And here is the panel with the buttons which is in the same window as the grid:
buttonsPanel = _ui.createPanel({
border: false,
width: windowSettings.buttonsPanel.width,
height: windowSettings.buttonsPanel.height,
id: _id.archiveHistoryButtons,
items: [{
layout: 'hbox',
border: false,
margin: '5px 5px 5px 5px',
items: [
//Refresh button
_ui.createButton({
text: 'text_auto_refresh',
cls: 'sense-archive-button-buttons',
id: _id.arHistoryRefresh,
handler: function() {
ds.load();
}
}),
//Restore button
_ui.createButton({
text: 'text_restore',
margin: '0px 0px 0px 5px',
cls: 'sense-archive-button-buttons',
id: _id.arHistoryRestore,
handler: function(grid, rowIndex, colIndex) {
var row = gridHoldingPanel.getSelectionModel().getSelection();
console.log(row);
}
}),
//Close window button
_ui.createButton({
text: 'text_close',
margin: '0px 0px 0px 5px',
cls: 'sense-archive-button-buttons',
id: _id.arHistoryClose,
handler: function ( ) {
_historyWindow().close();
}
})]
}]
})
What I'm trying to do is when restore button is clicked it opens another window which contains text input field and when opened I want to display the path value from the selected row in the data grid.
As you can see at the moment the code I have in the restore button returns me the row values as whole object and when I try to get the data from the object record.data returns me undefined.
Can someone help me with this?

Answer 1

The problem is that you mixed up the button handler params with an item click event function. So for the handler you will have as params only the button. The getSelection function returns an array of selections, so if you have single select , the row will actualy be the first element. Simple fix will be:
handler: function(btn) {
var records = gridHoldingPanel.getSelectionModel().getSelection();
console.log('the selected record path' +records[0].data.path);
}