如何在不触发 selectchanged 事件的情况下将项目添加到 ExtJS GridPanel

发布于 2024-10-29 18:33:13 字数 1257 浏览 0 评论 0原文

我有一个 ExtJS 界面，它解决了我确信很多人以前都遇到过的问题。我有一个公开项目列表的服务，我需要在 GridPanel 中显示该列表。我有这部分工作。当我单击其中一项时，我会处理 GridPanel 的 SelectionModel 中的 selectionchange 事件，并使用它从另一个 REST 调用加载资源的详细信息。

现在，我希望能够添加一个新项目。这看起来应该很简单，但我想将项目添加到 GridPanel 中，同时清除“详细信息”字段，以便用户可以输入新的详细信息并保存完整的项目。我有一个“添加”按钮，它会创建一个输入项目名称的提示。

现在，我将此项目添加到 GridPanel 的后备数据存储（如果重要的话，则为 JsonStore），并使用 getSelectionModel().selectLastRow() 来突出显示它。当然，这会触发 selectionchange 事件，该事件想要加载（不存在的）项目的详细信息。我尝试过使用 .purgeListeners()，进行 `selectLastRow() 调用，然后恢复选择更改侦听器，但由于某种原因，更改的事件仍然会触发 - 我实际上没有任何UI 中出现症状，但我可以在 Firebug 中看到它正在对项目详细信息进行（失败的）GET 调用。

我想阻止这种情况发生，我觉得这应该是一个常见/简单的问题，但我一直无法找到解决方案。将新项目添加到 GridPanel 而不让代码在保存之前尝试“查找”该项目的正确方法是什么？

ETA：评论者指出，Record 对象有一个phantom 属性，这听起来正是我们想要的。但是，当我将项目列表加载为

STORE = new Ext.data.JsonStore({
  autoLoad: true,
  url: 'items'
  method: 'GET',
  storeId: 'store',
  root: 'list',
  remoteSort: false,
  fields: ['name']
});

所有时，列表中的记录一旦加载，就会被标记为幻像。 phantom 不适用于 JsonStore 吗？我应该以另一种方式解决这个问题吗？

ETA 再次：好的，找到了。我没有在 JsonStore 构造函数中设置 idProperty 属性，这意味着记录没有 id，这意味着它们始终是幻影。现在，我的新记录显示phantom，而数据库中已有的记录却没有。呜呼！

原文

I've got an ExtJS interface that addresses a problem I'm sure tons of people have had before. I have a service that exposes a list of items, and I need to show that list in a GridPanel. I have this part working. When I click one of the items, I handle the selectionchange event in the GridPanel's SelectionModel, and use it to load details of the resource from another REST call.

Now, I want to be able to add a new item. This seems like it should be simple, but I want to add the item to the GridPanel and at the same time clear the "detail" fields so the user can enter new details and save a complete item. I have an Add button, which creates a Prompt to input an item name.

Now, I add this item to the GridPanel's backing data store (a JsonStore if that matters) and use getSelectionModel().selectLastRow() to highlight it. Of course, this fires off the selectionchange event, which wants to load the details of the (non-existent) item. I've tried using .purgeListeners(), making the `selectLastRow() call, then restoring the selectionchange listener, but for some reason the changed event still fires off -- I don't actually have any symptoms in the UI, but I can see in Firebug that it's making a (failed) GET call for the item details.

I'd like to stop this from happening, and I feel like this should be a common / easy problem, but I haven't been able to find a solution. What's the right way to add a new item to the GridPanel without having your code try to "look up" the item before you save it?

ETA: A commenter pointed out that there's a phantom property on Record objects, which sounds like exactly what a want. However, when I load my item list as

STORE = new Ext.data.JsonStore({
  autoLoad: true,
  url: 'items'
  method: 'GET',
  storeId: 'store',
  root: 'list',
  remoteSort: false,
  fields: ['name']
});

all the records in the list, as soon as I load them, are marked phantom. Does phantom not work with JsonStore? Should I go about this another way?

ETA Again: OK, found it. I wasn't setting the idProperty property on my JsonStore constructor, which meant that the Records didn't have an id, which meant that they were always phantom. Now my new record shows phantom while ones that are already in the DB do not. Woo-hoo!

分享到QQ

分享到微博