extjs Grid is not showing expected data even when store, and colums are present in grid object

Question

I'm new to extjs and I'm having some trouble loading json data to a grid. In the debugger I can see the grid's store and columns are being populated accurately the way I want. But the data is not displaying in the grid. I'm not sure why. But my grid is not loading the data.

What am I doing wrong?

Thank you in advance.

the grid view:

Ext.define('searchadmin.view.reports.DynamicGrid' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.dynamicGrid',
    title : 'Results',
    columns: [],
    columnLines : true,
    sortableColumns : false,
    autoScroll : true,
    viewConfig : {
        stripeRows : false,
        loadMask:true       
    }
});    

The store:

Ext.define('searchadmin.store.DynamicGridStore', {
    extend : 'Ext.data.Store',
    model: 'searchadmin.model.DynamicGridModel',

    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'data'
        }
    }
});

The model:

Ext.define('searchadmin.model.DynamicGridModel', {
    extend: 'Ext.data.Model',
    fields: []
});

The view config for the page on which the above grid is in this gist: Reports.js

The Reports controller that contains the code to dynamically compose the model and store is in the handleSelectQueryResult() in: ReportsController

Answer 1

You will have to use reconfigure method of grid instead of just assigning columns and store like this in handleSelectQueryResult function of ReportsController.js.

 grid.columns = _columns; //will not work
 grid.store = queryStore; //will not work

Also note that ComponentQuery.query returns an array.

Try this way.

var grid = Ext.ComponentQuery.query('#dynamicGridId')[0]; //or var grid = Ext.getCmp('dynamicGridId');
grid.reconfigure(queryStore, _columns);