javascript - ExtJS 删除商店的项目

Question

在 extjs 应用程序中，我有一个读取 json 文件的树面板，在树面板中，我有一个执行操作的复选框，此外，我将选中的元素保存在选项卡面板的网格面板中...

我想删除之前使用复选框的 checkchange 事件保存的商店的任何元素 ...

我有这个代码

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

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

模型:

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

和商店(带有样本数据):

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

从 store.find(fieldName,value) 中，您可以通过特定字段值找到该商店中第一条匹配记录的索引。如果您想删除基于精确值的记录，请使用它。

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