Extjs 使用组合框项筛选网格

我的应用程序有一个小部件，带有一个组合框（在第一个网格顶部工具栏上）和两个网格

当我选择一个组合框项目时，会向服务器发送一个额外的参数，并加载第一个网格，根据该额外参数进行过滤

当我选择第一个网格的一行时，将向服务器发送一个额外的参数（记录id_pater），并加载第二个网格，根据该额外参数进行过滤

过滤器必须在服务器端完成（我使用PHP）

如果我依次选择组合框中的各个项目，则正确加载第一个网格

然后，如果我选择第一个网格行之一，则第二个网格将正确加载

问题：

选择组合框项目后，如果我从第一个网格中选择一行，然后再次转到组合框，并选择不同的项目，网格加载掩码将无休止地工作，并出现以下错误：

Uncaught TypeError: Cannot read property 'get' of undefined

Chrome developer tools表示错误发生在下一行代码中：

var id_pater = records[0].get('id_pater');

我已经尽了一切努力来解决这个错误，但我仍然无法解决或理解到底是什么导致了这个错误

你知道怎么解决这个问题吗

提前谢谢

 //=======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();
}
});

---

Selectionchange方法不是这种情况下的正确方法。使用itemclick方法效果很好。谢谢。

选择更改方法不适合此情况。使用itemclick方法效果很好。谢谢