PDA

View Full Version : Docks not resizing when 2 are placed at the top.



blessan
24 Jul 2010, 2:48 AM
I am making an app which has a main panel with a dock at the top with a button. The dock will be common for all the other pages in the app.
In my home page, i list a couple of icons and when one is pressed the inner panel slides to show another panel.
Now in my new panel which has its on dock at the top. I want it to place right beneath the main dock. Its all rendering properly at the beginning but when I turn my iphone to landscape, the 2nd dock gets resized properly but my main dock doesn't.
Can some one please help me.
It wasnt easy getting the layout correct. I am including my code. I pretty sure it might be a wrror in the structure of the layout.



Ext.setup({
icon: 'icon.png',
db:null,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
var mainPanel=new Ext.Panel({
fullscreen:true,
scroll: 'none',
layout:'card',
activeItem:0,
items:[
{
xtype:'panel',
id:'innerContainer',
layout:'card',
style:'background-color:black;',
items:[
{
xtype: 'panel',
id:'homePanel',
scroll:'vertical',
html:''
},
{
xtype:'panel',
layout:'card',
scroll: 'vertical',
id:'calendarPanel',
style:'background-color:white;',
html:'<div id="calendar"></div>',
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
layout: {
pack: 'justify',
align: 'center'
},
items: [
{
xtype: 'button',
ui: 'action',
text: 'Month',
handler: function() {
}
},
{
xtype: 'button',
ui: 'action',
text: 'Week',
handler: function() {
}
},
{
xtype: 'button',
ui: 'action',
text: 'Day',
handler: function() {
}
}
]
},
{
xtype: 'toolbar',
dock: 'top',
id:'calendar_top_toolbar',
title: '',
layout: {
pack: 'justify',
align: 'center' // align center is the default
},
items: [
{
xtype: 'button',
ui: 'action',
text: '<',
handler: function() {
}
},
{xtype: 'component', flex: 1},
{
xtype: 'button',
ui: 'action',
text: '>',
handler: function() {
}
}
]
}]
}
]
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
id:'calendar_top_toolbar',
layout: {
pack: 'justify',
align: 'center' // align center is the default
},
items: [
{
xtype: 'button',
ui: 'normal',
text: '',
baseCls:'ubHomeButton',
maxWidth:35,
maxHeight:35,
minWidth:35,
minHeight:35,
handler: function() {
}
},
{xtype: 'component', flex: 1},
{
xtype: 'button',
ui: 'normal',
text: 'test',
handler: function() {
}
}
]
}
]
});

if (Ext.platform.isPhone||Ext.platform.isTablet) {
mainPanel.fullscreen = true;
} else {
Ext.apply(mainPanel, {
fullscreen: true,
floating: true,
modal: false,
centered: true,
hideOnMaskTap: false,
autoWidth:true,
autoHeight:true
});
}
mainPanel.show();

}

}
);

blessan
24 Jul 2010, 2:59 AM
This is the how the panel should look properly. But when the phone is made landscape the top most dock does not resize.
http://img834.imageshack.us/img834/941/screenshotv.png

blessan
24 Jul 2010, 4:07 AM
I think 2 of my toolbars had the same id. I corrected that and everything seems to work.