adding ext.viewport to a "complicated" code

[Gery]

Hello experts,

I'm using the MapFish web framework, especially the MapFish demo (http://demo.mapfish.org/mapfishsample/2.2/) for my personal application. This framework uses Ext 3.2.1 to make the toolbar and nice icons observed in the demo.

After several attempts, I couldn't add a title above the toolbar using Ext.Viewport (I think this is the right tool to do it), the Map.js, which controls the toolbar position, is here: http://mapfish.org/svn/mapfish/sampl...lib/App/Map.js. This code is quite advanced for my Ext knowledge.

I tried to adapt the following code but didn't work:

new Ext.Viewport({
                layout: "border",
                items: [{
                    title: "Welcome to my Personal Project",
                    region: "center",
                    xtype: "gx_mappanel",
                    map: map,
                    layers: layerStore,
                    center: new OpenLayers.LonLat(-77.15, -12.05).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")),
                    zoom: 8
                    ]}
                    })

with the piece of code above I also try to "expand" the small window and make it a full screen application. I know it's possible to use css to do this but I really prefer to use Ext js for this.

I'd appreciate some help on this,

Thanks in advance,

[scottmartin]

The Viewport is meant use the entire document body. (entire browser client). You would need to use a panel.

Scott.

[Gery]

thanks Scott, I tried to add an Ext.Panel but got this error in firebug:

ct is null                                                          ext-all-debug.js (line 9996)

what does it mean? this is the new code I tried:

/*
 * @include OpenLayers/Projection.js
 * @include OpenLayers/Map.js
 * @include OpenLayers/Layer/WMS.js
 * @include OpenLayers/Layer/XYZ.js
 * @include OpenLayers/Control/Navigation.js
 * @include OpenLayers/Control/PanPanel.js
 * @include OpenLayers/Control/ZoomPanel.js
 * @include OpenLayers/Control/ArgParser.js
 * @include OpenLayers/Control/ScaleLine.js
 * @include GeoExt/widgets/MapPanel.js
 * @include App/Tools.js
 */

Ext.namespace('App');

/**
 * Constructor: App.Map
 * Creates a {GeoExt.MapPanel} internally. Use the "mapPanel" property
 * to get a reference to the map panel.
 *
 * Parameters:
 * options - {Object} Options passed to the {GeoExt.MapPanel}.
 */
App.Map = function(options) {

    // Private

    /**
     *
     */
    var poisLayer = null;

    /**
     * Method: getLayers
     * Returns the list of layers.
     *
     * Returns:
     * {Array({OpenLayers.Layer})} An array of OpenLayers.Layer objects.
     */
    var getLayers = function() {
        var osm = new OpenLayers.Layer.OSM("OpenStreetMap");
        return [osm, poisLayer];
    };

    // Public

    Ext.apply(this, {

        /**
         * APIProperty: mapPanel
         * The {GeoExt.MapPanel} instance. Read-only.
         */
        mapPanel: null

    });

    // Main

    poisLayer = new OpenLayers.Layer.WMS('POIS', App.mapservURL,
        {
            layers: ['sustenance'],
            transparent: true
        },
        {
            singleTile: true
        }
    );

    // create map
    // Note that the maxExtent come from the baseLayer.
    var mapOptions = {
        projection: new OpenLayers.Projection("EPSG:900913"),
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        units: "m",
        numZoomLevels: 18,
        maxResolution: 156543.0339,
        maxExtent: new OpenLayers.Bounds(-128*156543.0339, -128*156543.0339, 128*156543.0339, 128*156543.0339),
        theme: null, // or OpenLayers will attempt to load it default theme
        controls: [
            new OpenLayers.Control.MousePosition(),
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.ScaleLine()
        ]
    };
    var map = new OpenLayers.Map(mapOptions);
    map.addLayers(getLayers());

    // create map panel
    options = Ext.apply({
        map: map,
        extent: OpenLayers.Bounds.fromString("-81,-10,-76,-14", false).transform(new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject()),
        items: [{
            xtype: "gx_zoomslider",
            aggressive: true,
            vertical: true,
            height: 100,
            x: 10,
            y: 20,
            plugins: new GeoExt.ZoomSliderTip({
                template: "Scale: 1 : {scale}<br>Resolution: {resolution}"
            })
        }],
        tbar: new Ext.Toolbar(),
        //stateId: "map",
        prettyStateKeys: true
    }, options);
    this.mapPanel = new GeoExt.MapPanel(options);

    var toolbar = this.mapPanel.getTopToolbar();
    toolbar.add(new App.Tools(this.mapPanel, poisLayer).tools);
    toolbar.doLayout();

    var main = new Ext.Panel({
        title: 'My personal app',
        layout:'fit',
        items: [options]
    });
    main.render('frame');

};

[Gery]

After playing with the code, I found that the Ext.Panel has to go here: http://mapfish.org/svn/mapfish/sample/trunk/mapfishsample/public/app/lib/App/main.js. This is the normal code and it generates figure1 (attached).

once modified it, it appears the title, but the map is gone, figure2 shows the problem.

modified code:

/*
 * @include App/Map.js
 * @include OpenLayers/Feature/Vector.js
 */

/*
 * This file represents the application's entry point. 
 * OpenLayers and Ext globals are set, and the page
 * layout is created.
 */

window.onload = function() {

    /*
     * Setting of OpenLayers global vars.
     */
    OpenLayers.Lang.setCode(OpenLayers.Util.getParameters().lang || "en");
    OpenLayers.Number.thousandsSeparator = ' ';
    OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
    OpenLayers.ImgPath = App.OpenLayers_ImgPath;
    App.styleDefault = OpenLayers.Util.applyDefaults({
        graphicName: 'square',
        strokeColor: '#555',
        fillColor: '#555'
    }, OpenLayers.Feature.Vector.style['default']);

    /*
     * Setting of Ext global vars.
     */
    Ext.BLANK_IMAGE_URL = App.Ext_BLANK_IMAGE_URL;
    Ext.QuickTips.init();

    /*
     * Initialize the application.
     */

    var mapPanel = (new App.Map({
    })).mapPanel;

    var panelMap = new Ext.Panel({
        title: 'my app',
        items: [mapPanel]
    });

    panelMap.setHeight(Ext.get('map').getHeight());
    panelMap.render('map');
};

any ideas? thanks.


figure1.pngfigure2.png