在Ext.Ajax.request之后的ExtJS加载网格

时间:2012-02-10 12:58:01

标签: ajax datagrid extjs3 jsonstore ajax-request

我有一个弹簧控制器;

@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;
}

我有这样的ExtJS代码在模态窗口中显示网格

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 (){},
     });

我的网格,商店和读者都是这样的;

    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'}
            ]
});

我想在ajax请求后在窗口中加载网格。我打开了窗口,但我无法加载存储数据。我的json是这样的;

  

{“total”:56,“data”:[{“a”:“1”,“b”:“2”,“c”:“3”,“d”:“4”,“e” “:”5“,”f“:”6“,”g“:”7“,.....}],”摘要“:{”a“:”1“,”b“:”2“ , “C”: “3”, “d”: “4”, “E”: “5”, “F”: “6”}, “成功”:真}

你可以帮我解决这个问题吗?

2 个答案:

答案 0 :(得分:1)

我们必须在控制器中包含json meta标签。读者的idProperty必须与json的idProperty相同。我们可以使用var jsonData = Ext.util.JSON.decode(response.responseText); grid.store.loadData(jsonData);

答案 1 :(得分:0)

我不知道这个插件做了什么,但似乎数据没有加载到商店。也许打电话给store.load()就够了。