分機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文件清單：「類型」，讀者應該有根「的文件」。這將簡化您的負載，但這意味着您必須複製每組需要的額外數據並將其附加到每個文檔。 只是一個建議。