1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    40
    Vote Rating
    0
    Gery is on a distinguished road

      0  

    Default adding ext.viewport to a "complicated" code

    adding ext.viewport to a "complicated" code


    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:

    Code:
    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,

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,927
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Scott.

  3. #3
    Sencha User
    Join Date
    Jun 2012
    Posts
    40
    Vote Rating
    0
    Gery is on a distinguished road

      0  

    Default


    thanks Scott, I tried to add an Ext.Panel but got this error in firebug:
    Code:
    ct is null                                                          ext-all-debug.js (line 9996)
    what does it mean? this is the new code I tried:

    Code:
    /*
     * @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');
    
    };

  4. #4
    Sencha User
    Join Date
    Jun 2012
    Posts
    40
    Vote Rating
    0
    Gery is on a distinguished road

      0  

    Default


    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:
    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

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi