ExtJS 危险信号：我可以解决它吗？如果可以，如何解决？答案

【问题标题】：ExtJS red flag: Can I work around it, and if so how?ExtJS 危险信号：我可以解决它吗？如果可以，如何解决？
【发布时间】：2011-07-30 00:07:07
【问题描述】：

在较早的问题Why is my ExtJS datagrid populating as empty? 中，我基于 Jesus Garcia 的 ExtJS in Action（亚马逊上的五颗星）进行了旨在成为“第一次尝试”的实现。当这不起作用时，我去重新实现我试图遵循的示例（第 159-161 页）。我更正了一个错误，其中 nameRecord 中的列称为“name”，而 colModel 中的列称为“fullName”，但除此之外，此页面同样实现了示例代码，除了空格：

<!DOCTYPE html> 
<html> 
    <head> 
        <link rel="stylesheet" href="/extjs/resources/css/ext-all.css" /> 
        <script type="text/javascript"
          src="/extjs/adapter/ext/ext-base-debug.js"> 
        </script> 
        <script type="text/javascript" src="/extjs/ext-all-debug.js"></script> 
    </head> 
    <body> 
        <script type="text/javascript"> 

            var arrayData = [
              ['Jay Garcia', 'MD'],
              ['Aaron Baker', 'VA'],
              ['Susan Smith', 'DC'],
              ['Mary Stein', 'DE'],
              ['Bryan Shanley', 'NJ'],
              ['Nyri Selgado', 'CA']
              ];

            var nameRecord = Ext.data.Record.create([
              {name: 'fullName', mapping: 1},
              {name: 'state', mapping: 2}
              ]);

            var arrayReader = new Ext.data.ArrayReader({}, nameRecord);

            var memoryProxy = new Ext.data.MemoryProxy(arrayData);

            var store = new Ext.data.Store({
              reader: arrayReader,
              proxy: memoryProxy
              });

            var colModel = new Ext.grid.ColumnModel([
                  {
                  header: 'Full Name',
                  sortable: true,
                  dataIndex: 'fullName'
                  },
                  {
                  header: 'State',
                  dataIndex: 'state'
                  }
              ]);

            var gridView = new Ext.grid.GridView();

            var selModel = new Ext.grid.RowSelectionModel({
              singleSelect: true
              });

            var grid = new Ext.grid.GridPanel({
              title: 'Our first grid',
              renderTo: Ext.getBody(),
              autoHeight: true,
              width: 250,
              store: store,
              view: gridView,
              colModel: colModel,
              selModel: selModel
              });

            </script> 
    </body> 
</html>

这与我之前的问题 (Why is my ExtJS datagrid populating as empty?) 的失败方式相同：它显示标题但没有数据行。

所以我有两个问题：

首先，我可以从中学到什么？当您尝试按照此特定标题了解如何使用 ExtJS 时，会发生这种情况吗？是否有另一本书我应该参考？

第二，我在哪里（如果在任何地方）可以找到简单、有效的 ExtJS 数据网格演示，我可以开始工作，然后开始适应我的目的？

【问题讨论】：

标签： javascript frameworks datagrid extjs grid

【解决方案1】：

将您的记录创建更改为

var nameRecord = Ext.data.Record.create([
    {name: 'fullName', mapping: 0},
    {name: 'state', mapping: 1}
]);

和你的商店创建到

var store = new Ext.data.Store({
    reader: arrayReader,
    proxy: memoryProxy,
    autoLoad: true
});

关于你的第二个问题：试试examples page on sencha.com。

【讨论】：