Question

我一直在练习在JSFiddle上制作一个非常简单的网格示例，我已经陷入了这个问题。

我有1个模型，1个商店和1个网格对象。我想我把所有东西都放到了合适的空间里，但是我从结果中得到的是“无法读取属性”项目“未定义”，有人可以解释为什么会发生这种情况，拜托了吗？

var model = Ext.create('Ext.data.Model', {
  fields: [
    {name: 'name', type: 'string'},
    {name: 'value', type: 'float'}
  ]
});

var store = Ext.create('Ext.data.Store', {
  model: model,
  data: [
    {name: 'a', value: 1.2},
    {name: 'b', value: 2.3},
    {name: 'c', value: 3.4},
    {name: 'd', value: 4.5},
  ]
});

Ext.create('Ext.grid.Panel', {
  width: 500,
  height: 500,
  store: store,
  columns: [
    {text: 'header', dataIndex: 'name'},
    {text: 'header2', dataIndex: 'value'}
  ],
  renderTo: Ext.getBody()
})

Answer 1

'Create'创建父元素的实例。在创建模型实例之前，需要定义模型。

Ext.define('occupationModel', {
    extend: 'Ext.data.Model',

    fields: [
        {name: 'code', type: 'int'},
        {name: 'occup', type: 'string'}
    ]
});

Ext.create('occupationModel', {
    code : 1,
    occup : 'foo'
});

Answer 2

如果您使用的是JSFiddle，那么您需要包含ExtJS所有必需的库，例如

ext-all-debug.js根据您的要求，您可以更改ExtJS库的版本。
ext-theme-neptune仅针对您想要使用的主题，您可以更改。
ext-theme-neptune-all-debug仅针对您想要使用的主题，您可以更改。

在JSFiddle中，我创建了一个演示，您可以在此处查看它是如何工作的。希望这会对你有所帮助。

+---------+-----------------+----------+-------------------+-----------------+----------+-------------------+------------+----------+-------------------+
|  Name   |            Vinesh Pardeshi                     |         Satyajit Chavan                        |   Varsha                                  |
+---------+-----------------+----------+-------------------+-----------------+----------+-------------------+------------+----------+-------------------+
| Country | India                                          | Europe                                         | Japan                                     |
|         |                 |          |                   |                 |          |                   |            |          |                   |
|         | Date            | Cashflow | Status of payment | Date            | Cashflow | Status of payment | Date       | Cashflow | Status of payment |
| EMI1    | 15-08-2017      | 5000     | Paid              | 15-08-2017      | 8400     | Unpaid            | 31-08-2017 | 40003    | Pending           |
| EMI2    | 15-09-2017      | 5000     | Pending           | 15-09-2017      | 7700     | Pending           | 30-09-2017 | 6441     | Pending           |
| EMI3    | 15-10-2017      | 5000     | Pending           | 15-10-2017      | 7700     | Pending           | 30-10-2017 | 6441     | Pending           |
| EMI4    | 15-11-2017      | 5000     | Pending           | 15-11-2017      | 7700     | Pending           | 30-11-2017 | 6441     | Pending           |
| EMI5    | 15-12-2017      | 5000     | Pending           | 15-12-2017      | 7700     | Pending           | 30-12-2017 | 6441     | Pending           |
| EMI6    | 15-01-2018      | 5000     | Pending           | 15-01-2018      | 7700     | Pending           | 30-01-2018 | 6441     | Pending           |
| EMI7    | 15-02-2018      | 5000     | Pending           | 15-02-2018      | 7700     | Pending           | 28-02-2018 | 6441     | Pending           |
| EMI8    |                 |          |                   | 15-03-2018      | 7700     | Pending           | 28-03-2018 | 6441     | Pending           |
| EMI9    |                 |          |                   | 15-04-2018      | 7700     | Pending           | 28-04-2018 | 6441     | Pending           |
| EMI10   |                 |          |                   |                 |          |                   | 28-05-2018 | 6441     | Pending           |
| EMI11   |                 |          |                   |                 |          |                   | 28-06-2018 | 6441     | Pending           |
+---------+-----------------+----------+-------------------+-----------------+----------+-------------------+------------+----------+-------------------+

您还可以在此处查看Sencha Fiddle。

Answer 3

解决您的问题的方法是使用以下代码更改您的模型。

Ext.define('model', {
            extend: 'Ext.data.Model',
            fields: [
                        {name: 'name', type: 'string'},
                        {name: 'value', type: 'float'}
                    ]
                });

另外，点击链接了解更多信息，Differences between Ext.create() and Ext.define()

extjs4网格简单示例但错误：'items'未定义

3 个答案: