[OpenLayers-Users] mapfish - openlayers - extjs - jquery usage problems

[Fabio D'Ovidio]

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