ExtJS 删除商店的项目

ExtJS Remove item of a store

本文关键字:项目 删除 ExtJS      更新时间:2023-09-26

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

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

我有这个代码

观点:

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

控制器:

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

store.find(fieldName,value) 中,您可以通过特定字段值找到此存储中第一个匹配记录的索引。如果要根据确切值删除记录,请使用此选项。

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

可以使用存储函数find(fieldName,value)获取模型的索引,然后调用removeAt(index)。

storeV.removeAt(storeV.find('idCapa', idCapa))