Store does not load inside a gridpanel - ExtJS

Question

iO ! I know this question has been asked a lot of times already, but still I can't figure out where my problem comes from. I'm just trying to load data from a PostGreSQL database and display it inside an ExtJS grid.

My store :

var getreports = Ext.create('Ext.data.JsonStore', {
    // store configs
    autoDestroy: true,
    proxy: {
        type: 'ajax',
        url: 'http://129.129.129.15:81/getlistreports',
        reader: {
            type: 'json',
            idProperty: 'id_consult',
            totalProperty: 'total'
        }
    },
    remoteSort: false,
    pageSize: 50,
});

My grid (embedded inside a border layout) :

            {
            region: 'center',
            //xtype: 'container',
            items: [
            Ext.create('Ext.grid.Panel', {
            features: [filters],
            store: getreports,
            emptyText: 'Aucune donnée n\'a été trouvée',
            columns: [
                { 
                text: 'Nom',
                dataIndex: 'id_consult', 
                filter: 
                    { 
                    type: 'string',
                    }, 
                },
                { 
                text: 'génération',
                dataIndex: 'typeentity',
                flex: 1,
                filter: 
                    { 
                    type: 'string',
                    }, 
                },
                { 
                text: 'Etat',
                dataIndex: 'typeref',
                filter: 
                    { 
                    type: 'list',
                    }, 
                },
            ]
            }),
            ]
            },

and the JSON it is supposed to read. I've made listeners that display the content of the AJAX call inside the console log and it displays something, so I guess the problem is not coming from it.

[{"id_consult":"1","typeref":"Territorial","typeentity":"BH"},
{"id_consult":"2","typeref":"Territorial","typeentity":"BOOS"},
{"id_consult":"3","typeref":"Territorial","typeentity":"BOB"}]

And finally :

getreports.load(); 

at the end of the function

When loading the page, it shows the load "pop-up" but then displays nothing and shows me the EmptyText I've declared.
Also note that the filters are not working when I declare the store inside the grid (If I remove it, I can see them).

Any tips for this :) ?

Answer 1

Your column definitions are a mess (lots of trailing commas), but that's not ultimately the problem. The grid isn't loading any data because the store isn't creating any records after it loads your data. You need to add either a fields config to your store definition, or create a model definition that can be applied to the store. Once you do this, you'll see that it works (see the example linked below)

fields: ['id_consult', 'typeref', 'typeentity'],

Live Example of your code working: https://fiddle.sencha.com/#fiddle/282

Answer 2

I think you've got columns definition wrong. Try to change columns to something like this:

columns: [
{
    header: 'Nom',
    dataIndex: 'id_consult',
    flex: 1
},
...
]