Javascript 存储更新后未刷新ExtJS网格

我有一个网格和一个商店。存储区将填充一些数据-

国家/地区

，而其余数据为空。一旦我收到更多的输入，我就用输入填充存储

假设在初始加载后，商店中只有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

中：

我希望网格在每次新市镇建成时都能更新

这是我用于

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似乎总是空字符串，即使在我将新值推入数组并刷新网格视图之后也是如此

我正在使用extjs3.3.1

我知道它很老，所以我愿意接受适用于4.0+的解决方案，我可以尝试将其应用于3.3.1

编辑：找到问题

---

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

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

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

此行实际上创建了一个新字段

towns

，作为使用

getAt（0）

获得的记录的一部分。使用firebug查看是否填充了

getAt（0）.towns[0]

，实际上返回了您推送的值，这是误导性的

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

该行应为：

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

{ 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}

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

诀窍是指向正确的位置：

.data

。Javascript/ExtJS允许您在没有任何警告的情况下添加新字段，因为从技术上讲，您没有做错任何事情。从逻辑上讲，它创建了一个不做任何事情的新字段

---

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

关于ExtJs中的存储和网格是什么，存在一个主要的误解

两者都只是表格数据的表示。

存储

是表在内存中的表示形式，以便快速访问记录筛选和更多功能。网格是浏览器窗口中表格的可视表示形式

这样的表可能看起来像：

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
发挥了所有的魔力：它将更新事件传递给网格，以便重新渲染它。您的
推送操作
除了错误之外，不会触发更新视图所需的事件

关于网格：网格的列应为：

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

{ 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}

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

注:


听众：

对我来说真的很奇怪，但也许只是因为大局不见了

feedTheGrid

对商店来说是个奇怪的名字。存储区不提供数据。它是一个数据

渲染器始终必须返回值，否则单元格将保持空白。因此，渲染器无法工作

---

在渲染器中，

val

不能是数组。这是一个简单的变量。这就是为什么您的网格没有刷新。

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

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

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

这一行实际上创建了一个新字段towns，作为使用

getAt（0

）获得的记录的一部分。使用firebug查看是否填充了

getAt（0）.towns[0]

，实际上返回了您推送的值，这是误导性的

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

该行应为：

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

{ 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}

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

诀窍是指向正确的位置：

.data

。Javascript/ExtJS允许您在没有任何警告的情况下添加新字段，因为从技术上讲，您没有做错任何事情。从逻辑上讲，它创建了一个不做任何事情的新字段

---

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

为什么有3列都包含一个town？网格应该有引用存储中记录字段的列。每列都是数组的元素。我认为有多个列映射到同一成员（dataIndex）可能会有问题。检查控制台是否有错误？@FrancisDucharme控制台中没有错误。选中编辑以获得解决方案感谢您的输入。作为补充说明，我设法在另一个网格中使用数组作为列的数据。它从我通过渲染器指定的数组中拾取值。我显然没有使用国家作为唯一ID，我试图使问题更一般化。存储/网格名称也是如此。很抱歉给您带来了混乱。我知道存储就是数据。我打开数组，在每个城镇的存储/网格中设置单独的字段。它仍然不会刷新网格。商店接受新值。我只是使用输入中的

this.getValue（）

来做一个赋值。