ExtJS分组网格无法加载JSON数据

Question

我无法在ExtJS分组grid中加载数据。

我有以下代码为ExtJS grouping.js。

Ext.onReady(function() {

    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'
        }

    ]);


    var store = new Ext.data.GroupingStore({
        reader: reader,
        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');
                            }
                        });
                    }
                }
            }
        }]

    });

});

我在json中跟随DocumentListService.jsp字符串：

{
    "DocumentList": [{
        "DocumentGroup": "Invoice",
        "isDocumentBundle": true,
        "isWritable": true,
        "Documents": [{
            "FileName": "ABC.doc",
            "Size": "123",
            "Author": "xyz",
            "Date": "\\/Date(1238025600000)\\/",
            "FileGPath": "xyz doc",
            "Document": "Invoice"
        }, {
            "FileName": "ABC.doc",
            "Size": "123",
            "Author": "xyz",
            "Date": "\\/Date(1238025600000)\\/",
            "FileGPath": "abc doc",
            "Document": "Invoice"
        }]
    }, {
        "DocumentGroup": "SOP",
        "isDocumentBundle": true,
        "isWritable": true,
        "Documents": [{
            "FileName": "ABC.doc",
            "Size": "123",
            "Author": "xyz",
            "Date": "\\/Date(1238025600000)\\/",
            "FileGPath": "xyz doc",
            "Document": "SOP"
        }]
    }]
}

我仍然无法加载数据。

Answer 1

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

---

编辑

问题是您正在错误地使用分组存储。从后端获取数据时，不需要对数据进行分组。

这是我的建议

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: "Type"，读者应该有根Documents。这将简化您的负载，但这意味着您必须复制每个组所需的额外数据并将其附加到每个文档。

只是一个建议。