Grid not showing the data

[brsanthu]

I did see many posts covering the same issue but unfortunately, I couldn't get the data displayed yet. Here is my code and json.

Grid is coming up on the screen but it doesn't display the record.

Any help is appreciated.

Code:

<script>
Ext.Loader.setConfig({enabled: true});
Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.toolbar.Paging'
]);


Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [ {
  "name" : "id",
  "type" : "string"
}, {
  "name" : "name",
  "type" : "string"
}, {
  "name" : "email",
  "type" : "string"
}, {
  "name" : "phone",
  "type" : "string"
}, {
  "name" : "status",
  "type" : "string"
} ],
    idProperty: 'id'
});


Ext.onReady(function(){


    Ext.QuickTips.init();


    // configure whether filter query is encoded or not (initially)
    var encode = false;
    
    var userStore = Ext.create('Ext.data.JsonStore', {
        // store configs
        autoDestroy: true,
        
        model: 'User',
        
        proxy: {
            type: 'ajax',
            url: 'Data?id=a09K0000002eB1K',
            reader: {
                type: 'json',
                root: 'data',
                idProperty: 'id',
                totalProperty: 'total'
            }
        },
        
        remoteSort: false,
        
        sorters: [{
            property: 'name',
            direction: 'ASC'
        }],
        
        pageSize: 100
    });


 var selModel = Ext.create('Ext.selection.CheckboxModel', {
     checkOnly: false // select from anywhere on row
 });
    
    var grid = Ext.create('Ext.grid.Panel', {
        border: true,


        store: userStore,


        columns: [ {
  "header" : "Id",
  "dataIndex" : "id",
  "sortable" : true,
  "hideable" : true,
  "draggable" : true,
  "groupable" : true
}, {
  "header" : "Name",
  "dataIndex" : "name",
  "sortable" : true,
  "hideable" : true,
  "draggable" : true,
  "groupable" : true
}, {
  "header" : "Email",
  "dataIndex" : "email",
  "sortable" : true,
  "hideable" : true,
  "draggable" : true,
  "groupable" : true
}, {
  "header" : "Phone",
  "dataIndex" : "phone",
  "sortable" : true,
  "hideable" : true,
  "draggable" : true,
  "groupable" : true
}, {
  "header" : "Status",
  "dataIndex" : "status",
  "sortable" : true,
  "hideable" : true,
  "draggable" : true,
  "groupable" : true
} ],


        loadMask: true,


        multiSelect: true,


        dockedItems: [Ext.create('Ext.toolbar.Paging', {
            dock: 'bottom',
            store: userStore
        })],
        
        selModel: selModel,
        emptyText: 'There are no Users!',
  height: 600,
        title: 'Users',
        renderTo: 'report-grid',
        viewConfig: {
            stripeRows: true,
            enableTextSelection: true
        }    
    });
    
    userStore.load();
});    
    </script>    
    <div id="report-grid"></div>
</body></html>

Data:

 {  "total" : "1",  "data:" : [ {    "phone" : "(415) 222-3333",    "status" : "Registered",    "id" : "a0BK000000GLuD0MAL",    "email" : "john.smith@yopmail.com",    "name" : "john smith"  }]   }

[mitchellsimoens]

Have you checked the store to see if it has the data in it (haven't run your code)