Question

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

假设初始加载后我在商店中只有一个国家。

商店：

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
    }))
});

因此用户输入城镇。我使用towns：

在数组push()中保存了一个城镇

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似乎总是空的String，即使我将新值推入数组并刷新网格视图。

我正在使用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是浏览器窗口中表格的直观表示。

这样的表格看起来像：

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

首先，在一个表行上，您只能拥有一个城市。在表格中，您不能在单个字段中包含数组。如果您有多个城市，则行适用于

。

然后，您的idProperty不能是国家/地区。如果是这样，这意味着各国都是独一无二的。显然，他们不是。一个国家可以有多个城市。（城市也不能是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我可以使用渲染器显示数组的元素，同时指向列模型中的城镇数组。

存储更新后ExtJS Grid不刷新

3 个答案: