Filter menu in a combo grid not populated [SOLVED]

[lpastor]

Hello,

I use Ext 4.1.1.

I don't understand why my list menu ins't populated?

bug.png

Here are my stores :

    var store_categorie = Ext.create('LP.store', 
        Ext.define('Categorie', {
            extend: 'Ext.data.Model',
            idProperty:  'id_categorie',
            autoLoad: true,
            remoteFilter: true,
            fields: [
                {name: 'id_categorie', type: 'int'}, 
                {name: 'nom_categorie'}
            ]
        }),
        {
            base: 'essai',
            table: 'categorie',
            idk: 'id_categorie'
        }
    );

    
    var store = Ext.create('LP.store', 
        Ext.define('Personne', {
            extend: 'Ext.data.Model',
            idProperty:  'id_personne',
            autoLoad: false,
            remoteSort: true,
            remoteFilter: true,
            remoteGroup: false,
            fields: [
                {name: 'id_personne', type: 'int', useNull: true}, 
                {name: 'fk_categorie_personne', type: 'int'}, 
                {name: 'mail_personne'},
                {name: 'prenom_personne'}, 
                {name: 'nom_personne'}
            ],
        }),
        {
            base: 'essai',
            table: 'personne',
            idk: 'id_personne'
        }
    );

My grid with the filter in red :

  var Grid = Ext.create('Ext.grid.Panel',{
        iconCls: 'icon-grid',
        title: 'User List',
        flex: 1,
        store: store,
        frame: true,
        collapsible: true,
        multiSelect: true,
        plugins: [Ext.create('Ext.grid.plugin.CellEditing')],
        features: [{ftype: 'filters'}],
        columns: [
             {
                text: 'ID',
                width: 40,
                sortable: true,
                dataIndex: 'id_personne'
            },
            {header: "Catégorie", width: 60, sortable: true, dataIndex: 'fk_categorie_personne', editor: new Ext.form.ComboBox({ 
                typeAhead: false,
                editable: false,
                triggerAction: 'all',
                //lazyRender: true,
                queryMode: 'remote',
                //mode: 'local',
                store: store_categorie,
                displayField: 'nom_categorie',
                valueField: 'id_categorie',
                filterable: true,
                lastQuery: '',
                }),renderer: 
                    function(value) {            
                        var r = store_categorie.getById(value);
                        return r ? r.get('nom_categorie') : '<?>';
                },
                filter: {
                    type: 'list',
                    dataIndex: 'fk_categorie_personne',
                    store: store_categorie
                    // options: [
                        // [11, 'extra small'],
                        // [18, 'small'],
                        // [22, 'medium'],
                        // [35, 'large'],
                        // [44, 'extra large']
                    // ]
                }
            })
]
});

If I use array options, all is good.

[mitchellsimoens]

Is the store loaded?

[lpastor]

Hello,

Yes it is :

    store_categorie.load({
        callback: function(records, operation, success) {
             store.load();
        },
        scope: this
    });

I have change the column name of the 'id_categorie' in the database for just 'id', now filter work well, but the filter menu have always a bad display...

I found with Ext 4.1.3 there is an 'idField', also is there a work around with ext 4.1.1 to have id column name, different than just 'id' ?

Laurent

[lpastor]

I find a solution in the forum :

Do an override of the list menu:

Ext.override(Ext.ux.grid.menu.ListMenu,{
        show : function () {
            var lastArgs = null;
            return function(){
                if(!arguments){
                    this.callParent(lastArgs);
                } else {
                    lastArgs = arguments;
                    if (this.loadOnShow && !this.loaded) {
                        this.store.load();
                    }
                    this.callParent(arguments);
                }
            };
        }()
    });

and use labelField:

filter: {
                    type: 'list',
                    labelField: 'nom_categorie', 
                    dataIndex: 'fk_categorie_personne',
                    store: store_categorie
}