....just to clarify 2009/3/13 Fabio D'Ovidio <[email protected]>
> Hello Pierre, > yes sure, we tryied! > Unfortunately the problem was related to ExtJs and Mozilla Firefox 3, not > to $ function. The problem is on Ext.onReady event when you try to INCLUDE a large number of JS files over ExtJS (this is our case!), not if you want to use ExtJS with Mozilla FireFox. Thank you again Fabio D'Ovidio > > Anyway what you indicate remains the only solution for using OpenLayers and > jQuery library together (unless you want to change the name of $ function in > OL or in jQuery). > Thank you very much! > > Fabio D'Ovidio > > 2009/3/12 Pierre GIRAUD <[email protected]> > > Hi Fabio, >> >> This might be stupid but did you try the following ? >> >> var map = new OpenLayers.Map('map'); >> >> OpenLayers.Map constructor can be given either a DOM Element or the id >> of a DOM Element. >> >> Hope this helps, >> Pierre >> >> >> On Wed, Mar 11, 2009 at 5:46 PM, Fabio D'Ovidio <[email protected]> >> wrote: >> > Hello, >> > in order to use jquery library toghether with mapfish client i try to >> > summarize the problems related to: >> > >> > * $ function definition in OpenLayers >> > * Extjs usage with jquery >> > >> > OpenLayers uses part of prototype library (without include it) in the >> > following files: >> > >> > * Util.js >> > * Ajax.js >> > * Events.js >> > * Calss.js >> > >> > In particular in Util.js $ function is defined as following: >> > /** >> > * Maintain $() from prototype >> > */ >> > if ($ == null) { >> > var $ = OpenLayers.Util.getElement; >> > } >> > >> > jQuery library also define a $ function as: $ = jQuery >> > >> > Than, jQuery library is shipped with ExtJS, and MapFish ships with >> > ExtJS. In particular ExtJS does not load jQuery dynamically, you need to >> > include it in your HTML >> > with script tags in this order: >> > >> > 1. jquery.js >> > 2. ext-jquery-adapter.js >> > 3. ext-all.js (or your choice of files) >> > >> > Now, my HTML script with script tags is as following: >> > >> > viewport:null; >> > map:null; >> > >> > // reference local blank image >> > Ext.BLANK_IMAGE_URL = >> '../../mfbase/ext/resources/images/default/s.gif'; >> > >> > Ext.onReady(function(){ >> > >> > var map = new OpenLayers.Map(*$('map')*); >> > this.map = map; >> > >> > var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", >> > "http://labs.metacarta.com/wms/vmap0";, {layers: 'basic'}, >> > {buffer: 0}); >> > >> > map.addLayers([wms]); >> > map.addControl(new OpenLayers.Control.LayerSwitcher()); >> > map.setCenter(new OpenLayers.LonLat(17, 2), 2); >> > >> > var window = new Ext.Window({ >> > title: 'Map', >> > width: 500, >> > height: 300, >> > minWidth: 300, >> > minHeight: 200, >> > layout: 'fit', >> > plain: true, >> > bodyStyle: 'padding:5px;', >> > items: [{ >> > xtype: 'mapcomponent', >> > map: map >> > }] >> > }); >> > window.show(); >> > >> > }); >> > >> > and obviously I have a div in HTML template to display the map: >> > >> > <div id="map"></div> >> > >> > For all these reasons I must solve two problems: >> > >> > 1. re-name $ function in Util.js >> > 2. include js files in the correct way to use mapfish with jQuery >> > >> > So I try in this way: >> > >> > 1. I changed Util.js like this: >> > >> > var jq = OpenLayers.Util.getElement; >> > >> > and my script become: >> > >> > viewport:null; >> > map:null; >> > >> > // reference local blank image >> > Ext.BLANK_IMAGE_URL = >> > '../../mfbase/ext/resources/images/default/s.gif'; >> > >> > Ext.onReady(function(){ >> > >> > var map = new OpenLayers.Map(*jq('map')*); >> > this.map = map; >> > >> > var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", >> > "http://labs.metacarta.com/wms/vmap0";, {layers: >> > 'basic'}, {buffer: 0}); >> > >> > map.addLayers([wms]); >> > map.addControl(new OpenLayers.Control.LayerSwitcher()); >> > map.setCenter(new OpenLayers.LonLat(17, 2), 2); >> > >> > var window = new Ext.Window({ >> > title: 'Map', >> > width: 500, >> > height: 300, >> > minWidth: 300, >> > minHeight: 200, >> > layout: 'fit', >> > plain: true, >> > bodyStyle: 'padding:5px;', >> > items: [{ >> > xtype: 'mapcomponent', >> > map: map >> > }] >> > }); >> > window.show(); >> > >> > }); >> > >> > >> > (I tryed also using *jQuery.noConflict();* before my script >> > without changing Util.js file) >> > >> > 2. I included in my script JS files in this order: >> > jquery.js,\ >> > ext-jquery-adapter.js,\ >> > ext-all.js >> > >> > and the error is: >> > "A[C.xtype || D] is not a constructor" >> > that deals with ExtJS (maybe on onReady event, I read this post: >> > http://extjs.com/forum/showthread.php?t=53502&highlight=onready+onload) >> > >> > If I don't chage Util.js (or use *jQuery.noConflict() function*) I have >> > the following error: >> > >> > "this.div.appendChild is not a function" >> > >> > because: >> > 1) I load up jQuery, this defines the $ function >> > 2) I load OpenLayers, this checks if $ exists, and because it does >> exist, >> > it is not redefined in the OL (prototype) way >> > 3) I initialize my map and send it the string 'map' as the first >> > argument >> > 4) OpenLayers tries to place your map in the DOM element $('map'), but >> > because $() is still a jQuery function that doesn't return a DOM >> element, >> > and I get the error about appendChild not being defined! >> > >> > How can I solve these problems? :-( >> > Please, help me if you can :-) >> > >> > Thank you very much!! >> > >> > -- >> > Fabio D'Ovidio >> > Geospatial solutions >> > >> > INOVA s.r.l. >> > Web : http://www.inovaos.it >> > Tel.: 081 197 57 600 >> > mail: [email protected] >> > >> > _______________________________________________ >> > Users mailing list >> > [email protected] >> > http://openlayers.org/mailman/listinfo/users >> > >> >> >> >> -- >> Pierre GIRAUD >> http://www.camptocamp.com >> > >
_______________________________________________ Users mailing list [email protected] http://openlayers.org/mailman/listinfo/users
