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

时间:2013-12-19 09:23:01

标签: extjs grid duplicates store

我有一个带有本地商店的小网格,每当我更新该商店中的数据时,记录会在商店中更新,但更新的记录会添加到网格中,而不是替换旧的。

网格:

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()',我会在网格中获得3个相同的行,而商店中只有一条记录。

为什么?

谢谢!

1 个答案:

答案 0 :(得分: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}));
}