[Commits] r171 - sandbox/opengeo/drake/trunk/examples

commits at geoext.org commits at geoext.org
Sat Feb 14 00:51:53 CET 2009


Author: sbenthall
Date: 2009-02-14 00:51:53 +0100 (Sat, 14 Feb 2009)
New Revision: 171

Added:
   sandbox/opengeo/drake/trunk/examples/featurestore.html
Log:
featurestore.html example for testing/developing/demonstrating the FeatureStore class


Added: sandbox/opengeo/drake/trunk/examples/featurestore.html
===================================================================
--- sandbox/opengeo/drake/trunk/examples/featurestore.html	                        (rev 0)
+++ sandbox/opengeo/drake/trunk/examples/featurestore.html	2009-02-13 23:51:53 UTC (rev 171)
@@ -0,0 +1,279 @@
+<html>
+<head>
+    <title>Filter and WFS Store</title>
+    <link rel="stylesheet" type="text/css" href="../externals/ext/resources/css/ext-all.css" />
+    <link rel="stylesheet" type="text/css" href="../externals/ext/resources/css/xtheme-gray.css" />
+    <link rel="stylesheet" type="text/css" href="../externals/openlayers/theme/default/style.css" />
+    <link rel="stylesheet" type="text/css" href="../core/theme/css/styler.css" />
+    <style type="text/css">
+        #panel {
+            width: 380px;
+            margin: 1em 3em;
+        }
+    </style>
+    
+    <script type="text/javascript" src="../externals/ext/adapter/ext/ext-base.js"></script>
+    <script type="text/javascript" src="../externals/ext/ext-all.js"></script>
+    <!-- <script type="text/javascript" src="../externals/openlayers/OpenLayers.js"></script> -->
+    <script type="text/javascript" src="../externals/openlayers/lib/OpenLayers.js"></script>
+    <script>
+    window.scriptLocation = "../core/";
+    </script>
+    <script type="text/javascript" src="../core/lib/GeoExt.js"></script> 
+
+
+
+    <script>
+    
+    // CODE FOR FILTERBUILDER //
+
+    Ext.BLANK_IMAGE_URL = "../../externals/ext/resources/images/default/s.gif";
+
+    var filter = new OpenLayers.Filter.Logical({
+        type: OpenLayers.Filter.Logical.OR,
+        filters: [
+            new OpenLayers.Filter.Comparison({
+                type: OpenLayers.Filter.Comparison.LESS_THAN,
+                property: "PERSONS",
+                value: 1000000
+            })
+        ]
+    });
+    
+    var feWin = null;
+    var format = new OpenLayers.Format.Filter();
+    function showFE(panel) {
+        var filter = panel.getComponent(0).getFilter();
+        var node = format.write(filter);
+        var text = OpenLayers.Format.XML.prototype.write.apply(format, [node]);
+        if(!feWin) {
+            feWin = new Ext.Window({
+                title: "Filter Encoding",
+                layout: "fit",
+                closeAction: "hide",
+                height: 300,
+                width: 450,
+                plain: true,
+                modal: true,
+                items: [{
+                    xtype: "textarea",
+                    value: text
+                }]
+            });
+        } else {
+            feWin.items.items[0].setValue(text);
+        }
+        feWin.show();
+    }
+
+    var fb;
+
+    //Initialize Filter Builder
+    Ext.onReady(function() {
+
+        fb = new Ext.Panel({
+            title: "Filter Builder",
+            items: [{
+                xtype: "gx_filterbuilder",
+                filter: filter.clone(),
+                attributes: new GeoExt.data.AttributesStore({
+                    url: "/geoserver/wfs?request=DescribeFeatureType&typename=topp:states",
+                    ignore: {name: "the_geom"}
+                })
+            }],
+            bbar: ["->", {
+                text: "Set Filter",
+                handler: function() {
+                    proxy.setOGCFilter(fb.getComponent(0).getFilter());
+                    grid.store.load({
+                        params: {
+                            start: 0,
+                            limit: 7
+                        }
+                    });                    
+                }
+            }]
+        });
+
+    })
+
+
+    // CODE FOR WFS FEATURE STORE //
+
+    var grid, map;
+
+    function recordize(attrs){
+        var records = new Array();
+            var mapping = {
+            "double": "float",
+            "string": "string",
+            "MultiSurfacePropertyType": "auto"
+        }
+    
+        for (var i = 0; i < attrs.length; i++){
+            var a = attrs[i];
+            var k = a.type.replace(/.*:/, '');
+
+            if (mapping[k]){
+                records.push({
+                     name: a.name,  
+                     mapping: a.name,
+                     type: mapping[k]
+                });
+            } 
+        }
+
+        return Ext.data.Record.create(records);
+    }
+
+    function columnize(attrs){
+        var cols = new Array();
+        for (var i = 0; i < attrs.length; i++){
+            var a = attrs[i];
+            if (a.type){
+            cols.push({
+                id: a.name,
+                header: a.name, 
+                dataIndex: a.name, 
+                hidden: (i>11 | a.type.startsWith('gml:')),
+                sortable: true
+            });
+            } else {
+                console.log(a.name + " has no type");
+            }
+        }
+
+        return cols;
+    }
+
+
+
+
+    Ext.onReady(function(){
+        var proto = new OpenLayers.Protocol.WFS({
+            url: '/geoserver/wfs',
+            featureType: 'states',
+            featureNS: 'http://www.openplans.org/topp',
+            featurePrefix: 'topp'
+        });
+    
+        proxy = new GeoExt.data.ProtocolProxy({protocol: proto});
+
+        var as = new GeoExt.data.AttributesStore({
+            url: '/geoserver/wfs?typename=topp:states&request=describefeaturetype'
+        });
+
+        as.load({
+            callback: function(x){
+                fields = [];
+
+                for (var i = 0; i < x.length; i++){
+                    fields.push(x[i].data);
+                }
+
+                setupGrid();
+            }
+        });
+    });
+
+
+    var store;
+    function setupGrid(){
+        var type = 'topp:states';
+        // create the data store
+        store = new GeoExt.data.FeatureStore({
+            proxy: proxy, 
+            remoteSort: true,
+            fields: recordize(fields)
+        });
+
+        proxy.ogcFilter = filter;
+
+        store.load();
+
+        var pagingBar = new Ext.PagingToolbar({
+            pageSize: 7, 
+            store: store,
+            displayInfo: true,
+            displayMsg: 'Displaying features {0} - {1} of {2}',
+            emptyMsg: 'No features to display',
+        });
+
+        ///////////// Grid Stuff
+        
+        grid = new Ext.grid.GridPanel({
+            store: store,
+            columns:  columnize(fields),
+            stripeRows: true,
+            autoExpandColumn: fields[0].name,
+            height:230,
+            //width:600,
+            title: type,
+            bbar: pagingBar,
+            region: "south",
+            collapsible: true,
+            collapseMode: "mini"
+        });
+        
+        grid.on("rowdblclick", function(grid, index, evt) {
+            var record = grid.getSelectionModel().getSelected();
+            
+            if (record) {
+                var bounds = record.data.feature.geometry.getBounds();
+                map.zoomToExtent(bounds);
+            }
+        }, this);
+        
+        ///////////// Map Stuff
+        
+        map = new OpenLayers.Map({
+            theme: null,
+            controls: [],
+            units: "m",
+            projection: new OpenLayers.Projection("EPSG:4326"),
+            restrictedExtent: new OpenLayers.Bounds(-139.53227612499998,20.816194750000008,-59.55180737499998,55.44510100000001), //new OpenLayers.Bounds(-180,-90,180,90), 
+        });
+                   
+        // Add some layers with a dummy base layer.
+        map.addLayers([
+            new OpenLayers.Layer.WMS(
+                "OpenLayers WMS",
+                "http://labs.metacarta.com/wms/vmap0",
+                {layers: 'basic'}, {isBaseLayer: true}
+            ),
+            store.createLayer()
+        ]);
+        
+        map.addControl(new OpenLayers.Control.Navigation());
+        map.addControl(new OpenLayers.Control.PanZoomBar());
+        
+        mapPanel = new GeoExt.MapPanel({
+            region: "center",
+            map: map
+        })
+
+        new Ext.Viewport({
+            layout: 'border',
+            items: [
+                new Ext.Panel({
+                    region: "west",
+                    items: [
+                        fb
+                    ],
+                    width: 370,
+                    collapsible: true,
+                    collapseMode: "mini",
+                    split: true
+                }),
+                mapPanel,
+                grid
+            ]
+        });
+    }
+
+
+    </script>
+</head>
+<body>
+</body>
+</html>


Property changes on: sandbox/opengeo/drake/trunk/examples/featurestore.html
___________________________________________________________________
Name: svn:mime-type
   + text/html
Name: svn:keywords
   + Id
Name: svn:eol-style
   + native



More information about the Commits mailing list