Unable to Filter Local Records in ExtJs

Question

I have the data in the format as array of hashes. The 3 fields are id, value and production_group_id. Now what I want to do is filter combo box based on production_group_id of records.

Basically, out of the initial populated data in store. I want to filter fields. Somehow the listener is not working.

Ext.define('fabmin.view.ComboColumn', {
    extend: 'Ext.grid.column.Column',
    alias: 'widget.comboboxcolumn',
    width: 100,
    isEditable: true,
    list: [], // list = [{id: 'id1', value: 'value1', production_group_id: 'production_group_id1 }, {id: 'id1', value: 'value1', production_group_id: 'production_group_id1 }]
    initComponent: function(){
        var me = this,
            list = me.list || [];

        if(me.isEditable){
            me.editor = Ext.create('Ext.form.ComboBox',{
                forceSelection: true,
                typeAhead: true,
                queryMode: 'local',
                displayField: 'value',
                valueField: 'id',
                store: Ext.create('Ext.data.ArrayStore', {
                    fields: ['id', 'value','production_group_id'],
                    data: list
                }),
                allowBlank: false,
                listeners: {
                    click: function (v, p, record, rowIndex, colIndex, store, view) {
                        debugger
                        var newdata  = [];;
                        for (i = 0; i < me.store.length; i++) {
                            if (me.store[i].production_group_id == record.production_group_id){
                                newdata.push(me.store[i])
                            }
                        }
                        debugger
                        me.store.load(newdata);
                    },
                    scope: me
                }
            });
        }

        me.renderer = function(v, p, record, rowIndex, colIndex, store, view) {
            var len = list.length,
                currOpt;
            while( len-- ) {
                currOpt = list[ len ];
                if ( v == currOpt.id ) {
                    return currOpt.value;
                }
            }
            return v;
        }
        me.callParent(arguments);
    }
});

Answer 1

If you use any field (including Ext.form.ComboBox) then you should listen to change event. It is fired after value is changed in field, so also when you select something from list.