ExtJS Remove item of a store

Question

In a extjs app I have a tree panel that reads an json file, in the tree panel i have a check box that execute an action, additionally I save the checked element in a grid panel of a tab panel...

I want to remove any element of the store saved previously with the checkchange event of the checkbox ...

I have this code

The view:

Ext.define('app.view.ViewTablaContenido', {
extend: 'Ext.window.Window',
id: 'viewTablaContenido',
shadow: false, 
alias: 'widget.tablaContenido',  

initComponent: function() {
    .......

    var tree = Ext.create('Ext.tree.Panel', {
        title: '',
        id: "arbolTabla", 
        width: anchoTOC,
        height: altoTOC,            
        reserveScrollbar: true,
        loadMask: true,
        useArrows: true,
        rootVisible: false,
        store: 'capa',
        allowDeselect : true,
        border : true,
        animate: true,
        columns: [{
            xtype: 'treecolumn',
            text: 'Capa',
            flex: 5,
            sortable: true,
            dataIndex: 'titulo'
        },{
            text: 'Metadato',
            flex: 2,
            dataIndex: 'metadato',
            renderer: addUrl
        }]
    });

    var storeV = Ext.getStore('visualizacion');

    var grid = Ext.create('Ext.grid.Panel', {
        viewConfig: {                     
            plugins: [
                      Ext.create('Ext.grid.plugin.DragDrop',{
                          dragText: 'Arrastre y suelte para reorganizar'}
                      )]
        },
        store: storeV,
        columns: [
                  {
                      text: 'Name',
                      width: '100%',
                      sortable: false,
                      hideable: false,
                      dataIndex: 'nombreCapa'
                  }
                  ]
    });

    var tabPanel = Ext.create('Ext.tab.Panel',{
        id: 'tabTabla',
        items: [{
            title: 'Listado de Capas',
            tooltip: 'Muestra las capas disponibles en el sistema',
            items:[tree]
        }, {
            title: 'Visualización de capas',
            tooltip: 'Muestra las capas prendidas y permite organizar su visualización',
            autoWidth : true,
            autoHeight : true,
            plain : true,
            defaults : {
                autoScroll : true,
                bodyPadding : 0
            },
            items: [{
                xtype : 'label',
                text : 'Para ordenar la visualización de las capas arrastre y suelte a la posición deseada.',
            },
            grid]
        }]
    });

    Ext.apply(this, {
        title: 'TABLA CONTENIDO',           
        constrain: true,
        header : {
            titlePosition : 2,
            titleAlign : 'center'
        },
        closable : false,
        width : anchoTOC,
        height : altoTOC,
        x : 20,
        y : 270,
        layout : 'fit',
        animCollapse : true,
        collapsible : true,
        collapseDirection : Ext.Component.DIRECTION_LEFT,
        items: [tabPanel],
    });

    this.callParent(arguments);
}
});

The controller:

Ext.define('app.controller.ControlTablaContenido', {
extend: 'Ext.app.Controller',
views : ['ViewTablaContenido'],
init: function() {
    this.control({
        '#viewTablaContenido button[action=apagarCapas]': { 
            click: this.apagarCapas  
        },
        '#viewTablaContenido':{
            render: this.renderizar,
            collapse: this.ocultarTabla
        },
        '#arbolTabla':{
            select: this.seleccionarElemento,
            checkchange: this.cambioElemento,
            beforedeselect: this.deseleccionElemento
        }
    });
},

apagarCapas : function(boton, e){
    //alert("BOTON PRESIONADO!!");
},
renderizar: function(ev,eOpts){
},
seleccionarElemento: function(record, index, eOpts){
    var idCapaAct = index.data.id;
    var controladorUbicar = aplicacion.getController("ControlUbicar");
    capaActiva =  controladorUbicar.buscarcapa(idCapaAct);
},
cambioElemento: function(node, checked, eOpts){

    var capaBuscar = node.data.id;
    var controladorUbicar = aplicacion.getController("ControlUbicar");
    var capa =  controladorUbicar.buscarcapa(capaBuscar);

    var nombreCapa = node.data.titulo;
    var idCapa = node.data.id;
    var storeV = Ext.getStore('visualizacion');
    console.log(storeV);

    if(checked != false){
        capa.setVisible(true);

        storeV.add ({
            nombreCapa: nombreCapa ,
            idCapa: idCapa,
        });
    }else{
        capa.setVisible(false);
        //store.load(); 
        //storeV.remove(storeV.findRecord(nombreCapa,idCapa));
        //storeV.sync();
        //storeV.remove(nombreCapa);
        //storeV.sync();
    }
    capaActiva = capaBuscar;
},
deseleccionElemento: function(record, index, eOpts ){
},
buscarCapa: function(){

},
ocultarTabla: function(p){

},
cambioSlider: function(slider, newValue, thumb, eOpts ){
},
renderizarSlider: function(slider, event, eOpts){
    slider.setVisible(false);
}
});

The model:

Ext.define('app.model.modeloVisualizacion', {
extend: 'Ext.data.Model',
id: 'modeloVisualizacion',
fields: [ 'nombreCapa', 'idCapa' ]
});

And the store (with sample data):

Ext.define('app.store.visualizacion', {
extend: 'Ext.data.Store',
requires: 'app.model.modeloVisualizacion',
model: 'app.model.modeloVisualizacion',
data:[
      { nombreCapa: 'Lisa', idCapa: '1' },
      { nombreCapa: 'Bart', idCapa: '2' },
      { nombreCapa: 'Homer', idCapa: '3' },
      { nombreCapa: 'Marge', idCapa: '4' }
      ]
});

Answer 1

From store.find(fieldName,value) you can find the index of the first matching record in this store by a specific field value. If you want to remove a record based on a exact value please use this.

store.remove(store.findRecord('fieldName', 'value', 0, false, true, true));