[Commits] r293 - in apps/opengeo/geoexplorer/trunk: . lib

commits at geoext.org commits at geoext.org
Mon Mar 30 21:43:35 CEST 2009


Author: sbenthall
Date: 2009-03-30 21:43:35 +0200 (Mon, 30 Mar 2009)
New Revision: 293

Added:
   apps/opengeo/geoexplorer/trunk/lib/CapabilitiesGrid.js
   apps/opengeo/geoexplorer/trunk/lib/RowExpander.js
Modified:
   apps/opengeo/geoexplorer/trunk/debug.html
   apps/opengeo/geoexplorer/trunk/lib/GeoExplorer.js
Log:
first pass at CapabilitiesGrid.  some bugs and some uglies


Modified: apps/opengeo/geoexplorer/trunk/debug.html
===================================================================
--- apps/opengeo/geoexplorer/trunk/debug.html	2009-03-30 10:58:37 UTC (rev 292)
+++ apps/opengeo/geoexplorer/trunk/debug.html	2009-03-30 19:43:35 UTC (rev 293)
@@ -16,6 +16,8 @@
         <script type="text/javascript" src="externals/geoext/lib/GeoExt.js"></script> 
 
         <!-- GeoExplorer resources -->
+        <script type="text/javascript" src="lib/RowExpander.js"></script> 
+        <script type="text/javascript" src="lib/CapabilitiesGrid.js"></script> 
         <script type="text/javascript" src="lib/Viewer.js"></script> 
         <script type="text/javascript" src="lib/GeoExplorer.js"></script> 
         <script type="text/javascript" src="lib/GeoExplorer/dispatch.js"></script> 

Added: apps/opengeo/geoexplorer/trunk/lib/CapabilitiesGrid.js
===================================================================
--- apps/opengeo/geoexplorer/trunk/lib/CapabilitiesGrid.js	                        (rev 0)
+++ apps/opengeo/geoexplorer/trunk/lib/CapabilitiesGrid.js	2009-03-30 19:43:35 UTC (rev 293)
@@ -0,0 +1,69 @@
+
+var CapabilitiesGrid = Ext.extend(Ext.grid.GridPanel, {
+
+    store: null,
+
+    cm: null,
+
+    mapPanel : null,
+
+    //this one is important; needs to be supplied
+    //as configuration option
+    url: null,
+
+    title: "Explore Date",
+    height: 300,
+    width: 650,
+
+    iconCls: 'icon-grid', //what does this do?
+    autoExpandColumn: "description", //and what does this do?
+
+    initComponent: function(){
+
+        this.store = new GeoExt.data.WMSCapabilitiesStore({
+            url: this.url.substr(0,this.url.indexOf("ows")) + "wms?request=GetCapabilities"
+        });
+
+        this.store.load();
+
+        var expander = new Ext.grid.RowExpander({
+            tpl : new Ext.Template(
+                '<p><b>Abstract:</b> {abstract}</p><br>'
+            )
+        });
+
+        this.plugins = expander;
+
+
+        this.tbar = new Ext.Button({
+            text: "Add from URL",
+            handler: this.addLayer,
+            scope : this
+        });
+
+        this.cm = new Ext.grid.ColumnModel([
+            expander,
+            {header: "Name", dataIndex: "name", sortable: true},
+            {header: "Title", dataIndex: "title", sortable: true},
+            {header: "Queryable", dataIndex: "queryable", sortable: true, width: 70},
+            {id: "description", header: "Description", dataIndex: "abstract"}
+        ]);
+
+        CapabilitiesGrid.superclass.initComponent.call(this);       
+    },
+
+    
+    addLayer : function(){
+
+        var sm = this.getSelectionModel();
+
+        //for now just use the first selected record
+        //TODO: force single selection (until we allow
+        //adding group layers)
+        var record = sm.getSelected();
+
+        this.mapPanel.layers.add([record]);
+
+    }
+
+});
\ No newline at end of file

