来自webserivce的Json存储适用于ExtJS 4.0，但不适用于4.2

Json store from webserivce works in ExtJS 4.0 but not 4.2

本文关键字：适用于不适用 ExtJS webserivce Json 存储来自更新时间：2023-09-26

我有以下简单的HTML。它在使用 ExtJS 4 时有效，但在使用 ExtJS 4.2 时不起作用。

在这两种情况下，都会调用 Web 服务，但在使用 ExtJS 4.2 时，store.data为空。

我猜这就是问题所在（ExtJS 4.2 不支持这里的东西，但我不确定是什么）：

Ext.define('Ext.AspWebAjaxProxy', {
        extend: 'Ext.data.proxy.Ajax',
        require: 'Ext.data',
        buildRequest: function (operation) {
            var params = Ext.applyIf(operation.params || {}, this.extraParams || {}),
                                request;
            params = Ext.applyIf(params, this.getParams(params, operation));
            if (operation.id && !params.id) {
                params.id = operation.id;
            }
            params = Ext.JSON.encode(params);
            request = Ext.create('Ext.data.Request', {
                params: params,
                action: operation.action,
                records: operation.records,
                operation: operation,
                url: operation.url
            });
            request.url = this.buildUrl(request);
            operation.request = request;
            return request;
        }
    });

这是完整的代码：

<body>
<div id="ext-grid">
</div>
<script type="text/javascript">
    Ext.require([
            'Ext.grid.*',
            'Ext.data.*',
            'Ext.panel.*',
            'Ext.layout.container.Border'
        ]);
    Ext.define('Ext.AspWebAjaxProxy', {
        extend: 'Ext.data.proxy.Ajax',
        require: 'Ext.data',
        buildRequest: function (operation) {
            var params = Ext.applyIf(operation.params || {}, this.extraParams || {}),
                                request;
            params = Ext.applyIf(params, this.getParams(params, operation));
            if (operation.id && !params.id) {
                params.id = operation.id;
            }
            params = Ext.JSON.encode(params);
            request = Ext.create('Ext.data.Request', {
                params: params,
                action: operation.action,
                records: operation.records,
                operation: operation,
                url: operation.url
            });
            request.url = this.buildUrl(request);
            operation.request = request;
            return request;
        }
    });
    Ext.onReady(function () {
        Ext.define('Actors', {
            extend: 'Ext.data.Model',
            fields: ['FirstName', 'LastName', 'EmailAddress', 'Salary']
        });

        store = new Ext.data.Store(
            {
                proxy: new Ext.AspWebAjaxProxy({
                    url: 'service.asmx/LoadRecords',
                    actionMethods: {
                        read: 'POST'
                    },
                    reader: {
                        type: 'json',
                        model: 'Actors',
                        root: 'd'
                    },
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8'
                    }
                })
            });

        var grid = Ext.create('Ext.grid.Panel', {
            store: store,
            columns: [
                        { text: 'FirstName', dataIndex: 'FirstName', width: 280, sortable: true },
                        { text: 'LastName', dataIndex: 'LastName', sortable: true },
                        { text: 'EmailAddress', dataIndex: 'EmailAddress', width: 150, sortable: true },
                        { text: 'Salary', dataIndex: 'Salary', sortable: true }
                       ],
            renderTo: 'ext-grid'
        });
        store.load();
    });
</script>
</body>

这是 JSON：

 {
    "d": [
        {
            "__type": "CrystalBall.service+Record",
            "FirstName": "Palash",
            "LastName": "Debnath",
            "EmailAddress": "palash@yahoo.com",
            "Salary": 100
        },
        {
            "__type": "CrystalBall.service+Record",
            "FirstName": "Pritam",
            "LastName": "Debnath",
            "EmailAddress": "pritam@yahoo.com",
            "Salary": 200
        }
    ]
}

我认为问题是你重新定义了方法buildRequest。此函数的内部结构可能在 4.0 版和 4.2 版之间发生了变化。

ExtJs 4.2 提供了非常广泛的可能性来配置发送请求的方式，因此不需要重新定义该功能。