CODEWITHSUNDEEP
extjsgridextjs4.1
DeLe
DeLe

Reputation: 2480

Delete row within sortable: true in Grid with Local Data

I try to make a gridpanel with local data http://jsfiddle.net/8um4T/
This grid has add and delete within sortable: true in column, I will delete record by id (but my way fail with large data)
Here is my data

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

My tbar with a add button

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

My action column

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

if mydata is small then delete button will working. My data in my example is 20 record and that don't work

my idea is remove record from store after assign for simpleData. But how to do that or has another anyway to fix my problem thanks

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

Upvotes: 1

Views: 434

Answers (1)

Juan Daniel Flores
Juan Daniel Flores

Reputation: 276

You need to break the loop after splicing the array by returning false. You are taking away one of the elements but the loop is not aware of it. So the last element will be undefined.

The loop will fail because the last 'items' parameter is not an object. So "items" is not an object and does not have an id.

The result is that you are removing that object from the array but you never get to the grid.store.removeAt(rowIndex); sentence. I would do:

Ext.each(simpleData, function (items, idx) {            
  if (items.id == record.data.id) {
    simpleData.splice(idx, 1);
    return false;
  }
});

Upvotes: 1

Related Questions