Modified: apps/opengeo/geoexplorer/trunk/lib/GeoExplorer.js
===================================================================
--- apps/opengeo/geoexplorer/trunk/lib/GeoExplorer.js	2009-03-30 10:58:37 UTC (rev 292)
+++ apps/opengeo/geoexplorer/trunk/lib/GeoExplorer.js	2009-03-30 19:43:35 UTC (rev 293)
@@ -37,6 +37,12 @@
     map: null,
     
     /**
+     * Property: mapPanel
+     * {GeoExt.MapPanel} The application's map panel.
+     */
+    mapPanel: null,
+    
+    /**
      * Property: layers
      * {GeoExt.data.LayerStore} A store containing a record for each layer
      *     on the map.
@@ -66,7 +72,7 @@
         
         // place map in panel
         var mapConfig = this.initialConfig.map || {};
-        var mapPanel = new GeoExt.MapPanel({
+        this.mapPanel = new GeoExt.MapPanel({
             border: true,
             region: "center",
             map: this.map,
@@ -88,7 +94,12 @@
                     text: 'Map Layers',
                     map: this.map
                 })
-            }]
+            }],
+            tbar: [new Ext.Button({
+                text : "Add Layer",
+                handler : this.showCapabilitiesGrid,
+                scope: this
+            })]
         });
 
         var legendContainer = new Ext.Panel({
@@ -116,7 +127,7 @@
             items: {
                 layout: "border",
                 deferredRender: false,
-                items: [mapPanel, westPanel]
+                items: [this.mapPanel, westPanel]
             }
         });
 
@@ -170,6 +181,19 @@
             }
         }
         this.layers.add(records);
+    },
+
+    showCapabilitiesGrid: function(){
+        var win = new Ext.Window({
+            items: [
+                new CapabilitiesGrid({
+                    url : this.ows,
+                    mapPanel : this.mapPanel
+                })
+            ]
+        });
+        
+        win.show();
     }
     
 });
\ No newline at end of file

Added: apps/opengeo/geoexplorer/trunk/lib/RowExpander.js
===================================================================
--- apps/opengeo/geoexplorer/trunk/lib/RowExpander.js	                        (rev 0)
+++ apps/opengeo/geoexplorer/trunk/lib/RowExpander.js	2009-03-30 19:43:35 UTC (rev 293)
@@ -0,0 +1,136 @@
+/*
+ * Ext JS Library 2.2.1
+ * Copyright(c) 2006-2009, Ext JS, LLC.
+ * licensing at extjs.com
+ * 
+ * http://extjs.com/license
+ */
+
+Ext.grid.RowExpander = function(config){
+    Ext.apply(this, config);
+
+    this.addEvents({
+        beforeexpand : true,
+        expand: true,
+        beforecollapse: true,
+        collapse: true
+    });
+
+    Ext.grid.RowExpander.superclass.constructor.call(this);
+
+    if(this.tpl){
+        if(typeof this.tpl == 'string'){
+            this.tpl = new Ext.Template(this.tpl);
+        }
+        this.tpl.compile();
+    }
+
+    this.state = {};
+    this.bodyContent = {};
+};
+
+Ext.extend(Ext.grid.RowExpander, Ext.util.Observable, {
+    header: "",
+    width: 20,
+    sortable: false,
+    fixed:true,
+    menuDisabled:true,
+    dataIndex: '',
+    id: 'expander',
+    lazyRender : true,
+    enableCaching: true,
+
+    getRowClass : function(record, rowIndex, p, ds){
+        p.cols = p.cols-1;
+        var content = this.bodyContent[record.id];
+        if(!content && !this.lazyRender){
+            content = this.getBodyContent(record, rowIndex);
+        }
+        if(content){
+            p.body = content;
+        }
+        return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
+    },
+
+    init : function(grid){
+        this.grid = grid;
+
+        var view = grid.getView();
+        view.getRowClass = this.getRowClass.createDelegate(this);
+
+        view.enableRowBody = true;
+
+        grid.on('render', function(){
+            view.mainBody.on('mousedown', this.onMouseDown, this);
+        }, this);
+    },
+
+    getBodyContent : function(record, index){
+        if(!this.enableCaching){
+            return this.tpl.apply(record.data);
+        }
+        var content = this.bodyContent[record.id];
+        if(!content){
+            content = this.tpl.apply(record.data);
+            this.bodyContent[record.id] = content;
+        }
+        return content;
+    },
+
+    onMouseDown : function(e, t){
+        if(t.className == 'x-grid3-row-expander'){
+            e.stopEvent();
+            var row = e.getTarget('.x-grid3-row');
+            this.toggleRow(row);
+        }
+    },
+
+    renderer : function(v, p, record){
+        p.cellAttr = 'rowspan="2"';
+        return '<div class="x-grid3-row-expander">&#160;</div>';
+    },
+
+    beforeExpand : function(record, body, rowIndex){
+        if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){
+            if(this.tpl && this.lazyRender){
+                body.innerHTML = this.getBodyContent(record, rowIndex);
+            }
+            return true;
+        }else{
+            return false;
+        }
+    },
+
+    toggleRow : function(row){
+        if(typeof row == 'number'){
+            row = this.grid.view.getRow(row);
+        }
+        this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
+    },
+
+    expandRow : function(row){
+        if(typeof row == 'number'){
+            row = this.grid.view.getRow(row);
+        }
+        var record = this.grid.store.getAt(row.rowIndex);
+        var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
+        if(this.beforeExpand(record, body, row.rowIndex)){
+            this.state[record.id] = true;
+            Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
+            this.fireEvent('expand', this, record, body, row.rowIndex);
+        }
+    },
+
+    collapseRow : function(row){
+        if(typeof row == 'number'){
+            row = this.grid.view.getRow(row);
+        }
+        var record = this.grid.store.getAt(row.rowIndex);
+        var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
+        if(this.fireEvent('beforecollapse', this, record, body, row.rowIndex) !== false){
+            this.state[record.id] = false;
+            Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
+            this.fireEvent('collapse', this, record, body, row.rowIndex);
+        }
+    }
+});



More information about the Commits mailing list