Javascript API Widgets and ExtJs - rendering issues

DaveHighness — Mon, 14 May 2012 21:46:23 GMT

We do a lot of application development with ExtJs v3.4 for our framework. Most of our apps have used the ArcServer Javascript API Google Maps Extension. Now we are trying to port over to using the regular Javascript API v 2.8. It seems to work fine for the most part but I am noticing that a lot of the Rest API widgets are not rendering correctly and I think that parts of the widgets are rendering behind the map rather than above (z-index issue?). I have noticed this with the map zoom slider, measure dijit, identify bubble, etc. Usually the text ends up on top of the map but the containing divs are below the map and thus not visible.

I have been placing the map into a div that is inside of an Ext.Panel in a Viewport Layout.

Summarized:

    var viewport = new Ext.Viewport({
        layout: 'border',
        items: [{
            region: 'north',
            id: 'hdr',
            split: false,
            height: 51,
            border: false,
            minHeight: 51,
            maxHeight: 51,
            layout: 'fit',
            margins: '0 0 0 0',
            items:hdrCntnr
        }, {
            region: 'center',
            id: 'mapVp',
            border: false,
            margins: '0 0 0 0',
            layout: 'anchor',
            html: '<div id="map" style="width:100%;height:100%">',
            listeners: {
                'resize': function() {
                    if (map) { map.resize(); }
                }
            }
        }, {
            region: 'south',
            id: 'ftr',
            split: false,
            height: 51,
            border: false,
            minHeight: 51,
            maxHeight: 51,
            layout: 'fit',
            margins: '0 0 0 0',
            items: ftrCntnr
        }],
        listeners: {
            'afterrender': function(cmp){
                //Initialize the map after Ext has rendered
                //arcserver.js
                dojo.addOnLoad(initMap);
            }
        }
    });

        map = new esri.Map('map', {
            extent: initialExtent,
            fitExtent: true,
            slider: true,
            nav: false,
            logo: true
        });

I could use the compact build and create all my own widgets with ExtJs but it would be nice to be able to use the Javascript API Dojo widgets.

Any ideas for dealing with this (other than use Dojo framework)?

Thanks, Dave

Re: Javascript API Widgets and ExtJs - rendering issues

DaveHighness — Mon, 14 May 2012 21:54:06 GMT

Gotta love it. Just found this thread. Added <body class="claro"> and all seems to be working correctly now.

http://forums.arcgis.com/threads/14336-Background-not-showing-in-InfoWindow?highlight=extjs

Dave

topic Re: Javascript API Widgets and ExtJs - rendering issues in ArcGIS JavaScript Maps SDK Questions

Javascript API Widgets and ExtJs - rendering issues

Re: Javascript API Widgets and ExtJs - rendering issues