[OpenLayers-Users] mapfish - openlayers - extjs - jquery usage
problems
Fabio D'Ovidio
fabiodovidio at gmail.com
Thu Mar 12 19:56:50 EDT 2009
....just to clarify
2009/3/13 Fabio D'Ovidio <fabiodovidio at gmail.com>
> 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 <bluecarto at gmail.com>
>
> 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 <fabiodovidio at gmail.com>
>> 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: fabiodovidio at gmail.com
>> >
>> > _______________________________________________
>> > Users mailing list
>> > Users at openlayers.org
>> > http://openlayers.org/mailman/listinfo/users
>> >
>>
>>
>>
>> --
>> Pierre GIRAUD
>> http://www.camptocamp.com
>>
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20090313/836e18d6/attachment.html
More information about the Users
mailing list