1
在一個extjs應用程序中，我有一個讀取json文件的樹型面板，在樹型面板中我有一個執行動作的複選框，另外我將選中的元素保存在標籤面板...ExtJS刪除商店的項目
我想刪除與複選框的checkchange事件以前保存的商店中的任何元素...
我有這樣的代碼
的觀點：
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' }
]
});