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