[Commits] r286 - in sandbox/opengeo/geoexplorer: . examples
commits at geoext.org
commits at geoext.org
Thu Mar 26 23:06:12 CET 2009
Author: sbenthall
Date: 2009-03-26 23:06:12 +0100 (Thu, 26 Mar 2009)
New Revision: 286
Added:
sandbox/opengeo/geoexplorer/examples/RowExpander.js
sandbox/opengeo/geoexplorer/examples/wms-capabilities2.html
sandbox/opengeo/geoexplorer/examples/wms-capabilities2.js
Modified:
sandbox/opengeo/geoexplorer/modifications.txt
Log:
second example of WMS capabilities grid with row expander
Added: sandbox/opengeo/geoexplorer/examples/RowExpander.js
===================================================================
--- sandbox/opengeo/geoexplorer/examples/RowExpander.js (rev 0)
+++ sandbox/opengeo/geoexplorer/examples/RowExpander.js 2009-03-26 22:06:12 UTC (rev 286)
@@ -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"> </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);
+ }
+ }
+});
Added: sandbox/opengeo/geoexplorer/examples/wms-capabilities2.html
===================================================================
--- sandbox/opengeo/geoexplorer/examples/wms-capabilities2.html (rev 0)
+++ sandbox/opengeo/geoexplorer/examples/wms-capabilities2.html 2009-03-26 22:06:12 UTC (rev 286)
@@ -0,0 +1,26 @@
+<html>
+ <head>
+ <script type="text/javascript" src="../../openlayers/lib/OpenLayers.js"></script>
+ <script type="text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
+ <script type="text/javascript" src="../../ext/ext-all-debug.js"></script>
+ <script type="text/javascript" src="../lib/GeoExt.js"></script>
+
+ <link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css"></link>
+ <link rel="stylesheet" type="text/css" href="../../ext/examples/shared/examples.css"></link>
+
+ <script type="text/javascript" src="RowExpander.js"></script>
+ <script type="text/javascript" src="wms-capabilities2.js"></script>
+
+ </head>
+ <body>
+ <h1>WMS Capabilities Example 2</h1>
+ <p>This is another example that shows how to load a grid with data from a WMS
+ capabilities document. You can click to expand a row to see
+ more information about the layer.</p>
+
+ <p>Note that the js is not minified so it is readable.
+ See <a href="wms-capabilities2.js">wms-capabilities.js</a>.</p>
+
+ <div id="capgrid"></div>
+ </body>
+</html>
Added: sandbox/opengeo/geoexplorer/examples/wms-capabilities2.js
===================================================================
--- sandbox/opengeo/geoexplorer/examples/wms-capabilities2.js (rev 0)
+++ sandbox/opengeo/geoexplorer/examples/wms-capabilities2.js 2009-03-26 22:06:12 UTC (rev 286)
@@ -0,0 +1,41 @@
+var store;
+Ext.onReady(function() {
+
+ // create a new WMS capabilities store
+ store = new GeoExt.data.WMSCapabilitiesStore({
+ url: "data/wmscap.xml"
+ });
+ // load the store with records derived from the doc at the above url
+ store.load();
+
+ var xg = Ext.grid;
+
+ // row expander
+ var expander = new xg.RowExpander({
+ tpl : new Ext.Template(
+ '<p><b>Abstract:</b> {abstract}</p><br>',
+ '<p><b>Available formats:</b> {formats}</p>'
+ )
+ });
+
+ // create a grid to display records from the store
+ var grid = new Ext.grid.GridPanel({
+ title: "WMS Capabilities",
+ store: store,
+ cm: new xg.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"}
+ ]),
+ iconCls: 'icon-grid',
+ autoExpandColumn: "description",
+ renderTo: "capgrid",
+ plugins: expander,
+ height: 300,
+ width: 650,
+ });
+
+
+});
Modified: sandbox/opengeo/geoexplorer/modifications.txt
===================================================================
--- sandbox/opengeo/geoexplorer/modifications.txt 2009-03-26 21:51:06 UTC (rev 285)
+++ sandbox/opengeo/geoexplorer/modifications.txt 2009-03-26 22:06:12 UTC (rev 286)
@@ -4,5 +4,6 @@
* Added code required for layer tree (see #22)
* Add WMSCapabilitiesReader (see #26)
* Add WMSCapabilitiesStore (see #9)
+ * Added examples of grid using WMSCapabilitiesStore (see #9)
* Allow array extent or center in MapPanel (see #31)
More information about the Commits
mailing list