1

我无法在 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"
        }]
    }]
}

我仍然无法加载数据。

4

1 回答 1

0

好吧，您的问题是商店阅读器，它已设置为 root "Documents"，但收到的 Json 具有 root 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。这将简化您的负载，但这意味着您必须复制每个组所需的额外数据并将其附加到每个文档。

只是一个建议。

于 2012-06-05T12:30:21.757 回答