ExtJS load grid after Ext.Ajax.request

Question

I have a spring controller;

@RequestMapping("/showreport")
@ResponseBody
public Map<String, ? extends Object> showreport
        (parameters) 
{
    List<Object> listOne = ...;
    Object objectOne = ...;


    Map<String,Object> modelMap = new HashMap<String,Object>(3);
    modelMap.put("total", listOne.size());
    modelMap.put("data", listOne);
    modelMap.put("summary", objectOne);
    modelMap.put("success", true);
    return modelMap;
}

and I have ExtJS code like this to show grid in a modal window

Ext.Ajax.request({                 
        url: 'url',
        params:
        {
            // parameters 
        },
        success: function (response) 
        {                     
             var jsonData = Ext.util.JSON.decode(response.responseText);

             store.proxy = new Ext.ux.data.BufferedPagingMemoryProxy(jsonData.data);
             /* what will I do */

             new Ext.Window({
                title: 'title',
                plain: true,
                border: false,
                modal: true,
                items: [grid],
                height:Ext.getBody().getViewSize().height - 100,
                width:Ext.getBody().getViewSize().width*0.8 //80%
            }).show();

        },
        failure: function (){},
     });

and my grid, store and readers are like this;

    var Report = Ext.data.Record.create([
    {name: 'a'},
    {name: 'b', type: 'string'}, 
    {name: 'c', type: 'string'}, 
    {name: 'd', type: 'string'}, 
    {name: 'e', type: 'string'}, 
    {name: 'f', type: 'string'}, 
    {name: 'g'}, 
    {name: 'h'}, 
    {name: 'i', type: 'string'}, 
    {name: 'j'}, 
    {name: 'k', type: 'string'}, 
    {name: 'l', type: 'string'}
]); 


var reader = new Ext.data.JsonReader({
    totalProperty: 'total',
    successProperty: 'success',
    idProperty: 'id',
    root: 'data'
},
Report);

store = new Ext.data.JsonStore({
    id: 'reportID',
    reader: reader
});

var grid = new Ext.grid.GridPanel({
    id: 'tripDailyReportList',
    store: store,
    autoHeight : true,
    loadMask: true,
    autoHeight: true,
    columns:[
            new Ext.grid.RowNumberer(),
            {header: 'headerA', dataIndex: 'a'},
            {header: 'headerB', dataIndex: 'b'},
            {header: 'headerC', dataIndex: 'c', sortable: true},
            {header: 'headerD', dataIndex: 'd', sortable: true},
            {header: 'headerE', dataIndex: 'e', sortable: true},
            {header: 'headerF', dataIndex: 'f'},
            {header: 'headerG', dataIndex: 'g'},
            {header: 'headerH', dataIndex: 'h'},
            {header: 'headerI', dataIndex: 'i'},
            {header: 'headerJ', dataIndex: 'j'},
            {header: 'headerK', dataIndex: 'k'}
            ]
});

I want to load a grid in a window after ajax request. I opened the window, but i couldn't load store with data. my json is like this;

{"total":56,"data":[{"a": "1", "b": "2", "c": "3", "d": "4", "e": "5", "f": "6", "g": "7", .....}],"summary":{"a":"1","b":"2","c":"3","d":"4","e":"5","f":"6"},"success":true}

can you help me, to fix this?

Answer 1

We must include json meta tags in controller. Reader's idProperty must same with json's idProperty. Than we can use var jsonData = Ext.util.JSON.decode(response.responseText); grid.store.loadData(jsonData);

Answer 2

I don't know what this plugin do, but it seems data isn't loaded into store. Maybe calling store.load() will be enough.