Question

I am creating a list where I am adding items from the list through a json data.
The problem i am facing is that I have a delete button, and on click of the button,
the selected item from the list has to be deleted from the store.

This is what i have tried

{
    text: '',
    id: 'deletenotesBtn',
    iconCls:'trash',
    iconMask: true,
    ui:'action',
    handler: function(){
    var itemSelected = Ext.getCmp('noteslist').getSelection().remove();
    //  this.remove(this, true);
    alert('item deleted');
}

Any suggestions on how i can achieve it?

Answer 1

The answer is inside your question. You have to remove the item from the store, not from the list.

...
handler: function(){
    var selection = Ext.getCmp('noteslist').getSelection();
    Ext.StoreManager.get('MyStore').remove(selection[0]);
}
...

That is, assuming that the store you use for your list is called ‘MyStore’.

The output of the ‘getSelection()’ method on your list is an array of the (possibly multiple) selected item(s). If none is selected, it will return an empty array. If one ore more items are selected, it will return an array of the corresponding records in your store.

In all cases, this handler function on your button will remove the selected item(s) from your store and your list will refresh accordingly.

Also, depending on the configuration of your store, you might want to sync it after this operation is performed:

Ext.StoreManager.get('MyStore').sync();

Hope this helps.