Question

在之前的一个问题Why is my ExtJS datagrid populating as empty?中，我根据耶稣加西亚的 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数据网格演示，我可以开始工作，然后开始适应我的目的？

Answer 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。

ExtJS红旗：我可以解决它，如果是这样的话怎么样？

1 个答案: