商店更新后 ExtJS Grid 不刷新

Question

我有一个网格和一个商店。商店中填充了一些数据 - country - 而其余的都是空的。一旦我收到更多输入，我就会用输入填满商店。

假设我在初次加载后商店中只有 1 个国家/地区。

商店：

feedTheGrid = new Ext.data.JsonStore({
    autoDestroy : true,
    autoSave : false,
    autoLoad : true,
    idProperty: 'country',
    root: 'root',
    totalProperty : 'totalcount',
    fields : ['country', 'towns'],
    proxy : new Ext.data.HttpProxy(new Ext.data.Connection({
        url : "country/searchCountries.action",
        method : 'POST',
        timeout : 300000
    }))
});

所以用户输入城镇。我使用push() 在数组towns 中保存了一个城镇：

listeners: {
    'change': function() {
        if (feedTheGrid.getAt(0).towns === undefined) {
            feedTheGrid.getAt(0).towns = [];
        }
        feedTheGrid.getAt(0).towns.push(this.getValue());
        gridMonster.getView().refresh();
    }
}

我希望每次加入新城镇时网格都会更新。

这是我用于gridMonster 的列模型的一部分：

{ header: "Town 1", width: 150, dataIndex: 'towns', 
  renderer: function(val) {
      if (val[0] != undefined) {
          return val[0];
      }
  }, sortable: true},
{ header: "Town 2", width: 150, dataIndex: 'towns',
  renderer: function(val) {
      if (val[1] != undefined) {
          return val[1];
      }
  }, sortable: true},  
{ header: "Town 3", width: 150, dataIndex: 'towns',
  renderer: function(val) {
      if (val[2] != undefined) {
          return val[2];
      }
  }, sortable: true}

问题是城镇加入网格后永远不会刷新。

到目前为止我注意到的一些事情：

当我检查 Firebug 时，商店会更新为新值。此外，即使在我将新值推送到数组并刷新网格视图之后，渲染器中给出的 val 似乎总是空字符串。

我正在使用 ExtJS 3.3.1

我知道它很旧，所以我对适用于 4.0+ 的解决方案持开放态度，我可以尝试将其应用于 3.3.1。

编辑：发现问题

非常微妙的问题，花了几个小时试图找出问题所在，却发现我找错了地方。问题出在这一行：

feedTheGrid.getAt(0).towns.push(this.getValue());

这一行实际上创建了一个新字段towns，作为您使用getAt(0) 获得的记录的一部分。使用 firebug 查看是否填充了 getAt(0).towns[0] 实际上会返回您推送的值，这是具有误导性的。

ExtJS 不知道这个新字段，也不应该知道。

这一行应该是：

feedTheGrid.getAt(0).data.towns.push(this.getValue());

诀窍是指向正确的位置：.data。 Javascript/ExtJS 允许您在没有任何警告的情况下添加新字段，因为从技术上讲，您没有做错任何事情。从逻辑上讲，它会创建一个什么都不做的新字段。

@Lorenz Meyer 我可以使用渲染器显示数组的元素，同时指向列模型中的城镇数组。

Answer 1

对于什么是 ExtJs 中的 store 和 grid 存在很大的误解。

两者都只是表格数据的表示。 store 是表在内存中的表示，以便快速访问记录过滤和更多功能。 grid 是浏览器窗口中表格的可视化表示。

这样的表格可能如下所示：

Id | Country | City
-------------------
1  | US      | NYC
2  | France  | Macon
3  | US      | Macon

首先，在一个表行上，您只能有一个城市。在表中，您不能在单个字段中包含数组。如果您有多个城市，这就是 rows 的用途。

那么，您的idProperty 不能是国家。如果是这样，这将意味着国家是独一无二的。显然，他们不是。一个国家可以有多个城市。 （cities 也不能是 idProperty，因为存在多个相同的城市）。

现在你肯定开始明白了，feedTheGrid.getAt(0).towns.push(this.getValue()); 毫无意义。 towns 列不能是数组。您使用 feedTheGrid.add({country: 'US', towns: 'LA'}) 插入新行。
towns 列最多可以是一个逗号分隔值，在这种情况下，您可以使用

var record = feedTheGrid.getAt(0),
currentTowns = record.get('towns');
record.set('towns', currentTowns + ', ' + value)

记录的set 方法具有所有的魔力：它将更新事件传递给网格以重新呈现它。您的push 除了错误不会触发更新视图所需的事件。

关于网格：网格的列应该是：

{ header: "Id", width: 150, dataIndex: 'id', sortable: true},
{ header: "Country", width: 150, dataIndex: 'country', sortable: true},  
{ header: "Town(s)", width: 150, dataIndex: 'towns', sortable: true}

注意事项：

• listeners: 在我看来真的很奇怪，但也许只是因为缺少大局。
• feedTheGrid 是一个奇怪的商店名称。商店不提供数据。它是数据。
• 渲染器总是必须返回一个值，否则单元格将保持空白。因此，您的渲染器无法工作。

Answer 2

在您的渲染器中，val 不能是数组。这是一个简单的变量。这就是您的网格不刷新的原因。

Answer 3

非常微妙的问题，花了几个小时试图找出问题所在，却发现我找错了地方。问题出在这一行：

feedTheGrid.getAt(0).towns.push(this.getValue());

这一行实际上创建了一个新的字段城镇，作为您使用getAt(0 获得的记录的一部分）。使用 firebug 查看是否填充了 getAt(0).towns[0] 实际上会返回您推送的值，这是误导性的。

ExtJS 不知道这个新字段，也不应该知道。

这一行应该是：

feedTheGrid.getAt(0).data.towns.push(this.getValue());

诀窍是指向正确的位置：.data。 Javascript/ExtJS 允许您在没有任何警告的情况下添加新字段，因为从技术上讲，您没有做错任何事情。从逻辑上讲，它会创建一个什么都不做的新字段。

@Lorenz Meyer 我可以使用渲染器显示数组的元素，同时指向列模型中的城镇数组。