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: fabiodovi...@gmail.com _______________________________________________ Users mailing list Users@openlayers.org http://openlayers.org/mailman/listinfo/users