PDA

View Full Version : Map within a nested panels



KJedi
21 Dec 2011, 1:36 PM
There was a related question: http://www.sencha.com/forum/showthread.php?163355-Map-with-Toolbar
It was advised to create a wrapping component with toolbar. I have the same issue, but I need to put them inside another component.
So I want a map with top and bottom bars. I do the following:
1) Controller. I have my views in app/view/search/
Here I just include them. We actually need only MapPage now

Ext.define('CJ.controller.Search', {
extend: 'Ext.app.Controller',
views: [
'search.MapPage',
'search.ListViewPage',
'search.FilterPage'
],
.....

2) MapPage. Basically it holds a global toolbar for the page docked to the top and a custom map control as a single item of a page for now.

Ext.define('CJ.view.search.MapPage', {
extend: 'CJ.view.Page',
alias: 'widget.searchMapPage',
requires: ['CJ.view.search.MapPanel',//requiring MapPanel, the custom map control
'CJ.view.search.Map'], //and the extended map itself, I'll be adding some marker rendering logic there
config: {
layout: 'fit',
items: [
{
xtype: 'toolbar',
items: [
{
xtype: 'spacer'
},
{
xtype: 'navButtonNavigate',
text: CJ.t('Filter list view'),
ui: 'round',
page: 'searchFilterPage'
}
],
docked: 'top'
},
{
xtype: 'mapcontrol'
}
]
}
});
3) MapPanel. Component that holds the map and top/bottom bars:

Ext.define('CJ.view.search.MapPanel', {
extend: 'Ext.Panel',
alias: 'widget.mapcontrol',
requires: ['CJ.view.search.Map'],//this is extended map control
layout: 'fit',
config: {
items: [
{
xtype: 'panel',
html: '€ 30.00 Electronic',
// height: 50,
ref: 'dealDetail',
docked: 'top'
},
{
xtype: 'searchMap',
ref: 'map'
},
{
xtype: 'panel',
html: 'Falcon street 25, 81541 Munchen',
docked: 'bottom'
}
]
}
});
4) Map control. Nothing special, just extension for now.


Ext.define('CJ.view.search.Map', {
extend: 'Ext.Map',
alias:'widget.searchMap',
config: {
useCurrentLocation: true
}
});

The main problem is that layout:fit does not set correct height for the innermost map component. I could not find what the problems is, but now it simply does not show anything in the panel. Top and bottom bars are in their places. The DIV for the map (created by layout) is there, dimensions are correct.
I did the hack now to make it work (MapPanel):

constructor: function () {

this.callParent(arguments);
this.on('painted', this.fixMap, this);
},
fixMap: function(){
this.map = this.down('[ref=map]');
this.map.setHeight(this.getEl().down('.x-body').getHeight()); //dirty hack! TODO: fix this
}
This does the job, but it's not the full solution: I need to handle resize, destroy etc. This also degrades performance a bit.

How can this be fixed correctly? Is the deep component nesting a problem here?

mitchellsimoens
21 Dec 2011, 2:44 PM
In your CJ.view.search.MapPanel class, you have set the layout outside of the config object. So the layout needs to be within the config object.

Another thing is it looks like you are trying to use fit layout when you have 3 items specified. You need to use a different layout like vbox and specify flex on the map.

KJedi
22 Dec 2011, 7:56 AM
Thanks a lot!

Still mixing that config with ExtJS4, it is not necessary to specify it there in config:{}
I'm using fit with three items, but those two are docked. The problem is fixed now, thanks a lot, Sencha Touch ninja :)