PDA

View Full Version : iPad layout problem



ssdesign
21 Jul 2010, 6:47 AM
Hi,
How do I make a layout for iPad?

I am trying to make a full screen app for iPad and was trying to do this.

Here is the skeleton of my app.

As you can see, the maximum height rendered in browser is 440 pixels.
How can I make it so that it reached the height of 1024 pixels?



Ext.ns('IApp');


IApp.Index = {
index : function() {
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
width: 768,
height: 1024,
align: 'stretch'
},
items: [{
height: 170,
html: '<div style="background-color: red; height:170px">&nbsp;</div>'
},{
flex: 1,
//carousel
layout: {
type: 'hbox',
height: 750,
align: 'stretch'
},
items: [{
width: 50,
html: '<div style="background-color: #0000ff; height: 750px">&nbsp;</div>'
},
{
flex: 1,
width: 50,
html: '<div style="background-color: #ffff00; height: 750px">&nbsp;</div>'

}]
},{
flex: 1,
//description
height: 20,
html: '<div style="background-color: #00ff00; height: 20px">&nbsp;</div>'
}]
});
}
};


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
IApp.Index.index();
}
});


Thanks

evant
21 Jul 2010, 7:10 AM
You can't give an item a flex ~and~ a height.



Ext.ns('IApp');


IApp.Index = {
index: function(){
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
height: 170,
html: '<div style="background-color: red; height:170px">&nbsp;</div>'
}, {
flex: 1,
//carousel
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
width: 50,
html: '<div style="background-color: #0000ff; height: 750px">&nbsp;</div>'
}, {
flex: 1,
width: 50,
html: '<div style="background-color: #ffff00; height: 750px">&nbsp;</div>'

}]
}, {
//description
height: 20,
html: '<div style="background-color: #00ff00; height: 20px">&nbsp;</div>'
}]
});
}
};


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
IApp.Index.index();
}
});

ssdesign
21 Jul 2010, 7:29 AM
cool.
thanks.