PDA

View Full Version : Display a map and a button in a panel with vbox layout



heringsfilet
25 Mar 2011, 7:33 AM
Hi,

I'm facing some problems when trying to build my first sencha touch app.
I want to have a Panel with a VBox layout. At the top should be a button and below there should be a (google) map. So I tried the following code:



app.views.MapView = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'button',
text: 'do something',
ui: 'round'
},
{
xtype: 'map',
useCurrentLocation: true,
mapOptions: {
zoom: 12
}
}
],
initComponent: function() {
app.views.MapView.superclass.initComponent.apply(this, arguments);
}
});

This will result to the screen "map_without_flex".

In my position (not to know where the problem lies) I added to the map item the flex property:


app.views.MapView = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'button',
text: 'do something',
ui: 'round'
},
{
xtype: 'map',
useCurrentLocation: true,
flex: '1',
mapOptions: {
zoom: 12
}
}
],
initComponent: function() {
app.views.MapView.superclass.initComponent.apply(this, arguments);
}
});

This makes the map visible, at least a bit, as seen on the screen "map_with_flex".

Does anyone knows where the problem could be?

kalor
22 Nov 2011, 4:55 PM
what happens when you add "layout: 'fit'" to the map?