ExtJS 删除商店的商品

Question

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

\n\n

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

\n\n

我有这个代码

\n\n

风景：

\n\n

Ext.define(\'app.view.ViewTablaContenido\', {\nextend: \'Ext.window.Window\',\nid: \'viewTablaContenido\',\nshadow: false, \nalias: \'widget.tablaContenido\',  \n\ninitComponent: function() {\n    .......\n\n    var tree = Ext.create(\'Ext.tree.Panel\', {\n        title: \'\',\n        id: "arbolTabla", \n        width: anchoTOC,\n        height: altoTOC,            \n        reserveScrollbar: true,\n        loadMask: true,\n        useArrows: true,\n        rootVisible: false,\n        store: \'capa\',\n        allowDeselect : true,\n        border : true,\n        animate: true,\n        columns: [{\n            xtype: \'treecolumn\',\n            text: \'Capa\',\n            flex: 5,\n            sortable: true,\n            dataIndex: \'titulo\'\n        },{\n            text: \'Metadato\',\n            flex: 2,\n            dataIndex: \'metadato\',\n            renderer: addUrl\n        }]\n    });\n\n    var storeV = Ext.getStore(\'visualizacion\');\n\n    var grid = Ext.create(\'Ext.grid.Panel\', {\n        viewConfig: {                     \n            plugins: [\n                      Ext.create(\'Ext.grid.plugin.DragDrop\',{\n                          dragText: \'Arrastre y suelte para reorganizar\'}\n                      )]\n        },\n        store: storeV,\n        columns: [\n                  {\n                      text: \'Name\',\n                      width: \'100%\',\n                      sortable: false,\n                      hideable: false,\n                      dataIndex: \'nombreCapa\'\n                  }\n                  ]\n    });\n\n    var tabPanel = Ext.create(\'Ext.tab.Panel\',{\n        id: \'tabTabla\',\n        items: [{\n            title: \'Listado de Capas\',\n            tooltip: \'Muestra las capas disponibles en el sistema\',\n            items:[tree]\n        }, {\n            title: \'Visualizaci\xc3\xb3n de capas\',\n            tooltip: \'Muestra las capas prendidas y permite organizar su visualizaci\xc3\xb3n\',\n            autoWidth : true,\n            autoHeight : true,\n            plain : true,\n            defaults : {\n                autoScroll : true,\n                bodyPadding : 0\n            },\n            items: [{\n                xtype : \'label\',\n                text : \'Para ordenar la visualizaci\xc3\xb3n de las capas arrastre y suelte a la posici\xc3\xb3n deseada.\',\n            },\n            grid]\n        }]\n    });\n\n    Ext.apply(this, {\n        title: \'TABLA CONTENIDO\',           \n        constrain: true,\n        header : {\n            titlePosition : 2,\n            titleAlign : \'center\'\n        },\n        closable : false,\n        width : anchoTOC,\n        height : altoTOC,\n        x : 20,\n        y : 270,\n        layout : \'fit\',\n        animCollapse : true,\n        collapsible : true,\n        collapseDirection : Ext.Component.DIRECTION_LEFT,\n        items: [tabPanel],\n    });\n\n    this.callParent(arguments);\n}\n});\n

\n\n

控制器：

\n\n

Ext.define(\'app.controller.ControlTablaContenido\', {\nextend: \'Ext.app.Controller\',\nviews : [\'ViewTablaContenido\'],\ninit: function() {\n    this.control({\n        \'#viewTablaContenido button[action=apagarCapas]\': { \n            click: this.apagarCapas  \n        },\n        \'#viewTablaContenido\':{\n            render: this.renderizar,\n            collapse: this.ocultarTabla\n        },\n        \'#arbolTabla\':{\n            select: this.seleccionarElemento,\n            checkchange: this.cambioElemento,\n            beforedeselect: this.deseleccionElemento\n        }\n    });\n},\n\napagarCapas : function(boton, e){\n    //alert("BOTON PRESIONADO!!");\n},\nrenderizar: function(ev,eOpts){\n},\nseleccionarElemento: function(record, index, eOpts){\n    var idCapaAct = index.data.id;\n    var controladorUbicar = aplicacion.getController("ControlUbicar");\n    capaActiva =  controladorUbicar.buscarcapa(idCapaAct);\n},\ncambioElemento: function(node, checked, eOpts){\n\n    var capaBuscar = node.data.id;\n    var controladorUbicar = aplicacion.getController("ControlUbicar");\n    var capa =  controladorUbicar.buscarcapa(capaBuscar);\n\n    var nombreCapa = node.data.titulo;\n    var idCapa = node.data.id;\n    var storeV = Ext.getStore(\'visualizacion\');\n    console.log(storeV);\n\n    if(checked != false){\n        capa.setVisible(true);\n\n        storeV.add ({\n            nombreCapa: nombreCapa ,\n            idCapa: idCapa,\n        });\n    }else{\n        capa.setVisible(false);\n        //store.load(); \n        //storeV.remove(storeV.findRecord(nombreCapa,idCapa));\n        //storeV.sync();\n        //storeV.remove(nombreCapa);\n        //storeV.sync();\n    }\n    capaActiva = capaBuscar;\n},\ndeseleccionElemento: function(record, index, eOpts ){\n},\nbuscarCapa: function(){\n\n},\nocultarTabla: function(p){\n\n},\ncambioSlider: function(slider, newValue, thumb, eOpts ){\n},\nrenderizarSlider: function(slider, event, eOpts){\n    slider.setVisible(false);\n}\n});\n

\n\n

该模型：

\n\n

Ext.define(\'app.model.modeloVisualizacion\', {\nextend: \'Ext.data.Model\',\nid: \'modeloVisualizacion\',\nfields: [ \'nombreCapa\', \'idCapa\' ]\n});\n

\n\n

和商店（带有示例数据）：

\n\n

Ext.define(\'app.store.visualizacion\', {\nextend: \'Ext.data.Store\',\nrequires: \'app.model.modeloVisualizacion\',\nmodel: \'app.model.modeloVisualizacion\',\ndata:[\n      { nombreCapa: \'Lisa\', idCapa: \'1\' },\n      { nombreCapa: \'Bart\', idCapa: \'2\' },\n      { nombreCapa: \'Homer\', idCapa: \'3\' },\n      { nombreCapa: \'Marge\', idCapa: \'4\' }\n      ]\n});\n

\n

Answer 1

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

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

Answer 2

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

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