Filtering grid with combobox item

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

josei josei · Accepted Answer · 2015-08-21T22:25:06

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

Filtering grid with combobox item

1 Answers