ExtJS 4.x Layout Manager and JSAPI 2.5 Compact

DonSaul · ‎11-17-2011

Hi, is anyone using ExtJS 4.x layouts with newer versions of JSAPI? ExtJS has a border layout similar to Dojo's where you use the "center" panel for the map area. I am just getting started with this and looking for a simple exampel that works. There seems to be issues about how ExtJS manipulates the DOM for that "center" panel DIV and what the underlying Dojo is doing with the map object.

David Rezn (http://blog.davidrenz.com/?p=281) had a simple example based upon JSAPI 1.3 and an old version of ExtJS. However, with the newer versions on JSAPI and ExtJS, his approach no loner seemd to work. I was wondering if anybody else was had a simple working example.

I am starting by creating a veiwport with a border layoput. The "North", "South", "East" and "West" panels are blank for simplicity. I think once I am able to get the basic problem of getting the map object properly displayed in the "center" panel, I'll be OK.

Any ideas?

Thanks,
Don

KellyHutchins · ‎11-19-2011

I ran a quick test using the code from David's blog and the 2.5 compact build and it worked for me. Can you provide more details about the problems you are seeing?

Here's a link to my test case:
http://jsfiddle.net/mZEpZ/

And here's the code:

<html>
    
    <head>
        <title>
            Complex Layout
        </title>
        <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/claro/claro.css"
        />
        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css"
        />
        <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/esri/dijit/css/Popup.css"
        />
        <style type="text/css">
            html, body { font:normal 12px verdana; margin:0; padding:0; border:0 none;
            overflow:hidden; height:100%; } p { margin:5px; } .settings { background-image:url(JS/ExtJS/examples/shared/icons/fam/folder_wrench.png);
            } .nav { background-image:url(JS/ExtJS/examples/shared/icons/fam/folder_go.png);
            }
        </style>
        <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5compact"
        type="text/javascript">
        </script>
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js">
         
        </script>
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/ext-all.js">
         
        </script>
        <script type="text/javascript">
                dojo.require("esri.map");
        dojo.require("esri.layers.FeatureLayer");
        dojo.require("esri.dijit.Popup");

        var map;

        function init() {

            var viewport = new Ext.Viewport({
                layout: "fit",
                title: "Medford GIS",
                items: [{
                    layout: "border",
                    items: [{
                        region: "center",
                        title: "center",
                        html: "<div id='map' style='height:100%; width:100%;z-index=: 1000;'></div>"
                    }, {
                        region: "north",
                        title: "north",
                        height: 100,
                        collapsible: true,
                        margins: {
                            top: 0,
                            right: 0,
                            bottom: 0,
                            left: 0
                        },
                        cmargins: {
                            top: 0,
                            right: 0,
                            bottom: 0,
                            left: 0
                        },
                        html: "Header section"
                    }, {
                        region: "south",
                        title: "south",
                        height: 80,
                        collapsible: true,
                        contentEl: "south" // this gets the content from the div named "south"
                    }, {
                        region: "west",
                        title: "west",
                        width: 150,
                        split: true,
                        collapsible: true,
                        html: "west region"
                    }, {
                        region: "east",
                        title: "east",
                        width: 150,
                        split: true,
                        collapsible: true,
                        html: "east region"
                    }]
                }],
                json: {
                    size: {
                        width: 800,
                        height: 600
                    }
                }
            });
            var startExtent = new esri.geometry.Extent(-83.41, 31.98, -78.47, 35.28, new esri.SpatialReference({
                wkid: 4326
            }));
            var popup = new esri.dijit.Popup(null, dojo.create("div"));
            map = new esri.Map("map", {
                extent: esri.geometry.geographicToWebMercator(startExtent),
                infoWindow: popup
            });

            //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service    
            dojo.connect(map, 'onLoad', function(theMap) {
                dojo.connect(window, 'resize', map, map.resize);
            });

            var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
            map.addLayer(basemap);
            var infoTemplate = new esri.InfoTemplate();
            infoTemplate.setContent("<b>${NAME}</b><hr></br><b>2000 Population: </b>${POP2000:NumberFormat}<br/>" + "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI:NumberFormat}<br/>" + "<b>2007 Population: </b>${POP2007:NumberFormat}<br/>" + "<b>2007 Population per Sq. Mi.: </b>${POP07_SQMI:NumberFormat}");
            var southCarolinaCounties = new esri.layers.FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", {
                mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
                infoTemplate: infoTemplate,
                outFields: ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"]
            });
            southCarolinaCounties.setDefinitionExpression("STATE_NAME = 'South Carolina'");

            var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 255, 255, 0.35]), 1), new dojo.Color([125, 125, 125, 0.35]));
            southCarolinaCounties.setRenderer(new esri.renderer.SimpleRenderer(symbol));
            map.addLayer(southCarolinaCounties);




            //NOTE: Requires dojo.number for the formatting
            var infoTemplate = new esri.InfoTemplate();
            infoTemplate.setContent("<b>${NAME}</b><hr></br><b>2000 Population: </b>${POP2000:NumberFormat}<br/>" + "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI:NumberFormat}<br/>" + "<b>2007 Population: </b>${POP2007:NumberFormat}<br/>" + "<b>2007 Population per Sq. Mi.: </b>${POP07_SQMI:NumberFormat}");

            map.infoWindow.resize(245, 125);





        }
        dojo.addOnLoad(init);
        </script>
    </head>
    
    <body>
        <!-- use class="x-hide-display" to prevent a brief flicker of the content
        -->
        <div id="west" class="x-hide-display">
        </div>
        <div id="center" class="x-hide-display" style="z-index: 100;">
        </div>
        <div id="props-panel" class="x-hide-display">
        </div>
        <div id="south" class="x-hide-display">
            This content comes from the div
        </div>
        <div id="north" class="x-hide-display">
            <!--- note ... this starts 100 px from the top -- see the cmargins for
            that -->
        </div>
    </body>

