PDA

View Full Version : adding ext.viewport to a "complicated" code



Gery
6 Sep 2012, 8:54 AM
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/sample/trunk/mapfishsample/public/app/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
6 Sep 2012, 10:39 AM
The Viewport is meant use the entire document body. (entire browser client). You would need to use a panel.

Scott.

Gery
7 Sep 2012, 12:59 AM
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
7 Sep 2012, 5:37 AM
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.


3852838529