PDA

View Full Version : Need Layout Help in a big way...



Bucs
7 Dec 2010, 6:32 AM
I am trying to launch a simple viewport component that has a card layout, and I cannot for the life of me figure out why any of the items in the items collection will not show up, but the dockedItems do. Won't the card layout default to the first card? I had the items and dockedItems in an Ext.apply({)} function in initComponent but that didn't work either. I have also tried putting layout: {type: 'vbox', align: 'stretch'} on the cards thinking they need layouts too, and this will make them show up, but only if I remove the viewport's layout: 'card'. As soon as I set the viewport's layout to 'card', the items disappear. I know only one can appear at a time with card, but stumped as to why the first one also disappears.

Really, REALLY appreciate some help here and would love someone to school me on exactly what concept(s) I am missing here.

I have a launch function that looks like the following:


Ext.regApplication({
name : 'myApp',
defaultTarget: "viewport",
......

launch: function() {

this.viewport = new myApp.Viewport({
application: this
});

}

});


And this is supposed to launch a the following viewport component....but all that appears is the dockedItems, why won't the first card in the items collection appear by default? Do I need another layout somewhere? I am totally confused.



mmEngine.Viewport = Ext.extend(Ext.Panel, {
id : 'viewport',
fullscreen: true,
layout: 'card',
items: [
{
xtype: 'panel',
html: 'card1',
style: 'background-color: #f2f2f2',
height: 100
},
{
xtype: 'panel',
html: 'card2',
style: 'background-color: #f6f6f6',
scroll: 'vertical'
}
],
dockedItems: [
{
dock : 'top',
xtype: 'toolbar',
title: 'Titlebar'
},
{
dock : 'top',
xtype: 'toolbar',
ui : 'light',
items: [
{
text: 'Test Button'
}
]
}
],

initComponent: function() {

mmEngine.Viewport.superclass.initComponent.apply(this, arguments);
}
});

senchauser2010
7 Dec 2010, 6:47 AM
I faced a similar problem. Does the content of your card show up if you change the orientation of your device?

There is a bug with Ext.Application which causes this. Look at temporary solution proposed in this thread (http://www.sencha.com/forum/showthread.php?117639-Ext.regApplication-doesn-t-hide-iPhone-location-bar).

You'd need to add following lines to launch function as mentioned in the thread:

Ext.Viewport.init();
...
Ext.Viewport.onOrientationChange();

Bucs
7 Dec 2010, 7:01 AM
Dude, if I could reach through this computer and shake your hand I would. I just spent 4 hours chasing my tail on this one...that was the problem.

Thank so much for posting and helping a brutha out!