</html>

Hi, is anyone using ExtJS 4.x layouts with newer versions of JSAPI? ExtJS has a border layout similar to Dojo's where you use the "center" panel for the map area. I am just getting started with this and looking for a simple exampel that works. There seems to be issues about how ExtJS manipulates the DOM for that "center" panel DIV and what the underlying Dojo is doing with the map object.

David Rezn (http://blog.davidrenz.com/?p=281) had a simple example based upon JSAPI 1.3 and an old version of ExtJS. However, with the newer versions on JSAPI and ExtJS, his approach no loner seemd to work. I was wondering if anybody else was had a simple working example.

I am starting by creating a veiwport with a border layoput. The "North", "South", "East" and "West" panels are blank for simplicity. I think once I am able to get the basic problem of getting the map object properly displayed in the "center" panel, I'll be OK.

Any ideas?

Thanks,
Don

DonSaul · ‎11-23-2011

Thanks for your code example Kelly! After trying different things, I found I was having a race condition between ExtJS and the ESRI/Dojo. My center map area was not fully created by ExtJS before ESRI/Dojo tried to place the "map" object in it. I am not sure if this was because I was using a local copy of ExtJS rather than the CDN cachefly version of ExtJS.

I ended up calling the dojo.addOnLoad(init); at the bottom of my Ext.onReady(extReady);. This ensured that ExtJS was done with it's stuff before ESRI/Dojo did it's thing.

I did need to use David's approach of createing a seperate map area DIV with a high "Z" value to ensure that the map appeared on top.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
        <title>ESRI Map and Ext JS</title>
        <!-- ArcGIS API for JavaScript -->
        <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5compact">
        </script>
        <!-- Load Ext JS Library -->
        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all.css" />
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.2a/ext-all.js">
        </script>
        <!--Overrides the ESRI NIM070871 bug for the slider in the compact version -->
        <style type="text/css">
            .esriSimpleSlider {
                top: 40px;
                left: 30px;
            }
        </style>
        <script type="text/javascript">
            
            /*******************
             * Requires
             */
            dojo.require("esri.map");
            Ext.require(['*']);
            
            Ext.onReady(extReady);
            
            var map, tiledMapServiceLayer;
            
            function init(){
            
                var initialExtent = new esri.geometry.Extent({
                    "xmin": 244598,
                    "ymin": 6241389,
                    "xmax": 278995,
                    "ymax": 6264320,
                    "spatialReference": {
                        "wkid": 102100
                    }
                });
                
                //Attach the map object to the added center DIV 
                map = new esri.Map('mapDiv', {
                    extent: initialExtent,
                    slider: true,
                    nav: true,
                    logo: true
                });
                
                // Set the map layer
                tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
                
                // Add a layer
                map.addLayer(tiledMapServiceLayer);
            }
            
            function extReady(){
            
                var viewport = Ext.create('Ext.container.Viewport', {
                    layout: 'border',
                    renderTo: Ext.getBody(),
                    items: [{
                        region: 'north',
                        id: 'top',
                        height: 100,
                        border: true,
                        bodyStyle: 'background-color: red',
                        margin: '5 5 5 5'
                    }, {
                        region: 'west',
                        id: 'left',
                        width: 200,
                        border: true,
                        bodyStyle: 'background-color: blue',
                        margin: '5 5 5 5'
                    }, {
                        region: 'south',
                        id: 'bottom',
                        height: 100,
                        border: true,
                        bodyStyle: 'background-color: green',
                        margin: '5 5 5 5'
                    }, {
                        region: 'east',
                        id: 'right',
                        width: 200,
                        border: true,
                        bodyStyle: 'background-color: orange',
                        margin: '5 5 5 5'
                    }, {
                        region: 'center',
                        id: 'middle',
                        html: "<div id='mapDiv' style='height:100%; width:100%;z-index=:1000;'></div>",
                        border: true
                    }]
                });
                
                // Load the ESRI/Dojo once ExtJS has rendered the page layout.  ESRI needs
                // the "mapDiv" fully loaded before it can access it.
                dojo.addOnLoad(init);
            };
        </script>
    </head>
    <body>
    </body>
</html>

Thanks again,
Don