PDA

View Full Version : Panels not loading until an orientation change happens. Help!!!



epiphanydigital
24 Aug 2011, 4:58 AM
The symptoms are pretty straightforward. I load the app and only the
MyDS.TopHeadingBar is displayed. Once I change the orientation of the device, the panels load normally. The app loads normally on a desktop browser. I've been trying for a while now to fix this and haven't been able to find any other solutions. Someone please help!


MyDS.TopHeadingBar = new Ext.Toolbar({
xtype : 'toolbar',
dock : 'top',
title : '<img style="height:70%;margin-top:10px;" src="img/logo.png" alt="My Dietary Supplements" ?>'
});

MyDS.MenuList = Ext.extend(Ext.List, {
id : 'menulist',
store : MyDS.MenuStore,
itemTpl : '<img class="listIcon" style="height:32px;float:left;margin-right:20px;" src="{icon}" alt="{title}" /><div style="float:left;"><p style="line-height:32px;">{title}</p></div>',
allowDeselect : false,
scroll : false,
onRender : function() {
MyDS.MenuList.superclass.onRender.apply(this, arguments);
this.store.load();
},
listeners: {
itemtap : function(record,index){
var current = record.store.getAt(index);
switch(current.data.nid) {
case 10: // Profiles
MyDS.MenuPanel.setActiveItem('profilepanel');
break;
case 11: // Factsheets
MyDS.ContentToolbar.setTitle(current.data.title);
MyDS.FactsheetToolbar.setTitle(current.data.title);
MyDS.MenuPanel.setActiveItem('factsheetpanel');
break;
case 15: // Settings
MyDS.MenuPanel.setActiveItem('settingspanel');
break;
default: // Load content into a panel
MyDS.ContentToolbar.setTitle(current.data.title);
MyDS.ContentPanel.update(current.data);
MyDS.MenuPanel.setActiveItem('contentpanel');
break;
}
}
}
});

Ext.reg('MenuList', MyDS.MenuList);

MyDS.Main = new Ext.Panel({
id : 'main',
scroll : 'vertical',
layout : 'fit',
items : MyDS.MenuList,
dockedItems : [{
dock : 'bottom',
html : (Ext.is.Phone ?
'<div style="text-align:center;"><img src="img/banner-sm.png" alt="" /></div>'
:
'<div style="text-align:center;"><img src="img/banner-lg.png" alt="" /></div>'
)
}]
});


MyDS.MenuPanel = new Ext.Panel ({
id : 'menulistpanel',
layout : 'card',
cardSwitchAnimation : 'slide',
fullscreen : true,
dockedItems : MyDS.TopHeadingBar,
items : [
MyDS.Main,
MyDS.ContentPanel,
MyDS.ProfilePanel,
MyDS.FactsheetPanel,
MyDS.FactsheetsContentPanel,
MyDS.ProfileFormPanel,
MyDS.SupplementPanel,
MyDS.SupplementFormPanel,
MyDS.SettingsPanel
]
});

MyDS.AppPanel = Ext.extend(Ext.Panel, {
fullscreen : true,
displayField : 'text',
store : MyDS.MenuStore,
initComponent : function() {
if (1===0) { //if (!MyDS.SettingsStore.getAt(0)) {
this.items = MyDS.StartWizard;
} else {
this.dockedItems = MyDS.MenuPanel;
}
MyDS.AppPanel.superclass.initComponent.call(this);
},
onStartWizardComplete : function() {
this.removeAll(true);
this.add(this.buildMenuPanel);
this.doComponentLayout();
}
});


If I use the following snippet instead (removing fullscreen and adding a fixed height), everything loads from the start, but at an incorrect height. Ideas?



MyDS.MenuPanel = new Ext.Panel ({
id : 'menulistpanel',
layout : 'card',
cardSwitchAnimation : 'slide',
//fullscreen : true,
height: 500,
dockedItems : MyDS.TopHeadingBar,
items : [
MyDS.Main,
MyDS.ContentPanel,
MyDS.ProfilePanel,
MyDS.FactsheetPanel,
MyDS.FactsheetsContentPanel,
MyDS.ProfileFormPanel,
MyDS.SupplementPanel,
MyDS.SupplementFormPanel,
MyDS.SettingsPanel
]
});