extjs - ソート可能内の行を削除: ローカル データを含むグリッドで true

Question

ローカルデータでグリッドパネルを作成しようとしていますhttp://jsfiddle.net/8um4T/
このグリッドは列内で追加と削除を sortable: true行っています.IDでレコードを削除します(しかし、私の方法は大きなデータで失敗します)
ここに私のデータがあります

var simpleData = [];
var store = new Ext.data.ArrayStore({
    fields: ['id', 'name',],
    data: simpleData
});
for (i = 0; i < 20; i++) {
    simpleData.push({id:''+i+'', name: 'name'+i});    
}
store.loadData(simpleData);

追加ボタンのある私の tbar

tbar:[
    {    
        text:'Add',
        handler:function(){
            simpleData.push({id:'x', name: 'name'});
            store.loadData(simpleData);
        }
    }
]

私の行動コラム

{
    header: '',
    xtype: 'actioncolumn'
    , width: 50
    , items: [{ // Delete button
        icon: 'http://whatisextjs.com/BAHO/icons/cancel.png',
        tooltip: 'Delete'
        , handler: function(grids, rowIndex, colindex) {
            var record = grid.getStore().getAt(rowIndex);

            //Delete item in array
            // if data is large will don't working
            Ext.each(simpleData, function (items, idx) {            
                if (items.id == record.data.id) {
                    simpleData.splice(idx, 1);
                }
            });     

            //Delete record in store
            grid.store.removeAt(rowIndex); 
        }
    }]
}

mydata が小さい場合、削除ボタンが機能します。私の例のデータは 20 レコードで、うまくいきません

store私の考えは、割り当て後にからレコードを削除することですsimpleData。しかし、それを行う方法、またはとにかく私の問題を解決する別の方法があります

                    //grid.store.removeAt(rowIndex); 
                    // simpleData = grid.store.data; // my idea is (but how)