OpenLayers with ExtJS 4

[lukerothgda]

Cool, thanks! I'll go check it out. Do you mind if I mention this project to the GeoExt mailing list? We might get a few more volunteers.
Luke

I start github project

https://github.com/vahid-sohrabloo/GeoExt4

first example on extjs 4

http://vahid-sohrabloo.github.com/Ge...panel-div.html

I working for convert GeoExt to GeoExt4

everyone can help to me please join to me on gitbub

[vahid4134]

Cool, thanks! I'll go check it out. Do you mind if I mention this project to the GeoExt mailing list? We might get a few more volunteers.
Luke

Ok
thx

[xuejinruan]

Hi Slemmon,<br>
<br>
Thanks so much for the code example. I used Extjs4 mvc structure with Openlayers. And I defined my map panel following your example. However, my mappanel only displays part of the opanlayer map in firefox or chrome when the application first starts up. I need a zoom in or zoom out or whatever mouse click event on the map panel to get the whole map displayed. In IE, nothing was displayed except for Openlayers navigation bar when the application first starts, and again it needs an event on the map map panel to get the map displayed. What could I miss?

openLayerPartialMap.jpg

Thanks so much,

Xuejin

[vahid4134]

Please give me your code

[DiscoBoy]

Having the same problems...
which dissapear if i resize my browser window and than expand it to desktop screen size again. This hapens for me also with the leaflet-Map Library.

[xuejinruan]

Hi Vahid,

Thanks so much for the reply. My code examples are as follows (I could send you the zip file the whole project if you could give me your email). Currently I am not sure the problem is on OpenLayer side, or Extjs4 MVC side. I truly appreciate your time!

MapPanel.js:

//define the data boundary
var bounds = new OpenLayers.Bounds(1009428.376,409005.2844,1464539.488,864116.3956);
//define the restricted area, which we want to display
var extent = new OpenLayers.Bounds(1046000,506000,1428000,768000);

Ext.define('quickview.view.MapPanel' , {
extend: 'Ext.Panel',
alias : 'widget.mapPanel',
contentEl: 'mapDisplay',
id: 'mapPanel',
initComponent:function(){
this.layout = 'fit';

this.getMap = function() {
return this.map;
}


this.defMapConfig = {
id: 'quickViewMap',
// taken from http://apds.qintra.com/apds/javascri...qvolitemain.js
projection: new OpenLayers.Projection("EPSG:2927"),
maxExtent : bounds,
restrictedExtent : extent,
resolutions : new Array(444.4444444, 222.2222222, 111.1111111,
55.55555556, 27.77777778, 13.88888889, 6.944444444,
3.472222222, 1.736111111, 0.868055556),
maxResolution : 444.4444444,
units: 'feet',
numZoomLevels: 10,
controls: [new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar()],
fallThrough: true
//, allOverlays: true // THIS SEEMS TO BREAK THE BASE LAYERS SELECTOR
};
this.mapConfig = this.mapConfig || {};
this.mapConfig = Ext.merge(this.defMapConfig, this.mapConfig);

// initComponent must always end in this.callParent();
this.callParent(arguments);
},
afterRender: function () {
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
OpenLayers.Util.onImageLoadErrorColor = "transparent";

this.map = new OpenLayers.Map(this.mapConfig);

this.mapMarkers = new OpenLayers.Layer.Markers("Markers", { displayInLayerSwitcher: false });

//Add WMS layer
zipcodelayer = new OpenLayers.Layer.WMS("ZipCode", "http://[servername]/geoserver/wms",
{
layers: "zip_codes",
format : "image/gif",
transparent : "true"
}, {
isBaseLayer : true,
visibility : true,
singleTile : true
});
this.map.addLayer(zipcodelayer);

//add some more control:
this.map.addControl(new OpenLayers.Control.LayerSwitcher());
this.map.addControl(new OpenLayers.Control.MousePosition());
this.map.addControl(new OpenLayers.Control.KeyboardDefaults());

this.map.render("mapDisplay");
this.map.zoomTo(5);
//this.map.zoomToExtent(extent);
}

});


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

