Extjs Grid - Delete all record has a conditional

Question

I have a grid and a button will delete in http://jsfiddle.net/9zB8R/
My field like fields: ['id', 'name', 'type']. If type == delete i will delete it.
I init data like:

var simpleData = [];
    var store = new Ext.data.ArrayStore({
        fields: ['id', 'name', 'type'],
        data: simpleData
    });
    for (i = 0; i < 20; i++) {
        simpleData.push({id:''+i+'', name: 'name'+i, type: 'delete'});    
    }
    //this record will not delete
    simpleData.push({id:'20', name: 'enable', type: 'enable'});    

    store.loadData(simpleData);

I have a tbar like below but that can't delete all record have type == delete. How can i fix that. Thanks.

tbar:[
        {    
            text:'Delete all type = delete',
            handler:function(){
                store.each(function(item, idx) {
                    if (item && item.get('type')=='delete') {
                        store.removeAt(idx);   
                    }
                });
            }
        }
        ]

Answer 1

The problem is with the "each" loop. Removing items in the loop is changing store size and hence only some of the items are getting deleted.

To get around it, you can loop through the store in reverse order and then delete as below:

var grid = new Ext.grid.GridPanel({
    width: 400,
    height: 600,
    store: store,
    loadMask: true,
    renderTo: Ext.getBody(),
    tbar:[
    {    
        text:'Delete all type = delete',
        handler:function(){
            var i = store.getCount()-1; 
            for (i; i>=0; i--) {
                if (store.getAt(i).get('type')=='delete') {
                    store.removeAt(i);
                }
            }

        }
    }
    ],