Question

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

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

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

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

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

如果那时我选择了第一个网格行之一，第二个网格正确加载。

问题：

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

Uncaught TypeError: Cannot read property 'get' of undefined

Chrome开发者工具表示错误发生在下一行代码中：

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

Answer 1

对于这种情况，

Selectionchange方法不是正确的方法。使用itemclick方法效果很好。感谢。

使用组合框项目过滤网格

1 个答案: