从商店填充网格面板不起作用 EXTJS 4.2答案

【问题标题】：filling Grid panel from Store doesn't work EXTJS 4.2从商店填充网格面板不起作用 EXTJS 4.2
【发布时间】：2013-04-15 13:22:17
【问题描述】：

早上好，当我尝试从我的网络服务填充我的网格面板时遇到一些问题，结果是一个空网格，谢谢你的提前。

// Create store

var myStore = new Ext.data.JsonStore({
    proxy: new Ext.data.HttpProxy({
        url: 'Service.asmx/GetPeople',
        headers: {
            'Content-type': 'application/json' 
        }
    }),
    root: 'd', 
    id: 'Id', 
    fields: ['Id', 'FistName', 'LastName', 'BirthDate'], 
    autoLoad: true
});

//Create grid to display data from store

var gridTest = new Ext.grid.Panel({
     store: myStore, // Our store
     renderTo: Ext.getBody(),
     forceFit: true,
     columns: [ // Grid columns
         { xtype: 'gridcolumn', width: 100, text: 'Id', dataIndex: 'Id', flex: 1 },
         { xtype: 'gridcolumn', width: 100, text: 'Nom', dataIndex: 'FirstName', flex: 1 },
         { xtype: 'gridcolumn', width: 100, text: 'Mail', dataIndex: 'LastName', flex: 1 },
         { xtype: 'gridcolumn', width: 100, text: 'Phone', dataIndex: 'BirthDate', flex: 1 }    
     ]
});

这是我的视口：

Ext.create('Ext.container.Viewport', {
    layout: "border",
    items: [{
        region: "north",
        height: 50,
        title: "Nord"
    }, {
        region: "south",
        height: 200,
        title: "sud",
        bodyStyle: 'background: #fffff;',
        border: false
    }, {
        region: "center",
        title: "centre",
        bodyStyle: 'background: #00000;',
        border: false,
        items: gridTest                                     
    }, {
        region: "west",
        width: 100,
        title: "ouest"
    }, {
        region: "east",
        width: 100,
        title: "est"
    }]
});

这是来自 FIREBUG MOZILLA FIREFOX 的回应：

{"d": [{
    "__type":"WebService4ExtJS.Model.Person", 
    "Id":0,
     "FirstName":"sami", 
     "LastName":"samibizani@gmail.com",
     "BirthDate":"23188219"
  }, {
     "__type":"WebService4ExtJS.Model.Person",
     "Id":1,"FirstName":"admin",
     "LastName":"admin@gmail.com",
     "BirthDate":"1111111"
  }, {
     "__type":"WebService4ExtJS.Model.Person",
     "Id":2,
     "FirstName":"user",
     "LastName":"user@gmail.com",
     "BirthDate":"2222222"
  }]
 }

【问题讨论】：

你的代理配置是从哪里得到的？查看文档以获取示例。
我尝试使用 EXTJS 2.2 版执行这些脚本，但是当我更改为新版本时，我发现了一个问题，我无法继续使用更新版本的 ExtJS 4.2，谢谢大家的帮助跨度>
API 发生了很大变化，您必须更改代码以适应。查看示例以了解正确的方法来做你正在做的事情。

标签： extjs4.2

【解决方案1】：

您的商店阅读器未定义：

reader: {
    type: 'json',
    root: 'd',
    idProperty: 'Id'
}

您可以找到工作代码here。

还有一个小错误：在 fields 数组中，您写的是 FistName 而不是 FirstName。

【讨论】：

谢谢 Darin Kolev，但是当我将 Store 与 Web 服务 (Visual Studio 2010) 一起使用时，会导致一个空网格。你也可以找到我的 project_code ：link