Extjs loading local JSON Object in to grid

Question

I am new to Ext JS and trying various options on Grid. I have created a grid and added it to panel(Ext.panel.Panel). The grid is getting displayed with empty data(I have not added proxy to it). On occurrence of some event I construct a JSON Object and trigger loadData on grid.

Following is my code snippet.

Ext.define('AM.view.grid.Details', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.details',
    title: 'Widget Data',

    store: {
        autolaod: true,
        fields: [{
            name: 'widgetid',
            mapping: 'widget_id',
            type: 'string'
        }, {
            name: 'widgetname',
            mapping: 'widget_name',
            type: 'string'
        }, {
            name: 'widgetnotes',
            mapping: 'widget_notes',
            type: 'String'
        }],
        reader: {
            type: 'json'
        }
    },
    width: 620,
    height: 400,

    forceFit: true,
    columns: [{
        header: 'id',
        dataIndex: 'widgetid',
        hidden: true
    }, {
        header: 'Name',
        dataIndex: 'widgetname',
        width: 150
    }, {
        header: 'Note',
        dataIndex: 'widgetnotes',
        width: 150
    }],

    renderTo: Ext.getBody()
});

I have a function which is a callback function of another widget. When an event occurs this function getTriggered.

function someFunction(grid) {
    var jsonData = formGridData();
    grid.store.loadData(jsonData);
}

Please assume that grid is created and I have function formGridData() which converts the formed String to JSON Object and returns.

So when I run the app, If the jsonData is of length 5 then 5 empty rows appear in the grid.

Following is the JSONData

[{
    'widget_id':    'widget-1',
    'widget_name':  'gridpanel',
    'widget_notes': 'This is used to handle..'
}, {
    'widget_id':    'widget-2',
    'widget_name':  'combo',
    'widget_note':  'This is used to handle..'
}, {
    'widget_id':    'widget-3',
    'widget_name':  'panel',
    'widget_note':  'This is used to handle..'
}]

Is there anything wrong in what I am doing?

Thanks,
Phani

Answer 1

Your dataIndexes on the grid are wrong.

columns: [{
    header: 'id',
    dataIndex: 'widget_id', //was widgetid
    hidden: true
}, {
    header: 'Name',
    dataIndex: 'widget_name', //was widgetname
    width: 150
}, {
    header: 'Note',
    dataIndex: 'widget_notes',  //was widgetnotes
    width: 150
}]

What is happening is it is seeing the right amount of rows, but since the json you have as an example is named widget_* and note widget*, it thinks they are something else, and thus can not show them in the grid as appropriate