C# 如何使用Asp.net Web服务绑定ExtJS网格？

我已经尝试了所有可能的方法从我的Web服务获取JSON数据。我可以在fiddler中看到JSON数据。除了数据没有绑定到网格之外，一切都很好。这是我的密码

Webservice（Mywebservice.asmx）

我在浏览器的任何地方都没有得到任何异常。所有这些看起来都很完美，但我仍然不明白为什么它没有将网格与数据绑定在一起。它只显示带有列标题和分页工具栏的空网格

---

有人能告诉我这里缺少什么吗？

看看你的商店，我发现你定义了一个代理/读取器-但是你的模型配置在错误的对象上

应该在商店里，而不是读卡器上：

    var storeData = new Ext.data.Store(
        {
            autoLoad: true,
            model: 'myModel',
            proxy: new Ext.ux.AspWebAjaxProxy({
                url: '/ProjectManagement/Mywebservice.asmx/GetTasks',
                actionMethods: {
                    read: 'POST'
                },
                reader: {
                    type: 'json',
                    root: 'd'
                },
                headers: {
                    'Content-Type': 'application/json; charset=utf-8'
                }
            })
        });

<link href="Resources/extJS/resources/css/ext-all-debug.css" />
<script src="Resources/extJS/ext-all-debug.js" language="JavaScript" />
<script src="Resources/extJS/Ext.ux.AspWebAjaxProxy.js" ResourceType="JavaScript" />
<div class="section" runat="server" id="senchaGrid">
<h1 class="mhdr">
    Project Tasks
</h1>
<div class="content">
    <div class="swrap">
        <%--sencha grid area--%>
        <div id="topic-grid">
        </div>
    </div>
</div>

<script type="text/javascript" language="javascript">
/**********************************Sencha Grid Code START***********************************/
Ext.Loader.setConfig({ enabled: true });

Ext.Loader.setPath('Ext.ux', '../Resources/extjs/examples/ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.panel.*',
'Ext.util.*',
'Ext.toolbar.Paging',
'Ext.ux.PreviewPlugin',
'Ext.ModelManager',
'Ext.layout.container.Border',
'Ext.tip.QuickTipManager'
]);

Ext.onReady(function () {

    Ext.QuickTips.init();
    // setup the state provider, all state information will be saved to a cookie
    Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
    Ext.namespace('EXT');

    Ext.define('myModel', {
        extend: 'Ext.data.Model',
        fields: ['TaskId', 'TaskName'],
        id: 'TaskId'
    });

    var storeData = new Ext.data.Store(
        {
            autoLoad: true,
            proxy: new Ext.ux.AspWebAjaxProxy({
                url: '/ProjectManagement/Mywebservice.asmx/GetTasks',
                actionMethods: {
                    read: 'POST'
                },
                reader: {
                    type: 'json',
                    model: 'myModel',
                    root: 'd'
                },
                headers: {
                    'Content-Type': 'application/json; charset=utf-8'
                }
            })
        });

    //var pluginExpanded = true;

    debugger;

    var myGrid = Ext.create('Ext.grid.Panel', {
        width: 1115, height: 500,
        //title: 'Manage tasks',
        store: storeData,
        //disableSelection: true,
        //stateful: true,
        //stateId: 'stateGrid',
        loadMask: true,
        // grid columns
        columns: [
            { text: 'TaskId', dataIndex: 'TaskId', header: 'Row #'  },
            { text: 'TaskName', dataIndex: 'TaskName', header: 'Task Name'  }
            ],

        // paging bar on the bottom
        bbar: Ext.create('Ext.PagingToolbar', {
            store: storeData,
            displayInfo: true,
            displayMsg: 'Displaying tasks {0} - {1} of {2}',
            emptyMsg: "No topics to display"
        }),
        renderTo: 'topic-grid'
    });

    // trigger the data store load
    //store.load();
});

/**************************Sencha Grid Code END******************************/

/// <reference path="/Scripts/ext-all-debug.js" />

Ext.define('Ext.ux.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;
}
});

{"d":[{"__type":"Mywebservice+SampleClass","TaskId":"1","TaskName":"task1"},{"__type":"Mywebservice+SampleClass","TaskId":"2","TaskName":"task2"},{"__type":"Mywebservice+SampleClass","TaskId":"3","TaskName":"task3"},{"__type":"Mywebservice+SampleClass","TaskId":"4","TaskName":"task4"}]}

    var storeData = new Ext.data.Store(
        {
            autoLoad: true,
            model: 'myModel',
            proxy: new Ext.ux.AspWebAjaxProxy({
                url: '/ProjectManagement/Mywebservice.asmx/GetTasks',
                actionMethods: {
                    read: 'POST'
                },
                reader: {
                    type: 'json',
                    root: 'd'
                },
                headers: {
                    'Content-Type': 'application/json; charset=utf-8'
                }
            })
        });