1 /** 2 * @fileOverview 3 * Copyright (c) 2013 Regione Autonoma della Sardegna 4 * Published under the GPL license.<br> 5 * See <a href="https://sardegnageoportale.it/webgis/license.txt">https://sardegnageoportale.it/webgis/license.txt</a> 6 * for the full text of the license. 7 * @version 0.1 8 */ 9 10 /** 11 * @namespace framework.plugins 12 */ 13 Ext.namespace("framework.form"); 14 15 /** 16 * Combo to select the active layer of the map. 17 * This implementation, by default, place a comboBox on the center of the map. 18 * The component shoult be put inside a panel to customize position inside the map. 19 * @name_ LayersComboBox 20 * @class Creates a Combo to select the active layer of the map. 21 * @constructor 22 @extends <a target="_blank" href="http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.form.ComboBox">Ext.form.ComboBox</a> 23 */ 24 framework.form.LayersComboBox = Ext.extend(Ext.form.ComboBox, 25 /** 26 * @lends framework.form.LayersComboBox.prototype 27 */ 28 { 29 30 /** private: property[groupName] 31 * group name filter, 32 * @public 33 * @type String 34 */ 35 groupName: null, 36 37 /** private: property[layers] 38 * layers object that populate the comboBox , 39 * @public 40 * @type [object] array of layers 41 */ 42 layers: null, 43 44 /** private: property[order] 45 * Groups order on comboBox, 46 * @public 47 * @type [String] 48 */ 49 order: null, 50 51 /** private: property[tpl] 52 * template result search. 53 * @private 54 * @type Ext.XTemplate 55 */ 56 tpl: new Ext.XTemplate( 57 '<ul><tpl for=".">', 58 '<tpl if="this.group != values.group">', 59 '<tpl exec="this.group = values.group"></tpl>', 60 '<li><b>{group}</b><li>', 61 '</tpl>', 62 '<li class="x-combo-list-item" role="None">{name}</li>', 63 '</tpl></ul>' 64 ), 65 66 /** 67 * Selects a layer and activates it on the map 68 * @public 69 * @param {String} name name of the layer to select 70 * @param {String} background background color to apply (if it's undefined service's background color 71 * or default will be used) 72 * @param {bpolean} focusSelected if true, the change will be propagated to the combobox, 73 * so layer name will be shown on the component. This parameter should be false only in 74 * module initialization 75 */ 76 selectLayer: function(name, focusSelected, background) { 77 var layer = this.map.getLayersByName(name); 78 if(layer && layer.length > 0){ 79 this.map.setOptions(layer[0].map.options); 80 this.map.setBaseLayer(layer[0]); 81 82 if (layer[0].backgroundColor!==null) 83 { 84 this.map.viewPortDiv.style.backgroundColor = layer[0].backgroundColor; 85 } 86 87 for (i=0;i<this.map.layers.length;i++) { 88 if(!this.map.layers[i].isBaseLayer && this.map.layers[i].visibility 89 && this.map.layers[i].CLASS_NAME === "OpenLayers.Layer.TMS") { 90 this.map.layers[i].setVisibility(false); 91 } 92 } 93 if(this.activeLayer){ 94 if(this.activeLayer instanceof String){ 95 this.activeLayer = this.map.getLayersByName(this.activeLayer); 96 } 97 this.activeLayer[0].setVisibility(false); 98 } 99 this.activeLayer = layer; 100 layer[0].setVisibility(true); 101 var container = Ext.get(this.map.getViewport()); 102 if (Ext.isDefined(background) && background !== null) { 103 container.setStyle('background-color', background); 104 } else { 105 if (this.activeLayer[0].background) 106 container.setStyle('background-color', this.activeLayer[0].background); 107 else 108 container.setStyle('background-color', "FFFFFF"); 109 } 110 if (focusSelected) { 111 this.setValue(name); 112 } 113 this.fireEvent('layerSelected', layer); 114 } 115 }, 116 117 /** 118 * Override init component 119 * @private 120 */ 121 initComponent: function() { 122 123 if(!this.map){ 124 var mapPanel = this.findParentBy(function(cmp) { 125 return cmp instanceof GeoExt.MapPanel; 126 }); 127 this.map = mapPanel.map; 128 } 129 130 if(!this.store){ 131 this.store = new Ext.data.ArrayStore({ 132 fields: ['name', 'title','selected','group'], 133 data: this.getData() 134 }); 135 } 136 137 var groupField = this.groupField || "group"; 138 var groupDisplayField = this.groupDisplayField || groupField, 139 displayField = this.displayField || "name"; 140 var self = this; 141 this.on({ 142 select: function(combo, record, index){ 143 self.selectLayer(record.data.title, false); 144 },scope: this 145 }); 146 147 return framework.form.LayersComboBox.superclass.initComponent.apply(this, arguments); 148 }, 149 150 /** 151 * Create data array for the store 152 * @private 153 */ 154 getData: function() { 155 var data ={}; 156 var elem; 157 for(var index in this.layers){ 158 elem = this.layers[index]; 159 if(elem.group == this.groupName){ 160 if(elem.visibility == true){ 161 this.value = elem.name; 162 this.activeLayer = new String(elem.title); 163 } 164 if(!data[elem.subGroup]){ 165 data[elem.subGroup]= []; 166 } 167 data[elem.subGroup].push([elem.name, elem.title,elem.selected,elem.subGroup]); 168 } 169 } 170 var arrayData =[]; 171 //insert elem by given order 172 if(this.order){ 173 for(var index=0;index<this.order.length;index++){ 174 elem = this.order[index]; 175 arrayData = arrayData.concat(data[elem]); 176 } 177 }else{ 178 //insert elem by natural order 179 for(var index in data){ 180 elem = data[index]; 181 arrayData.concat(data[elem]); 182 } 183 } 184 return arrayData; 185 } 186 187 188 189 }); 190 191 /** api: xtype = framework_layerscombobox */ 192 Ext.reg("framework_layerscombobox", framework.form.LayersComboBox); 193