PDA

View Full Version : Panel in tab + google map -> rendering problem



Ujoux
7 Nov 2008, 5:12 AM
Hello,

I'm new to extjs, it looks fantastic but i'm stuck on something that i thought was trivial.

I just want a tab panel and in the first tab i want a panel with a map (Ext.ux.GMapPanel.js).

Problem:
The panel in the tab is only rendered after i show the firebug window (f12).
If i close firebug the panel disappears.

Here is the code:


Ext.onReady(function(){

// tabs
var tabs = new Ext.TabPanel({
renderTo: document.body,
activeTab: 0,
width:940,
height:495,
plain:true,
defaults:{autoScroll: true},
items:[{
title: 'Tab 1',
items:[
new Ext.Panel({
layout:'border',
items: [{
region:'west',
margins: '5 0 0 5',
cmargins: '5 5 0 5',
width: 200,
minSize: 100,
maxSize: 300
},{
region:'center',
margins: '5 5 0 0',
listeners:{
render: function(panel){
map = new GMap2(panel.body.dom);

panel.body.setHeight(400);

map.setCenter(new GLatLng(50.5230, 4.8751), 9);
map.checkResize();
}
}
}]
})
]
}
]
});
});Please help me :-|
Thanks

7 Nov 2008, 6:48 AM
you may need ot call panel.doLayout. some how the window's resize event is causing your panel to resize it's child. Also, set the panel's layout to fit.

skaue
7 Nov 2008, 11:51 AM
On every page where I'm using this to make sure resizing doesn't mess with the layout:


Ext.EventManager.onWindowResize(function() { Ext.getCmp('ID_OF_OUTER_PANEL').doLayout() });


Since I am not using Viewport, this is the only way I can make sure the layout stays ok when resizing the page.

Ujoux
8 Nov 2008, 3:44 AM
you may need ot call panel.doLayout. some how the window's resize event is causing your panel to resize it's child. Also, set the panel's layout to fit.
It works, thanks :D


On every page where I'm using this to make sure resizing doesn't mess with the layout:


Ext.EventManager.onWindowResize(function() { Ext.getCmp('ID_OF_OUTER_PANEL').doLayout() });
Since I am not using Viewport, this is the only way I can make sure the layout stays ok when resizing the page.
Thanks for the advice !

Ujoux
8 Nov 2008, 3:51 AM
Here is the working code:


var tabs = null;
var map = null;

Ext.onReady(function(){
// tabs
tabs = new Ext.TabPanel({
renderTo: document.body,
activeTab: 0,
width:940,
height:495,
plain:true,
defaults:{autoScroll: true},
items:[{
layout: 'fit',
title: 'Tab 1',
items:[
new Ext.Panel({
layout:'border',
items: [{
region:'west',
margins: '5 0 5 5',
cmargins: '5 5 5 5',
width: 200,
minSize: 100,
maxSize: 300
},{
region:'center',
margins: '5 5 5 5',
listeners:{
render: function(panel){
map = new GMap2(panel.body.dom);

panel.body.setHeight(400);

map.setCenter(new GLatLng(50.5230, 4.8751), 9);
map.checkResize();
}
}
}]
})]
}]
});
tabs.items.items[0].doLayout();
map.checkResize();
});