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

只是一个建议。

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

1 个答案: