Extjs 网格和本地存储在更新存储时在网格中创建重复项

Question

我有一个带有本地存储的小网格，每次我在该存储中更新数据时，存储中的记录都会更新，但更新后的记录会添加到网格中，而不是替换旧记录。

网格：

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

添加/更新记录：

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

}

如您所见，有一个“id”字段，并且 Extjs 正确使用该 id 来更新商店。

如果我向商店触发 3 次相同的“add()”，我会在 Grid 中获得 3 个相同的行，而商店中仍然只有一条记录。

为什么？

谢谢！

Answer 1

使用add 方法在第一次添加到存储时，每条记录只能使用一次。

如果您想更新现有记录，则需要在您的商店中找到该记录（例如使用getById），然后在其上设置新值。

因此，如果您想更新或添加（如果尚不存在），您可以执行以下操作：

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