Filtering grid with combobox item - extjs

Question

My app has a widget with a combobox(on first grid top toolbar) and two grids.
When I select a combobox item is sent an extra parameter to the server and the first grid is loading, filtered according to that extra parameter.
When I select one row of first grid, is sent an extra parameter to the server (record id_pater) and the second grid is loading, filtered according to that extra parameter.
The filter has to be done on the server side (I use PHP).
If I successively select the various items in the combo box, the first grid load properly;
If then I select one of the first grid rows, the second grid load properly.
Problem:
After selected a combobox item, if I select a row from the first grid and then, I go to the combobox again, and I select a diferent item, grid load mask work endlessly, and the following error appears:
Uncaught TypeError: Cannot read property 'get' of undefined
Chrome developer tools indicates that the error occurs in the next line of code:
var id_pater = records[0].get('id_pater');
I've tried everything to resolve this error, but I still can not solve or understand what is actually causing this error.
Any idea how to solve this?
Thanks in advance.
//=======GRID PATER - first grid =========
Ext.define('APP.GridPater',{
extend: 'Ext.grid.Panel',
alias : 'widget.gridpater',
requires: [
'Ext.grid.*',
'Ext.data.*'
],
viewModel:{
type: 'gridpaterviewmodel'
},
bind:{
store:'{storegridpater}'
},
plugins: 'gridfilters',
title: 'Subject',
layout:'fit',
margin:'0 2 0 2',
width: '60%',
border: true,
itemId: 'gridPateritemId',
autoscroll:true,
viewConfig: {
stripeRows: true,
enableTextSelection: false,
},
initComponent: function() {
var me = this;
Ext.apply(me, {
columns: [{
xtype: 'rownumberer',
minWidth:30,
},{
text : 'Pater',
flex : 1.5,
sortable : false,
dataIndex: 'pater',
hideable: false
}],
//======= combobox ============
dockedItems:[{
xtype: 'toolbar',
dock:'top',
flex: 1,
items: [{
xtype:'combobox',
name:'theme',
itemId: 'themeItemId',
fieldLabel:' Theme',
width:'100%',
padding: '0 0 0 3',
labelWidth: 32,
reorderable:false,
displayField:'theme',
valueField:'id_theme',
selectOnFocus:false,
editable:false,
enableKeyEvents:true,
queryMode: 'local',
value:'All',
bind: {
store: '{storetheme}'
},
listeners:{
select: function(combobox, records, eOpts) {
var grid = Ext.ComponentQuery.query('#gridPateritemId')[0];
var storePater = grid.getStore();
var value = combobox.getValue();
storePater.load({
params:{'filter': value},
});
}
}
}]
}]
});
me.callParent();
},
// -----------LISTENERS-----------------------
listeners: {
onSelectionChangePaterItem: function(grid, records, record, eOpts) {
var grid = Ext.ComponentQuery.query('#gridPateritemId')[0];
var storepater = grid.getStore();
var gridFilius = Ext.ComponentQuery.query('#gridFiliusItemId')[0];
var storefilius = gridFilius.getStore();
var id_pater = records[0].get('id_pater'); //PROBLEM HERE????
storefilius.load({
params:{ 'id_pater': id_pater},
//select first gridFilius row
//callback: function(records, operation, success) {
//gridFilius.getView().getSelectionModel().select(0);
// },
scope: this
});
}
}
});
//==== GRID FILIUS - second grid ================
Ext.define('APP.GridFilius',{
extend: 'Ext.grid.Panel',
alias : 'widget.gridfilius',
requires: [
'Ext.grid.*',
'Ext.data.*'
],
viewModel:{
type: 'gridfiliusviewmodel'
},
bind:{
store:'{storegridfilius}'
},
title: 'Filius',
layout:'fit',
margin:'0 2 0 2',
width: '60%',
border: true,
itemId: 'gridFiliusitemId',
autoscroll:true,
viewConfig: {
stripeRows: true,
enableTextSelection: false,
},
initComponent: function() {
var me = this;
Ext.apply(me, {
columns: [{
xtype: 'rownumberer',
minWidth:30,
},{
text : 'Filius',
flex : 1.5,
sortable : false,
dataIndex: 'filius',
hideable: false
}]
});
me.callParent();
}
});

Answer 1

Selectionchange method is not the correct method for this case. With itemclick method works well. Thanks.