|
| 1 | +/** |
| 2 | + * Copyright (c) 2008-2010 The Open Source Geospatial Foundation |
| 3 | + * |
| 4 | + * Published under the BSD license. |
| 5 | + * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text |
| 6 | + * of the license. |
| 7 | + */ |
| 8 | + |
| 9 | +Ext.namespace("GeoExt.ux"); |
| 10 | + |
| 11 | +/** api: (define) |
| 12 | + * module = GeoExt.ux |
| 13 | + * class = FeatureBrowser |
| 14 | + * base_link = `Ext.Panel <http://dev.sencha.com/deploy/dev/docs/?class=Ext.Panel>`_ |
| 15 | + */ |
| 16 | + |
| 17 | +/** api: constructor |
| 18 | + * .. class:: FeatureBrowser(config) |
| 19 | + * |
| 20 | + * Creates a Panel to browse in a features list, |
| 21 | + * show attributes for each using templates. |
| 22 | + */ |
| 23 | +GeoExt.ux.FeatureBrowser = Ext.extend(Ext.Panel, { |
| 24 | + |
| 25 | + /* begin i18n */ |
| 26 | + /** api: config[counterText] |
| 27 | + * ``String`` i18n, The counter message to display (defaults to "{0} of |
| 28 | + * {1}). Note that this string is formatted using {0} as a token for index |
| 29 | + * and {1} as a token for total. These tokens should be preserved when |
| 30 | + * overriding this string if showing those values is desired. |
| 31 | + */ |
| 32 | + counterText: "{0} of {1} features", |
| 33 | + |
| 34 | + /** api: config[elseTpl] |
| 35 | + * ``Ext.Template`` | ``Ext.XTemplate`` Ext.Template or Ext.XTemplate |
| 36 | + * to be used for features which don't match any of the tpl keys. |
| 37 | + * Will be taken into account only if tpl is an Object. Optional. |
| 38 | + */ |
| 39 | + elseTpl: null, |
| 40 | + |
| 41 | + /** api: config[tpl] |
| 42 | + * ``Ext.Template`` | ``Ext.XTemplate`` | ``Object`` | ``Function`` |
| 43 | + * Ext.Template or Ext.XTemplate to be applied for each feature with |
| 44 | + * feature.attributes as context. If provided as an Object, each key |
| 45 | + * may correspond to the value for the tplFeatureAttribute key in the |
| 46 | + * feature attributes. The corresponding value has to be a valid template. |
| 47 | + * Optional. |
| 48 | + */ |
| 49 | + tpl: undefined, |
| 50 | + |
| 51 | + /** api: config[tplFeatureAttribute] |
| 52 | + * ``String`` | ``Number`` |
| 53 | + * The attribute which value is to be compared with one of the tpl members |
| 54 | + * when provided as an Object. Mandatory is tpl is a Object. Optional. |
| 55 | + */ |
| 56 | + tplFeatureAttribute: null, |
| 57 | + |
| 58 | + /** api: config[skippedFeatureAttributes] |
| 59 | + * ``Array(String)`` |
| 60 | + * Specifies the feature attributes to skip in the default Ext.Template |
| 61 | + * created by this component. Only applies when the ``tpl`` option is |
| 62 | + * not set. Optional. |
| 63 | + */ |
| 64 | + skippedFeatureAttributes: null, |
| 65 | + |
| 66 | + /** api: config[features] |
| 67 | + * ``Array`` Array of ``OpenLayers.Feature.Vector`` to build the |
| 68 | + * FeatureBrowser with. Required. |
| 69 | + */ |
| 70 | + features: null, |
| 71 | + |
| 72 | + /** private: method[initComponent] |
| 73 | + */ |
| 74 | + initComponent: function() { |
| 75 | + |
| 76 | + this.layout = "card"; |
| 77 | + |
| 78 | + var nbFeatures = this.features.length; |
| 79 | + |
| 80 | + this.items = []; |
| 81 | + var feature, tpl; |
| 82 | + for (var i = 0; i < nbFeatures; i++) { |
| 83 | + feature = this.features[i]; |
| 84 | + tpl = this.getTemplateForFeature(feature); |
| 85 | + |
| 86 | + this.items.push(new Ext.BoxComponent({ |
| 87 | + id: 'card-'+ this.id + i, |
| 88 | + html: tpl.apply(feature.attributes) |
| 89 | + })); |
| 90 | + } |
| 91 | + |
| 92 | + if (nbFeatures > 1) { |
| 93 | + this.bbar = [ |
| 94 | + {xtype: 'tbtext', id: 'counter-' + this.id}, |
| 95 | + '->', |
| 96 | + { |
| 97 | + id: 'move-prev' + this.id, |
| 98 | + iconCls: "x-tbar-page-prev", |
| 99 | + handler: this.navHandler.createDelegate(this, |
| 100 | + [-1, nbFeatures, this.features]), |
| 101 | + disabled: true, |
| 102 | + listeners: { |
| 103 | + click: function(button, e) { |
| 104 | + e.stopEvent(); |
| 105 | + } |
| 106 | + } |
| 107 | + }, |
| 108 | + { |
| 109 | + id: 'move-next' + this.id, |
| 110 | + iconCls: "x-tbar-page-next", |
| 111 | + handler: this.navHandler.createDelegate(this, |
| 112 | + [1, nbFeatures, this.features]), |
| 113 | + listeners: { |
| 114 | + click: function(button, e) { |
| 115 | + e.stopEvent(); |
| 116 | + } |
| 117 | + } |
| 118 | + } |
| 119 | + ]; |
| 120 | + } |
| 121 | + this.activeItem = 0; |
| 122 | + |
| 123 | + GeoExt.ux.FeatureBrowser.superclass.initComponent.apply(this, arguments); |
| 124 | + |
| 125 | + // add custom events |
| 126 | + this.addEvents( |
| 127 | + |
| 128 | + /** api: events[featureselected] |
| 129 | + * Fires when a feature is displayed in the FeatureBrowser. |
| 130 | + * Application may use this to highlight it on the map, for |
| 131 | + * example. |
| 132 | + * |
| 133 | + * Listener arguments: |
| 134 | + * * panel - :class:`GeoExt.ux.FeatureBrowser` This panel. |
| 135 | + * * feature - ``OpenLayers.Feature.Vector`` The selected feature |
| 136 | + */ |
| 137 | + 'featureselected' |
| 138 | + ); |
| 139 | + this.fireEvent('featureselected', this, this.features[0]); |
| 140 | + |
| 141 | + var counter = Ext.getCmp('counter-' + this.id); |
| 142 | + counter && counter.setText( |
| 143 | + String.format(this.counterText, 1, nbFeatures) |
| 144 | + ); |
| 145 | + }, |
| 146 | + |
| 147 | + /** private: method[navHandler] |
| 148 | + * The navigation handler method. Called when navigation buttons |
| 149 | + * (next or previous) are clicked |
| 150 | + */ |
| 151 | + navHandler: function(direction, total, features) { |
| 152 | + var lay = this.getLayout(); |
| 153 | + var i = lay.activeItem.id.split('card-' + this.id)[1]; |
| 154 | + var next = parseInt(i, 10) + direction; |
| 155 | + lay.setActiveItem(next); |
| 156 | + this.fireEvent('featureselected', this, features[next]); |
| 157 | + Ext.getCmp('move-prev' + this.id).setDisabled(next === 0); |
| 158 | + Ext.getCmp('move-next' + this.id).setDisabled(next == total - 1); |
| 159 | + |
| 160 | + var counter = Ext.getCmp('counter-' + this.id); |
| 161 | + counter && counter.setText( |
| 162 | + String.format(this.counterText, next + 1, total) |
| 163 | + ); |
| 164 | + }, |
| 165 | + |
| 166 | + /** private: method[getTemplateForFeature] |
| 167 | + * Returns a template for the given feature. |
| 168 | + * |
| 169 | + * :param feature: ``OpenLayers.Feature.Vector`` The feature to create |
| 170 | + * a template with. |
| 171 | + * |
| 172 | + * :return: ``Ext.Template`` | ``Ext.XTemplate`` The created template. |
| 173 | + */ |
| 174 | + getTemplateForFeature: function(feature) { |
| 175 | + var tpl, |
| 176 | + attributes = feature.attributes; |
| 177 | + |
| 178 | + if (this.tpl instanceof Ext.Template) { |
| 179 | + tpl = this.tpl; |
| 180 | + } else if (typeof this.tpl === 'object') { |
| 181 | + tpl = this.tpl[attributes[this.tplFeatureAttribute]] || |
| 182 | + this.elseTpl; |
| 183 | + } else if (typeof this.tpl === 'function') { |
| 184 | + // currently unsupported |
| 185 | + } |
| 186 | + |
| 187 | + // create a default template with key/value pairs |
| 188 | + if (!tpl) { |
| 189 | + var templateString = ''; |
| 190 | + for (var k in attributes) { |
| 191 | + if (attributes.hasOwnProperty(k) && |
| 192 | + (this.skippedFeatureAttributes == null || |
| 193 | + this.skippedFeatureAttributes.indexOf(k) === -1)) { |
| 194 | + |
| 195 | + templateString += '<div>' + |
| 196 | + '<b>' + k + ': </b>' + |
| 197 | + '{' + k + '}' + |
| 198 | + '</div>'; |
| 199 | + } |
| 200 | + } |
| 201 | + tpl = new Ext.Template(templateString); |
| 202 | + } |
| 203 | + |
| 204 | + return tpl; |
| 205 | + } |
| 206 | +}); |
0 commit comments