分机js分组网格不能加载json数据

Question

我不能在ext js分组网格中加载数据。对于ExtJS的

我有以下代码grouping.js

Ext.onReady（函数（）{

Ext.QuickTips.init(); 

var xg = Ext.grid; 

var documentType= ""; 
var fileName=""; 
var size=""; 
var fileGPath=""; 

// shared reader 
var reader = new Ext.data.ArrayReader({}, [ 
    {name: 'filename'}, 
    {name: 'size'}, 
    {name: 'author'}, 
    {name: 'date', type: 'date', dateFormat: 'Y-m-d H:i:s'}, 
    {name: 'action'}, 
    {name: 'document'} 

]); 

变种商店=新Ext.data.GroupingStore（{ 读者：阅读器， URL ：'DocumentListService.jsp'， root：'Documents'， sortInfo：{field：'filename'，direction：“ASC”}， fields：[ {name：'filename'，mapping：'FileName'}， {name：'size'，mapping ：'Size'}， {name：'author'，mapping：'Author'}， {name：'date'，mapping：'Date'}， {name：'action'，mapping：''}， {name：'document'，mapping：'Document'} ]， groupField：'document' }）;

var grid = new xg.GridPanel({ 
    id : 'myGridId', 
    store: store, 
    columns: [ 
     {id:'filename',header: "File Name", width: 60, sortable: true, dataIndex: 'filename'}, 
     {header: "Size", width: 20, sortable: true, dataIndex: 'size'}, 
     {header: "Author", width: 20, sortable: true, dataIndex: 'author'}, 
     {header: "Date", width: 20, sortable: true, dataIndex: 'date'}, 
     {header: "Action", width: 20, sortable: true, dataIndex: 'action'}, 
     {header: "Document", width: 20, sortable: true, dataIndex: 'document',hidden:'true'} 
    ], 

    view: new Ext.grid.GroupingView({ 
     forceFit:true, 
     groupTextTpl: '{text} ({[values.rs[0].get("filename")=="" ? "0" : values.rs.length]} {[values.rs.length > 1 ? "Documents" : "Document"]}) <a href="#" onClick="javascript:document.getElementById(\'hdnId\').value=\'{text}\';document.getElementById(\'form-file-file\').click();" style="align:right"><img src="images/image_add.png" alt="Upload Document" style="border:none;margin-left:390px;"/></a>'   
    }), 

    frame:true, 
    width: 700, 
    height: 450, 
    collapsible: true, 
    animCollapse: false, 
    title: 'Document Library', 
    iconCls: 'icon-grid', 
    renderTo: 'docUpload' 
}); 



var fp = new Ext.FormPanel({ 
    renderTo: 'fi-form', 
    fileUpload: true, 
    width: 500, 
    frame: true, 
    title: 'File Upload Form', 
    autoHeight: true, 
    bodyStyle: 'padding: 10px 10px 0 10px;', 
    labelWidth: 50, 
    defaults: { 
     anchor: '95%', 
     allowBlank: false, 
     msgTarget: 'side' 
    }, 
    items: [{ 
     xtype: 'fileuploadfield', 
     id: 'form-file', 
     emptyText: 'Select a File to import', 
     fieldLabel: 'File', 
     name: 'file', 
     buttonCfg: { 
      text: '', 
      iconCls: 'upload-icon' 
     }, 
     listeners: {'fileselected': function(v){ 
      if(fp.getForm().isValid()){ 
       fp.getForm().submit({ 
        url: 'FileUpload.jsp', 
        waitMsg: 'Uploading your file...', 
        success: function(fp, jsonObj){ 

         fileName = jsonObj.result.fileName; 
         size = jsonObj.result.size; 
         fileGPath = jsonObj.result.fileGPath; 

         documentType = (document.getElementById("hdnId").value).replace("Document: ",""); 
         addDataToGrid(fileName,fileGPath,size,documentType); 
         Ext.getCmp('myGridId').getStore().loadData(xg.dummyData); 
         msg('Success', 'Successfully uploded on the server'); 
        }, 
        failure : function(fp, o){ 
         msg('Failure', 'Failed to upload'); 
        } 
       }); 
      }   
     } 
    } 
    }] 

}); 

}）;

，我已经按照如在DocumentListService.jsp JSON字符串

{ “DocumentList”：[{ “DocumentGroup”： “发票”， “isDocumentBundle”：真， “isWritable”：真， “文档”： [{ “文件名”： “ABC.doc”， “大小”： “123”， “作者”： “XYZ”， “日期”：“\ /日期（1238025600000） \“， ”FileGPath“：”xyz doc“， ”Document“：”发票 “ }，{ ”文件名“： ”ABC.doc“， ”大小“： ”123“， ”作者“： ”XYZ“， ”日期“：” \ /日期（1238025600000）\/”， “FileGPath”： “ABC DOC”， “文档”： “发票” }] }， { “DocumentGroup”： “SOP”， “isDocumentBundle”：真， “isWritable”：真， “Documents”： [{“FileName”：“ABC.doc”， “Size”：“123”， “Author”：“xyz”， “日期”： “\ /日期（1238025600000）\ /”， “FileGPath”： “XYZ DOC”， “文档”： “SOP” }] } ] }

仍然我不能能加载数据，

plz帮助我，并解决我的问题，我到底犯了什么错误。

Answer 1

以及你的问题是商店的读者，它已被设置为根“文件”，但Json收到的根具有“DocumentList”。所以问题是将json数据映射到您的商店。

编辑 问题是您正在使用incorectly分组存储。当您从后端获取数据时，不需要对数据进行分组。这里是我的建议： 的Json从后端发送只是在你有型

{ "Documents": [{ "Type":"invoice","FileName": "ABC.doc", "Size": "123", "Author": "xyz", "Date": "\/Date(1238025600000)\/", "FileGPath": "xyz doc", "Document" : "Invoice" }, 
{"Type":"invoice", "FileName": "ABC.doc", "Size": "123", "Author": "xyz", "Date": "\/Date(1238025600000)\/", "FileGPath": "abc doc", "Document" : "Invoice" }, 
{"Type":"SOP", "FileName": "ABC.doc", "Size": "123", "Author": "xyz", "Date": "\/Date(1238025600000)\/", "FileGPath": "xyz doc", "Document" : "SOP" }] } 

而对于分组店只需使用groupField文件清单：“类型”，读者应该有根“的文件”。这将简化您的负载，但这意味着您必须复制每组需要的额外数据并将其附加到每个文档。 只是一个建议。