I have an ExtJs (5.1) app with Open Layers library (3.4), in the ExtJs app have a view that contains a grid panel that shows the active layers, this panel have the property DragDrop... In the controller of the view I'm trying to change the visibility of the layers by 'drop' event I mean that a layer which is visualized over another....
I have this code:
The view:
... var storeV = Ext.getStore('visualizacion'); var grid = Ext.create('Ext.grid.Panel', { id: 'gridPanelVisual', viewConfig: { plugins: [ Ext.create('Ext.grid.plugin.DragDrop',{ dragText: 'Arrastre y suelte para reorganizar'} )] }, store: storeV, columns: [ { width: '100%', sortable: false, hideable: false, dataIndex: 'nombreCapa' } ] }); ... 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 }, '#campoBusquedaCapa':{ keyup: this.buscarCapa }, '#gridPanelVisual':{ afterrender: this.organizarCapas } }); }, 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'); if(checked != false){ capa.setVisible(true); var layers = mapa.getLayers(); var length = layers.getLength(); for (var i = 0; i < length; i++) { var layer = layers.item(i); } storeV.add ({ nombreCapa: nombreCapa , idCapa: idCapa, capa: layer }); }else{ capa.setVisible(false); storeV.removeAt(storeV.find('idCapa', idCapa)) } capaActiva = capaBuscar; }, organizarCapas: function(){ var cmp = Ext.getCmp('gridPanelVisual'); cmp.view.on('beforedrop', function(node, data, overModel, dropPosition, dropHandlers) { var layers = mapa.getLayers(); var length = layers.getLength(); for (var i = 0; i< length; i++) { var layer = layers.item(i); } }); cmp.view.on('drop', function( node, data, overModel, dropPosition, eOpts ) { actualizarPosiciones(); }); } }); function obtenerPosiciones(){ var ps = new Array(); var storeV = Ext.getStore('visualizacion'); var storeLength = storeV.data.items.length-1; for (var i = storeLength; i>=0; i--) { var item = new Object(); var layer = storeV.data.items.data.capa; item.index = i; item.layer = layer; ps.push(item); } return ps; } function actualizarPosiciones(){ var posicionesNuevas = obtenerPosiciones(); for (var i= 0; i < posicionesNuevas.length; i++) { var itemNue = posicionesNuevas; mapa.getLayers().setAt(i, itemNue.capa) } } When I execute the method setAt() of the actualizarPosiciones Function i obtain error:
Why this error?
أكثر...
I have this code:
The view:
... var storeV = Ext.getStore('visualizacion'); var grid = Ext.create('Ext.grid.Panel', { id: 'gridPanelVisual', viewConfig: { plugins: [ Ext.create('Ext.grid.plugin.DragDrop',{ dragText: 'Arrastre y suelte para reorganizar'} )] }, store: storeV, columns: [ { width: '100%', sortable: false, hideable: false, dataIndex: 'nombreCapa' } ] }); ... 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 }, '#campoBusquedaCapa':{ keyup: this.buscarCapa }, '#gridPanelVisual':{ afterrender: this.organizarCapas } }); }, 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'); if(checked != false){ capa.setVisible(true); var layers = mapa.getLayers(); var length = layers.getLength(); for (var i = 0; i < length; i++) { var layer = layers.item(i); } storeV.add ({ nombreCapa: nombreCapa , idCapa: idCapa, capa: layer }); }else{ capa.setVisible(false); storeV.removeAt(storeV.find('idCapa', idCapa)) } capaActiva = capaBuscar; }, organizarCapas: function(){ var cmp = Ext.getCmp('gridPanelVisual'); cmp.view.on('beforedrop', function(node, data, overModel, dropPosition, dropHandlers) { var layers = mapa.getLayers(); var length = layers.getLength(); for (var i = 0; i< length; i++) { var layer = layers.item(i); } }); cmp.view.on('drop', function( node, data, overModel, dropPosition, eOpts ) { actualizarPosiciones(); }); } }); function obtenerPosiciones(){ var ps = new Array(); var storeV = Ext.getStore('visualizacion'); var storeLength = storeV.data.items.length-1; for (var i = storeLength; i>=0; i--) { var item = new Object(); var layer = storeV.data.items.data.capa; item.index = i; item.layer = layer; ps.push(item); } return ps; } function actualizarPosiciones(){ var posicionesNuevas = obtenerPosiciones(); for (var i= 0; i < posicionesNuevas.length; i++) { var itemNue = posicionesNuevas; mapa.getLayers().setAt(i, itemNue.capa) } } When I execute the method setAt() of the actualizarPosiciones Function i obtain error:
Why this error?
أكثر...