Extjs grid and local store creates duplicates in grid while store is updated

Question

I've a small grid with a local store and every time I'm updating data in that store, the record is updated in the store but the updated record is added in the grid instead of replacing the old one.

Grid:

Highlights: Ext.create('Ext.grid.GridPanel',{
            store:Ext.create('Ext.data.Store', {
                 fields: [
                      {name: 'id',       type: 'string'},
                      {name: 'QUANTITY', type: 'int'},
                      {name: 'HIGHLIGHT',  type: 'string'},
                      {name: 'ICON', type:'string'},
                      {name: 'PRIORITY', type:'int'},
                      {name: 'GROUPICON', type:'string'},
                 ],
                 sorters:['PRIORITY','QUANTITY'],
                 data : []
            }),
            hideHeaders:true,
            columns:[{
                header:'Icon',
                dataIndex:'ICON',
                width:22,
                stateId:'ICON',
                renderer:function(val){
                    if(val != ''){
                        return '<img src=icons/cq/'+val+'.png align=absmiddle border=0>';
                    }else{
                        return '';
                    }
                }
            },{
                header: 'Quantity',
                dataIndex: 'QUANTITY',
                stateId:'QUANTITY',
                width:35,
                align:'right',
                sortable: true,
                hidden: false
            },{
                header: 'Highlight',
                dataIndex: 'HIGHLIGHT',
                stateId:'HIGHLIGHT',
                renderer:function(val){
                    return '<b>'+val+'</b>';
                },
                flex:1,
                sortable: true,
                hidden: false
            },{
                header:'Group Icon',
                dataIndex:'GROUPICON',
                width:28,
                stateId:'GROUPICON',
                renderer:function(val){
                    if(val != ''){
                        return '<img src=icons/cq/'+val+'.png align=absmiddle border=0>';
                    }else{
                        return '';
                    }
                }
            }],
            title:'I have...',
            iconCls:'topic',
            padding:'0 0 8 0'
        })

Adding /updating a record:

    Highlight:function(store,id,highlight,icon,priority,groupicon){
    //SET VALUES
    if(typeof icon == 'undefined'){ var icon = '';}
    if(typeof priority == 'undefined'){ var priority = 9;}
    var quantity = store.data.length;
    //ADD / UPDATE
    if(quantity>0){
        this.Grids.Highlights.getStore().add({PRIORITY:priority,ICON:icon,GROUPICON:groupicon,QUANTITY:quantity,HIGHLIGHT:highlight,id:id});
    }           

}

As you can see there is an "id" field and the id is correctly used by Extjs to update the store.

if I trigger 3 times the same 'add()' to the store, I get 3 identical rows in the Grid while having still only one record in the store.

Why?

Thanks!

matt matt · Accepted Answer · 2013-12-19T09:35:39

Using the method add should only be used once per record, when it is added to the store for the first time.

If you want to update an existing record, you will need to find that record in your store (e.g. with getById) and then set the new values on it.

So, if you want to either update or add (if it does not exist yet), you could do something like:

var store = this.Grids.Highlights.getStore(),
    record = store.getById(id),
    properties = {
        PRIORITY: priority,
        ICON: icon,
        GROUPICON: groupicon,
        QUANTITY: quantity,
        HIGHLIGHT: highlight
    };

// if the record already exists in the store, update it
if (record) {
    record.set(properties);
    record.commit();
}
// else add a new record
else {
    store.add(Ext.apply(properties, {id: id}));
}

Extjs grid and local store creates duplicates in grid while store is updated

1 Answers