How to add an item to an ExtJS GridPanel without firing selectionchanged event

Question

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!

Amol Katdare Amol Katdare · Accepted Answer · 2011-04-04T22:35:22

I would prefer to do this without messing with the event chain or handlers that I have already setup.

One easy way seems along the lines of - "somehow figure out in the selectionchange listener whether record that was selected is a persistent one or not (yet)"

The "figuring out" part can be achieved by checking record.phantom as suggested by Kevin in comments below

How to add an item to an ExtJS GridPanel without firing selectionchanged event

1 Answers