Question

I am trying to re-load data into the Store which is further used by a GridPanel. My code goes like:

Ext.onReady(function(){

    myData =     [
        ['document','listsk','123','','','rat'],
        ['hiiiii','himself','rest','','','lap']
    ];

    // create the data store
    store = new Ext.data.SimpleStore({
        fields: [
            {name: 'cat'},
            {name: 'desc'},
            {name: 'edcsId'},
            {name: 'transformedEDCSUrl'},
            {name: 'transformedFormatsUrl'},
            {name: 'lineNotes'}
        ]
    });
    store.loadData(myData);

    // create the Grid
    grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
           {header: "<b>Category</b>",  sortable: true, dataIndex: 'cat'},
           {header: "<b>Description or Document Title</b>", sortable: true,  dataIndex: 'desc'},
           {header: "<b>EDCS ID #</b>", sortable: true, renderer: renderEDCSUrl, dataIndex: 'edcsId'}
           {header: "<b>URLs to Formats</b>", renderer: renderFormatsUrl},
           {id: 'lineNotes', header: "<b>Line Notes</b>", sortable: true, dataIndex: 'lineNotes'}
        ],
        viewConfig: { 
            forceFit: true
        },
        autoExpandColumn: 'lineNotes',
        stripeRows: true,
        collapsible: true
    })

    reload = function refreshGrid(data){
        store.loadData(data);
    }
})

The mydata variable as seen by Firebug is:

[
    ['document','listsk','123','','','rat'],
    ['hiiiii','himself','rest','','','lap']
]

And the data variable in the javascript function refreshGrid is also same:

[
    ['document','listsk','123','','','rat'],
    ['hiiiii','himself','rest','','','lap']
]

I am invoking the function refreshGrid as follow:

function load(response) {  
    reload(response.substring(response.indexOf('myData') + 9, 
           response.indexOf('function renderABC') - 2));
}

To me it looks like a JSON parsing issue as data is coming fine from backend. Which is the best way to parse JSON string coming from backend. The behaviour with javascript invcation of store.loadData is that each character in the data variable is treated as separate row in the Grid as shown below:

Answer 1

For all who face this problem, a quick wayout is eval function and otherwise use some library for JSON.