[Commits] r2867 - in extensions/geoext.ux: tests ux ux/FeatureSelectionModel ux/FeatureSelectionModel/examples ux/FeatureSelectionModel/lib ux/FeatureSelectionModel/lib/GeoExt.ux ux/FeatureSelectionModel/tests ux/FeatureSelectionModel/tests/lib ux/FeatureSelectionModel/tests/lib/GeoExt.ux
commits at geoext.org
commits at geoext.org
Thu Nov 10 11:59:21 CET 2011
Author: ahocevar
Date: 2011-11-10 11:59:21 +0100 (Thu, 10 Nov 2011)
New Revision: 2867
Added:
extensions/geoext.ux/ux/FeatureSelectionModel/
extensions/geoext.ux/ux/FeatureSelectionModel/examples/
extensions/geoext.ux/ux/FeatureSelectionModel/examples/example-hover-feature-grid.html
extensions/geoext.ux/ux/FeatureSelectionModel/examples/summits.json
extensions/geoext.ux/ux/FeatureSelectionModel/lib/
extensions/geoext.ux/ux/FeatureSelectionModel/lib/GeoExt.ux/
extensions/geoext.ux/ux/FeatureSelectionModel/lib/GeoExt.ux/Ext.ux.grid.GridMouseEvents.js
extensions/geoext.ux/ux/FeatureSelectionModel/lib/GeoExt.ux/GeoExt.ux.FeatureSelectionModel.js
extensions/geoext.ux/ux/FeatureSelectionModel/tests/
extensions/geoext.ux/ux/FeatureSelectionModel/tests/lib/
extensions/geoext.ux/ux/FeatureSelectionModel/tests/lib/GeoExt.ux/
extensions/geoext.ux/ux/FeatureSelectionModel/tests/lib/GeoExt.ux/FeatureSelectionModel.html
Modified:
extensions/geoext.ux/tests/list-tests.html
Log:
new FeatureSelectionModel ux for grid selection of hovered features. Maintained by chrismayer. (closes #387)
Modified: extensions/geoext.ux/tests/list-tests.html
===================================================================
--- extensions/geoext.ux/tests/list-tests.html 2011-11-03 14:48:11 UTC (rev 2866)
+++ extensions/geoext.ux/tests/list-tests.html 2011-11-10 10:59:21 UTC (rev 2867)
@@ -7,4 +7,5 @@
<li>../../geoext.ux/ux/Measure/tests/lib/GeoExt.ux/MeasureLength.html</li>
<li>../../geoext.ux/ux/FeatureEditing/tests/lib/GeoExt.ux/FeatureEditorGrid.html</li>
<li>../../geoext.ux/ux/FeatureBrowser/tests/lib/GeoExt.ux/FeatureBrowser.html</li>
+ <li>../../geoext.ux/ux/FeatureSelectionModel/tests/lib/GeoExt.ux/FeatureSelectionModel.html</li>
</ul>
Added: extensions/geoext.ux/ux/FeatureSelectionModel/examples/example-hover-feature-grid.html
===================================================================
--- extensions/geoext.ux/ux/FeatureSelectionModel/examples/example-hover-feature-grid.html (rev 0)
+++ extensions/geoext.ux/ux/FeatureSelectionModel/examples/example-hover-feature-grid.html 2011-11-10 10:59:21 UTC (rev 2867)
@@ -0,0 +1,170 @@
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>terrestris FeatureSelectionModel in Action</title>
+
+ <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.0/resources/css/ext-all.css" />
+ <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.0/examples/shared/examples.css" />
+ <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/adapter/ext/ext-base.js"></script>
+ <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/ext-all-debug.js"></script>
+ <script type="text/javascript" src="http://www.openlayers.org/api/2.10/OpenLayers.js"></script>
+ <script type="text/javascript" src="http://dev.geoext.org/ux/geoext/lib/GeoExt.js"></script>
+
+ <script type="text/javascript" src="../lib/GeoExt.ux/Ext.ux.grid.GridMouseEvents.js"></script>
+ <script type="text/javascript" src="../lib/GeoExt.ux/GeoExt.ux.FeatureSelectionModel.js"></script>
+
+
+ <script type="text/javascript">
+ /**
+ * Copyright (c) 2010 terrestris GmbH & Co KG
+ *
+ * Published under the BSD license.
+ * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text
+ * of the license.
+ */
+
+ /**
+ * Copyright (c) 2008-2010 The Open Source Geospatial Foundation
+ *
+ * Published under the BSD license.
+ * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text
+ * of the license.
+ */
+
+ /** api: example[feature-grid]
+ * Grid with Features
+ * ------------------
+ * Synchronize selection of features between a grid and a layer.
+ */
+ var mapPanel, store, gridPanel, mainPanel;
+
+ Ext.onReady(function(){
+ // create map instance
+ var map = new OpenLayers.Map();
+ var wmsLayer = new OpenLayers.Layer.WMS("vmap0", "http://vmap0.tiles.osgeo.org/wms/vmap0", {
+ layers: 'basic'
+ });
+
+ // create styles for points
+ var pointStyles = new OpenLayers.StyleMap({
+ "default": OpenLayers.Util.applyDefaults({
+ fillColor: 'green',
+ fillOpacity: 1.0,
+ strokeColor: 'black',
+ strokeOpacity: 1.0
+ }, OpenLayers.Feature.Vector.style["default"]),
+ "hover": OpenLayers.Util.applyDefaults({
+ fillColor: 'red',
+ fillOpacity: 1.0,
+ strokeColor: 'black',
+ strokeOpacity: 1.0
+ }, OpenLayers.Feature.Vector.style.temporary),
+ "select": OpenLayers.Util.applyDefaults({
+ fillColor: 'blue',
+ fillOpacity: 1.0,
+ strokeColor: 'black',
+ strokeOpacity: 1.0
+ }, OpenLayers.Feature.Vector.style.select)
+ });
+
+ // create vector layer
+ var vecLayer = new OpenLayers.Layer.Vector("vector", {styleMap: pointStyles});
+ map.addLayers([wmsLayer, vecLayer]);
+
+ // create map panel
+ mapPanel = new GeoExt.MapPanel({
+ title: "Map",
+ region: "center",
+ height: 400,
+ width: 600,
+ map: map,
+ center: new OpenLayers.LonLat(5, 45),
+ zoom: 6
+ });
+
+ // create feature store, binding it to the vector layer
+ store = new GeoExt.data.FeatureStore({
+ layer: vecLayer,
+ fields: [{
+ name: 'name',
+ type: 'string'
+ }, {
+ name: 'elevation',
+ type: 'float'
+ }],
+ proxy: new GeoExt.data.ProtocolProxy({
+ protocol: new OpenLayers.Protocol.HTTP({
+ url: "summits.json",
+ format: new OpenLayers.Format.GeoJSON()
+ })
+ }),
+ autoLoad: true
+ });
+
+ // control for hovering
+ hoverControl = new OpenLayers.Control.SelectFeature(vecLayer, {
+ hover: true,
+ highlightOnly: true,
+ renderIntent: 'hover',
+ multiple: true,
+ allowSelection: false
+ });
+ map.addControl(hoverControl);
+ hoverControl.activate();
+
+ selectControl = new OpenLayers.Control.SelectFeature(vecLayer, {
+ hover: false,
+ multiple: false
+ });
+ map.addControl(selectControl);
+ selectControl.activate();
+
+ // create grid panel configured with feature store
+ gridPanel = new Ext.grid.GridPanel({
+ title: "Feature Grid",
+ region: "east",
+ store: store,
+ width: 320,
+ columns: [{
+ header: "Name",
+ width: 200,
+ dataIndex: "name"
+ }, {
+ header: "Elevation",
+ width: 100,
+ dataIndex: "elevation"
+ }],
+ sm: new GeoExt.ux.FeatureSelectionModel({selectControl: selectControl, hoverControl: hoverControl, controlMode: 'both'}),
+ plugins: [Ext.ux.grid.GridMouseEvents]
+ });
+
+ // create a panel and add the map panel and grid panel
+ // inside it
+ mainPanel = new Ext.Panel({
+ renderTo: "mainpanel",
+ layout: "border",
+ height: 400,
+ width: 920,
+ items: [mapPanel, gridPanel]
+ });
+ });
+
+
+ </script>
+
+ </head>
+ <body>
+ <h1>Grid Panel configured with a hover and a select control with an extended FeatureSelectionModel</h1>
+
+ <p>This example shows an Ext grid allowing hovering and selection functionality</p>
+
+ <p>
+ A an extended GeoExt feature selection model is used to select and hover rows in
+ the grid by selecting and hovering features in the layer, and vice-versa.
+ </p>
+
+ <p>See <a href="../lib/GeoExt.ux/GeoExt.ux.FeatureSelectionModel.js">GeoExt.ux.FeatureSelectionModel.js</a>.</p>
+
+ <div id="mainpanel"></div>
+ </body>
+</html>
\ No newline at end of file
Added: extensions/geoext.ux/ux/FeatureSelectionModel/examples/summits.json
===================================================================
--- extensions/geoext.ux/ux/FeatureSelectionModel/examples/summits.json (rev 0)
+++ extensions/geoext.ux/ux/FeatureSelectionModel/examples/summits.json 2011-11-10 10:59:21 UTC (rev 2867)
@@ -0,0 +1,114 @@
+{
+ "type": "FeatureCollection",
+ "features": [{
+ "geometry": {
+ "type": "Point",
+ "coordinates": [6.18218, 45.5949]
+ },
+ "type": "Feature",
+ "properties": {
+ "elevation": 1770,
+ "name": "Col d'Arclusaz"
+ },
+ "id": 472
+ }, {
+ "geometry": {
+ "type": "Point",
+ "coordinates": [6.27827, 45.6769]
+ },
+ "type": "Feature",
+ "properties": {
+ "elevation": 1831,
+ "name": "Pointe de C\u00f4te Favre"
+ },
+ "id": 458
+ }, {
+ "geometry": {
+ "type": "Point",
+ "coordinates": [6.47122, 46.0062]
+ },
+ "type": "Feature",
+ "properties": {
+ "elevation": 2364,
+ "name": "Pointe du Midi"
+ },
+ "id": 487
+ }, {
+ "geometry": {
+ "type": "Point",
+ "coordinates": [6.82156068193, 46.3129835428]
+ },
+ "type": "Feature",
+ "properties": {
+ "elevation": 1856,
+ "name": "Col d'Outanne"
+ },
+ "id": 5700
+ }, {
+ "geometry": {
+ "type": "Point",
+ "coordinates": [6.84989241629, 46.136626095]
+ },
+ "type": "Feature",
+ "properties": {
+ "elevation": 2375,
+ "name": "Col de Comba Mornay"
+ },
+ "id": 5644
+ }, {
+ "geometry": {
+ "type": "Point",
+ "coordinates": [6.62, 46.187778]
+ },
+ "type": "Feature",
+ "properties": {
+ "elevation": 2000,
+ "name": "La Pointe"
+ },
+ "id": 5710
+ }, {
+ "geometry": {
+ "type": "Point",
+ "coordinates": [5.9134, 44.93331]
+ },
+ "type": "Feature",
+ "properties": {
+ "elevation": 2607,
+ "name": "Le Coiro"
+ },
+ "id": 496
+ }, {
+ "geometry": {
+ "type": "Point",
+ "coordinates": [6.03219, 45.7204]
+ },
+ "type": "Feature",
+ "properties": {
+ "elevation": 1451,
+ "name": "D\u00f4me de la Cochette"
+ },
+ "id": 322
+ }, {
+ "geometry": {
+ "type": "Point",
+ "coordinates": [6.23048, 45.6324]
+ },
+ "type": "Feature",
+ "properties": {
+ "elevation": 2197,
+ "name": "Mont P\u00e9cloz"
+ },
+ "id": 515
+ }, {
+ "geometry": {
+ "type": "Point",
+ "coordinates": [6.1962, 45.6927]
+ },
+ "type": "Feature",
+ "properties": {
+ "elevation": 2181,
+ "name": "Tr\u00e9lod"
+ },
+ "id": 601
+ }]
+}
Added: extensions/geoext.ux/ux/FeatureSelectionModel/lib/GeoExt.ux/Ext.ux.grid.GridMouseEvents.js
===================================================================
--- extensions/geoext.ux/ux/FeatureSelectionModel/lib/GeoExt.ux/Ext.ux.grid.GridMouseEvents.js (rev 0)
+++ extensions/geoext.ux/ux/FeatureSelectionModel/lib/GeoExt.ux/Ext.ux.grid.GridMouseEvents.js 2011-11-10 10:59:21 UTC (rev 2867)
@@ -0,0 +1,61 @@
+Ext.ns("Ext.ux.grid");
+Ext.ux.grid.GridMouseEvents = (function() {
+
+ function onMouseOver(e) {
+ processMouseOver.call(this, 'mouseenter', e);
+ }
+
+ function onMouseOut(e) {
+ processMouseOver.call(this, 'mouseleave', e);
+ }
+
+ function processMouseOver(name, e){
+ var t = e.getTarget(),
+ r = e.getRelatedTarget(),
+ v = this.view,
+ header = v.findHeaderIndex(t),
+ hdEl, row, rowEl, cell, fromCell, col;
+ if(header !== false){
+ hdEl = Ext.get(v.getHeaderCell(header));
+ if (!((hdEl.dom === r) || hdEl.contains(r))) {
+ this.fireEvent('header' + name, this, header, e, hdEl);
+ }
+ }else{
+ row = v.findRowIndex(t);
+ if(row !== false) {
+ rowEl = Ext.get(v.getRow(row));
+ if (!((rowEl.dom === r) || rowEl.contains(r))) {
+ this.fireEvent('row' + name, this, row, e, rowEl);
+ }
+ cell = v.findCellIndex(t);
+ if(cell !== false){
+ cellEl = Ext.get(v.getCell(row, cell));
+ if (!((cellEl.dom === r) || cellEl.contains(r))){
+ this.fireEvent('cell' + name, this, row, cell, e, cellEl);
+ }
+ if (cell != v.findCellIndex(r)) {
+ col = this.colModel.getColumnAt(cell);
+ if (col.processEvent) {
+ col.processEvent(name, e, this, row, cell);
+ }
+ this.fireEvent('column' + name, this, cell, e);
+ }
+ }
+ }
+ }
+ }
+
+ function onGridRender() {
+ this.mon(this.getGridEl(), {
+ scope: this,
+ mouseover: onMouseOver,
+ mouseout: onMouseOut
+ });
+ }
+
+ return {
+ init: function(g) {
+ g.onRender = g.onRender.createSequence(onGridRender);
+ }
+ };
+})();
\ No newline at end of file
Added: extensions/geoext.ux/ux/FeatureSelectionModel/lib/GeoExt.ux/GeoExt.ux.FeatureSelectionModel.js
===================================================================
--- extensions/geoext.ux/ux/FeatureSelectionModel/lib/GeoExt.ux/GeoExt.ux.FeatureSelectionModel.js (rev 0)
+++ extensions/geoext.ux/ux/FeatureSelectionModel/lib/GeoExt.ux/GeoExt.ux.FeatureSelectionModel.js 2011-11-10 10:59:21 UTC (rev 2867)
@@ -0,0 +1,266 @@
+/**
+ * Copyright (c) 2008-2010 The Open Source Geospatial Foundation
+ *
+ * Published under the BSD license.
+ * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text
+ * of the license.
+ */
+
+/** api: example[FeatureSelectionModel]
+ * Feature Selection Model
+ * ---------------------
+ * A row selection model which enables automatic selection and hovering
+ * of features in the map when rows are selected or hovered in the grid
+ * and vice-versa.
+ */
+
+
+Ext.ns('GeoExt.ux');
+
+/** api: constructor
+ * .. class:: FeatureSelectionModel
+ *
+ * A row selection model which enables automatic selection and hovering
+ * of features in the map when rows are selected or hovered in the grid
+ * and vice-versa.
+ */
+GeoExt.ux.FeatureSelectionModel = Ext.extend(GeoExt.grid.FeatureSelectionModel, {
+ hoverControl: null,
+ boundHover: false,
+ controlMode: 'select',
+ initComponent: function(){
+ var config = {
+ id: 'terrestris_featselmod'
+ };
+
+ Ext.apply(this, Ext.apply(this.initialConfig, config));
+
+ Terrestris.FeatureSelectionModel.superclass.initComponent.apply(this, arguments);
+ },
+ /** private */
+ constructor: function(config){
+ config = config || {};
+ if (config.selectControl instanceof OpenLayers.Control.SelectFeature) {
+ if (!config.singleSelect) {
+ var ctrl = config.selectControl;
+ config.singleSelect = !(ctrl.multiple || !!ctrl.multipleKey);
+ }
+ }
+ else
+ if (config.layer instanceof OpenLayers.Layer.Vector) {
+ this.selectControl = this.createSelectControl(config.layer, config.selectControl);
+ delete config.layer;
+ delete config.selectControl;
+ }
+
+ if (config.hoverControl instanceof OpenLayers.Control.SelectFeature) {
+ if (!config.singleSelect) {
+ var ctrl = config.hoverControl;
+ config.singleSelect = !(ctrl.multiple || !!ctrl.multipleKey);
+ }
+ }
+ else
+ if (config.layer instanceof OpenLayers.Layer.Vector) {
+ this.hoverControl = this.createHoverControl(config.layer, config.hoverControl);
+ delete config.layer;
+ delete config.hoverControl;
+ }
+ this.superclass = arguments.callee.superclass;
+ this.superclass.constructor.call(this, config);
+ },
+
+ /** private: method[initEvents]
+ *
+ * Called after this.grid is defined
+ */
+ initEvents: function(){
+ this.superclass.initEvents.call(this);
+ if (this.layerFromStore) {
+ var layer = this.grid.getStore() && this.grid.getStore().layer;
+ if (layer &&
+ !(this.selectControl instanceof OpenLayers.Control.SelectFeature)) {
+ this.selectControl = this.createSelectControl(layer, this.selectControl);
+ }
+ if (layer &&
+ !(this.hoverControl instanceof OpenLayers.Control.SelectFeature)) {
+ this.hoverControl = this.createHoverControl(layer, this.hoverControl);
+ }
+ }
+ if (this.controlMode === 'select' || this.controlMode === 'both') {
+ if (this.selectControl) {
+ this.bind(this.selectControl);
+ }
+ }
+ if (this.controlMode === 'hover' || this.controlMode === 'both') {
+ if (this.hoverControl) {
+ this.bindHover(this.hoverControl);
+ }
+ }
+
+ },
+
+ /** private: createHoverControl
+ * :param layer: ``OpenLayers.Layer.Vector`` The vector layer.
+ * :param config: ``Object`` The select feature control config.
+ *
+ * Create the select feature control for hovering.
+ */
+ createHoverControl: function(layer, config){
+ config = config || {};
+ var singleSelect = config.singleSelect !== undefined ? config.singleSelect : this.singleSelect;
+ config = OpenLayers.Util.extend({
+ toggle: true,
+ multipleKey: singleSelect ? null : (Ext.isMac ? "metaKey" : "ctrlKey"),
+ hover: true,
+ highlightOnly: true
+ }, config);
+ var hoverControl = new OpenLayers.Control.SelectFeature(layer, config);
+ layer.map.addControl(hoverControl);
+ return hoverControl;
+ },
+
+ /** api: method[bindHover]
+ *
+ * :param obj: ``OpenLayers.Layer.Vector`` or
+ * ``OpenLayers.Control.SelectFeature`` The object this selection model
+ * should be bound to, either a vector layer or a select feature
+ * control.
+ * :param options: ``Object`` An object with a "controlConfig"
+ * property referencing the configuration object to pass to the
+ * ``OpenLayers.Control.SelectFeature`` constructor.
+ * :return: ``OpenLayers.Control.SelectFeature`` The select feature
+ * control this selection model uses.
+ *
+ * Bind the hover model to a layer or a SelectFeature control (hover).
+ */
+ bindHover: function(obj, options){
+ if (!this.boundHover) {
+ options = options || {};
+ this.hoverControl = obj;
+ if (obj instanceof OpenLayers.Layer.Vector) {
+ this.hoverControl = this.createHoverControl(obj, options.controlConfig);
+ }
+ if (this.autoActivateControl) {
+ this.hoverControl.activate();
+ }
+ this.hoverControl.events.on({
+ featurehighlighted: this.featureHighlighted,
+ featureunhighlighted: this.featureUnhighlighted,
+ scope: this
+ });
+ this.grid.on("rowmouseenter", this.rowHighlighted, this);
+ this.grid.on("rowmouseleave", this.rowUnhighlighted, this);
+ this.boundHover = true;
+ }
+ return this.hoverControl;
+ },
+
+ /** api: method[unbindHover]
+ * :return: ``OpenLayers.Control.SelectFeature`` The hover feature
+ * control this hover model used.
+ *
+ * Unbind the selection model from the layer or SelectFeature control.
+ */
+ unbindHover: function(){
+ var hoverControl = this.hoverControl;
+ if (this.boundHover) {
+ var layers = this.getLayers();
+ for (var i = 0, len = layers.length; i < len; i++) {
+ layers[i].events.un({
+ featurehighlighted: this.featureHighlighted,
+ featureunhighlighted: this.featureUnhighlighted,
+ scope: this
+ });
+ }
+ this.un("rowmouseenter", this.rowHighlighted, this);
+ this.un("rowmouseleave", this.rowUnhighlighted, this);
+ if (this.autoActivateControl) {
+ hoverControl.deactivate();
+ }
+ this.hoverControl = null;
+ this.boundHover = false;
+ }
+ return hoverControl;
+ },
+
+ /** private: method[featureHighlighted]
+ * :param evt: ``Object`` An object with a feature property referencing
+ * the highlighted feature.
+ */
+ featureHighlighted: function(evt){
+
+ if (!this._selecting) {
+ var store = this.grid.store;
+ var row = store.findBy(function(record, id){
+ return record.getFeature() == evt.feature;
+ });
+ if (row != -1 && !this.isSelected(row)) {
+ this._selecting = true;
+ this.selectRow(row, !this.singleSelect);
+ this._selecting = false;
+ // focus the row in the grid to ensure it is visible
+ this.grid.getView().focusRow(row);
+ }
+ }
+ },
+
+ /** private: method[featureUnhighlighted]
+ * :param evt: ``Object`` An object with a feature property referencing
+ * the unhighlighted feature.
+ */
+ featureUnhighlighted: function(evt){
+
+ if (!this._selecting) {
+ var store = this.grid.store;
+ var row = store.findBy(function(record, id){
+ return record.getFeature() == evt.feature;
+ });
+ if (row != -1 && this.isSelected(row)) {
+ this._selecting = true;
+ this.deselectRow(row);
+ this._selecting = false;
+ this.grid.getView().focusRow(row);
+ }
+ }
+ },
+ /** private: method[rowHighlighted]
+ * :param grid: ``Ext.grid.GridPanel`` The bound grid with the features.
+ * :param row: ``Integer`` The row index.
+ */
+ rowHighlighted: function(grid, row){
+ var feature = grid.getStore().getAt(row).getFeature();
+ if (!this._selecting && feature) {
+ var layers = this.getLayers();
+ for (var i = 0, len = layers.length; i < len; i++) {
+ if (layers[i].selectedFeatures.indexOf(feature) == -1) {
+ this._selecting = true;
+ this.hoverControl.highlight(feature);
+ this._selecting = false;
+ break;
+ }
+ }
+ }
+ },
+
+ /** private: method[rowUnhighlighted]
+ * :param model: ``Ext.grid.GridPanel`` The bound grid with the features.
+ * :param row: ``Integer`` The row index.
+ */
+ rowUnhighlighted: function(grid, row){
+ var feature = grid.getStore().getAt(row).getFeature();
+ if (!this._selecting && feature) {
+ var layers = this.getLayers();
+ for (var i = 0, len = layers.length; i < len; i++) {
+ if (layers[i].selectedFeatures.indexOf(feature) == -1) {
+ this._selecting = true;
+ this.hoverControl.unhighlight(feature);
+ this._selecting = false;
+ break;
+ }
+ }
+ }
+ }
+
+});
+
+Ext.reg('gxux_featureselectionmodel', GeoExt.ux.FeatureSelectionModel);
\ No newline at end of file
Added: extensions/geoext.ux/ux/FeatureSelectionModel/tests/lib/GeoExt.ux/FeatureSelectionModel.html
===================================================================
--- extensions/geoext.ux/ux/FeatureSelectionModel/tests/lib/GeoExt.ux/FeatureSelectionModel.html (rev 0)
+++ extensions/geoext.ux/ux/FeatureSelectionModel/tests/lib/GeoExt.ux/FeatureSelectionModel.html 2011-11-10 10:59:21 UTC (rev 2867)
@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<html debug="true">
+ <head>
+ <script type="text/javascript" src="http://www.openlayers.org/api/2.10/OpenLayers.js">
+ </script>
+ <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/adapter/ext/ext-base.js">
+ </script>
+ <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/ext-all.js">
+ </script>
+ <script type="text/javascript" src="../../../../../../geoext/lib/GeoExt.js">
+ </script>
+ <script type="text/javascript" src="../../../lib/GeoExt.ux/Ext.ux.grid.GridMouseEvents.js">
+ </script>
+ <script type="text/javascript" src="../../../lib/GeoExt.ux/GeoExt.ux.FeatureSelectionModel.js">
+ </script>
+
+ <script type="text/javascript">
+ function test_ctor(t) {
+ t.plan(5);
+
+ // set up
+ var map, layer, feature, grid, store, selectControl;
+
+ map = new OpenLayers.Map("map", {allOverlays: true});
+
+ layer = new OpenLayers.Layer.Vector("vector");
+ map.addLayer(layer);
+
+ feature = new OpenLayers.Feature.Vector(
+ new OpenLayers.Geometry.Point(1, 2),
+ {foo: "foo", bar: "bar"}
+ );
+ layer.addFeatures(feature);
+
+ store = new GeoExt.data.FeatureStore({
+ layer: layer,
+ features: [feature]
+ });
+
+ selectControl = new OpenLayers.Control.SelectFeature(layer, {
+ hover: false,
+ multiple: false
+ });
+ map.addControl(selectControl);
+ selectControl.activate();
+
+ grid = new Ext.grid.GridPanel({
+ renderTo: "grid",
+ store: store,
+ columns: [{
+ header: "Name",
+ width: 200,
+ dataIndex: "name"
+ }, {
+ header: "Elevation",
+ width: 100,
+ dataIndex: "elevation"
+ }],
+ sm: new GeoExt.ux.FeatureSelectionModel(),
+ plugins: [Ext.ux.grid.GridMouseEvents]
+ });
+
+ // 5 tests
+
+ t.ok(grid instanceof Ext.grid.GridPanel,
+ "ctor creates a Ext.grid.GridPanel object");
+ t.ok(grid.getSelectionModel() instanceof GeoExt.ux.FeatureSelectionModel,
+ "grid's selection model is an instance of GeoExt.ux.FeatureSelectionModel");
+ t.ok(grid.getSelectionModel() instanceof GeoExt.grid.FeatureSelectionModel,
+ "grid's selection model is an instance of GeoExt.grid.FeatureSelectionModel");
+ t.ok(grid.getSelectionModel().bound,
+ "class binds a select control if standard constructor is used");
+ t.ok(!grid.getSelectionModel().boundHover,
+ "class binds no hover control if standard constructor is used");
+
+ grid.destroy();
+ }
+
+ function test_controls(t){
+ t.plan(12);
+
+ // set up
+ var map, layer, feature, grid, store, selectControl;
+
+ map = new OpenLayers.Map("map", {allOverlays: true});
+
+ layer = new OpenLayers.Layer.Vector("vector");
+ map.addLayer(layer);
+
+ feature = new OpenLayers.Feature.Vector(
+ new OpenLayers.Geometry.Point(1, 2),
+ {foo: "foo", bar: "bar"}
+ );
+ layer.addFeatures(feature);
+
+ store = new GeoExt.data.FeatureStore({
+ layer: layer,
+ features: [feature]
+ });
+
+ grid = new Ext.grid.GridPanel({
+ renderTo: "grid",
+ store: store,
+ columns: [{
+ header: "Name",
+ width: 200,
+ dataIndex: "name"
+ }, {
+ header: "Elevation",
+ width: 100,
+ dataIndex: "elevation"
+ }],
+ sm: new GeoExt.ux.FeatureSelectionModel({controlMode: 'select'}),
+ plugins: [Ext.ux.grid.GridMouseEvents]
+ });
+
+ var sm = grid.getSelectionModel();
+
+ t.ok(sm.bound,
+ "Selection model binds a select control if controlMode is set to 'select' in constructor");
+ t.ok(!sm.boundHover,
+ "Selection model binds no hover control if controlMode is set to 'select' in constructor");
+ t.ok(sm.hasListener('rowselect'),
+ "class has listener 'rowselect' if controlMode is set to 'select' in constructor");
+ t.ok(!sm.hasListener('rowmouseenter'),
+ "class has no listener 'rowmouseenter' if controlMode is set to 'select' in constructor");
+
+ grid.destroy();
+
+ grid = new Ext.grid.GridPanel({
+ renderTo: "grid",
+ store: store,
+ columns: [{
+ header: "Name",
+ width: 200,
+ dataIndex: "name"
+ }, {
+ header: "Elevation",
+ width: 100,
+ dataIndex: "elevation"
+ }],
+ sm: new GeoExt.ux.FeatureSelectionModel({controlMode: 'hover'}),
+ plugins: [Ext.ux.grid.GridMouseEvents]
+ });
+
+ var sm = grid.getSelectionModel();
+
+ t.ok(!sm.bound,
+ "Selection model binds no select control if controlMode is set to 'hover' in constructor");
+ t.ok(sm.boundHover,
+ "Selection model binds a hover control if controlMode is set to 'hover' in constructor");
+ t.ok(!sm.hasListener('rowselect'),
+ "class has no listener 'rowselect' if controlMode is set to 'hover' in constructor");
+ t.ok(grid.hasListener('rowmouseenter'),
+ "class has a listener 'rowmouseenter' if controlMode is set to 'hover' in constructor");
+
+ grid.destroy();
+
+ grid = new Ext.grid.GridPanel({
+ renderTo: "grid",
+ store: store,
+ columns: [{
+ header: "Name",
+ width: 200,
+ dataIndex: "name"
+ }, {
+ header: "Elevation",
+ width: 100,
+ dataIndex: "elevation"
+ }],
+ sm: new GeoExt.ux.FeatureSelectionModel({controlMode: 'both'}),
+ plugins: [Ext.ux.grid.GridMouseEvents]
+ });
+
+ var sm = grid.getSelectionModel();
+
+ t.ok(grid.getSelectionModel().bound,
+ "Selection model binds a select control if controlMode is set to 'both' in constructor");
+ t.ok(grid.getSelectionModel().boundHover,
+ "Selection model binds a hover control if controlMode is set to 'both' in constructor");
+ t.ok(sm.hasListener('rowselect'),
+ "class has a listener 'rowselect' if controlMode is set to 'both' in constructor");
+ t.ok(grid.hasListener('rowmouseenter'),
+ "class has a listener 'rowmouseenter' if controlMode is set to 'both' in constructor");
+
+ grid.destroy();
+ }
+ </script>
+ <body>
+ <div id="map" style="width:600px; height: 400px"></div>
+ <div id="grid"></div>
+ </body>
+</html>
More information about the Commits
mailing list