And Viewport.js
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Ext.define('quickview.view.Viewport', {
extend: 'Ext.container.Viewport',
requires: ['Ext.data.Store',
'Ext.data.StoreManager',
'Ext.data.HasManyAssociation',
'Ext.data.BelongsToAssociation',
'Ext.container.Viewport',
'Ext.grid.*',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*',
'quickview.view.*',
'quickview.model.*',
'quickview.store.*',
'quickview.controller.*',
'*'],
id: 'viewport',
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true
},
items: [
{
region: 'north',
contentEl:'north_banner',
id:'north',
collapsible: true,
closable:true,
title: 'Quick View',
split: true,
height: 100,
bodyStyle:'background-image: url(styles/images/testBanner.jpg); background-repeat: repeat; background-position: center;'
},
{
region: 'west',
contentEl:'west_display',
id:'west',
collapsible: true,
title: 'Parcel Search',
width: 400,
layout: {
type: 'vbox',
align : 'stretch',
pack : 'start'
},
items:[
{
xtype:'panel',
html: 'Search Form',
height: 100,
contentEl:'parcelSearch'
},
{

xtype:'panel',
flex: 1,
contentEl: 'parcelDisplay',
layout:'accordion',
id:'parcelDisplayAccordion',
collapsible: false,
autoScroll:true,
containerScroll : true,
layoutConfig: {
// layout-specific configs go here
titleCollapse:true,
animate: true,
activeOnTop:false
},
items:[
{
xtype: 'panel',
title: 'Selected Parcels',
html: 'Parcel Selected List',
contentEl: 'parcelSelected'
},
{
xtype: 'panel',
title: 'Parcel Quick View Info',
html: 'Parcel Quick Detailed Info',
contentEl: 'parcelDetailedInfo'
},
{
xtype: 'panel',
collapsed: false, //the Accordion souce code is looking for collapse === false, not looking for collapse == true
contentEl: 'layerList'
},
{
xtype: 'panel',
contentEl: 'openAt'
}
]
}
]
},
{
region: 'center',
contentEl:'center_mapdisplay',
id: 'center',
layout: 'border',
border: false,
items: [
{
region: 'center',
contentEl:'mapDisplay',
id: 'centerMap',
collapsible: false,
xtype: 'mapPanel'
},
{
region: 'south',
height: 80,
autoScroll:true,
collapsed:false,
contentEl:'disclaimer',
id: 'disclaimer',
collapsible: true,
title:'Disclaimer',
html: 'Disclaimer goes here'
}
]
}
]
});
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

And app.js
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Ext.Loader.setConfig({
enabled: true
});
Ext.require(['Ext.data.Store',
'Ext.data.StoreManager',
'Ext.data.HasManyAssociation',
'Ext.data.BelongsToAssociation',
'Ext.container.Viewport',
'Ext.grid.*',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*',
'*']);

Ext.create('Ext.app.Application', {
name: 'quickview',
autoCreateViewport: true,
appFolder: 'app',
models: [],
stores:[],
views:['MapPanel', 'Viewport'],
controllers: ['QuickViewController', 'MapPanelController'],
launch: function() {
window.console && console.log("In app.js, " + this.controllers);
}
});
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

And index.html
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<html>
<head>
<title>Quick View</title>

<!-- ExtJS css -->
<link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" />

<link rel="stylesheet" type="text/css" href="styles/quickview.css" />

<!-- ExtJS js -->
<script type='text/javascript' src="extjs4/ext-all-debug.js"></script>

<!-- OpenLayers js -->
<script type='text/javascript' src="OpenLayers-2.10/OpenLayers.js"></script>
<!-- App js -->
<script type='text/javascript' src="app.js"></script>


</head>
<body>
<div id="north_banner">
</div>
<div id="west_display" class="x-hide-display" style="background-color:F9F9F9">
<div id="parcelSearch" class="x-hide-display"></div>
<div id="parcelDisplay" class="x-hide-display">
<div id="parcelSelected" class="x-hide-display"></div>
<div id="parcelDetailedInfo" class="x-hide-display"></div>
<div id="layerList" class="x-hide-display"></div>
<div id="openAt" class="x-hide-display"></div>
</div>
</div>
<div id="center_mapdisplay" class="x-hide-display">
<div id="mapDisplay" class="x-hide-display">
<div id="toolBar" class="x-hide-display"></div>
</div>
<div id="disclaimer" class="x-hide-display"></div>
</div>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Please give me your code

[vahid4134]

I start again GeoExt4
https://github.com/vahid-sohrabloo/GeoExt4

[marcoG]

Hello everybody, I think I'm a little late ... but here is my humble contribution.Here you can find a small example, showing how to render OpenLayers map inside an ExtJS4 Panel.extjs_openlayers.jpgHope this helps.

[the_skua]

Has anybody made an progress on handling OpenLayers events through the new MVC architecture?

[vondervick]

http://github.com/geoext/geoext2