Form showing on ipad but not iphone

[LostSoul]

I have the tab2 example and I am trying to add the form example insite of the first tab, below I have the code posted.

My issue is this works fine on the ipad and in safari, but on the iphone the tab shows but the form does not show up, any help is appreciated.



Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function () {
Ext.regModel('User', {
fields: [{
name: 'name',
type: 'string'
},
{
name: 'password',
type: 'password'
},
{
name: 'email',
type: 'string'
},
{
name: 'url',
type: 'string'
},
{
name: 'rank',
type: 'string'
},
{
name: 'value',
type: 'int'
},
{
name: 'enable',
type: 'boolean'
},
{
name: 'cool',
type: 'boolean'
},
{
name: 'secret',
type: 'boolean'
}]
});

var formBase = {
scroll: 'vertical',

items: [{
xtype: 'fieldset',
title: 'Personal Info',
instructions: 'Please enter the information above.',
defaults: {
required: true,
labelAlign: 'left'
},
items: [{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
},
{
xtype: 'textfield',
name: 'disabled',
label: 'Disabled',
disabled: true
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email',
placeholder: 'you@domain.com'
},
{
xtype: 'urlfield',
name: 'url',
label: 'Url',
placeholder: 'http://google.com'
},
{
xtype: 'checkbox',
name: 'cool',
label: 'Cool'
},
{
xtype: 'spinnerfield',
name: 'spinner',
label: 'Spinner'
},
{
xtype: 'select',
name: 'rank',
label: 'Rank',
options: [{
text: 'Master',
value: 'master'
},
{
text: 'Student',
value: 'padawan'
}]
},
{
xtype: 'hidden',
name: 'secret',
value: false
},
{
xtype: 'textarea',
name: 'bio',
label: 'Bio'
},
{
xtype: 'slider',
name: 'height',
label: 'Height'
},
{
xtype: 'toggle',
name: 'enable',
label: 'Security Mode'
},
{
xtype: 'radio',
name: 'color',
label: 'Red'
},
{
xtype: 'radio',
name: 'color',
label: 'Blue'
}]
},
{
xtype: 'fieldset',
title: 'Favorite color',
defaults: {
xtype: 'radio'
},
items: [{
name: 'color',
label: 'Red'
},
{
name: 'color',
label: 'Blue'
},
{
name: 'color',
label: 'Green'
},
{
name: 'color',
label: 'Purple'
}]
},
{
xtype: 'fieldset',
title: 'HTML5',
items: [{
xtype: 'numberfield',
name: 'number',
label: 'Number'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'urlfield',
name: 'url',
label: 'URL'
}]
},
{
xtype: 'fieldset',
title: 'Single Select (in fieldset)',
items: [{
xtype: 'select',
name: 'options',
options: [{
text: 'This is just a big select',
value: '1'
},
{
text: '2',
value: '2'
}]
}]
},
{
xtype: 'fieldset',
title: 'Single Text (in fieldset)',
items: [{
xtype: 'textfield',
name: 'single_text'
}]
},
{
xtype: 'fieldset',
title: 'Single Toggle (in fieldset)',
items: [{
xtype: 'toggle',
name: 'single_toggle'
}]
},
{
xtype: 'fieldset',
title: 'Single Slider (in fieldset)',
items: [{
xtype: 'slider',
name: 'single_slider'
}]
}],

dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: 'Load Record',
ui: 'round',
handler: function () {
var user = Ext.ModelMgr.create({
name: 'Akura',
password: 'secret',
email: 'saru@extjs.com',
url: 'http://extjs.com',
value: 50,
enable: 1,
cool: true,
rank: 'padawan',
secret: true
}, 'User');

form.load(user);
}
},
{
xtype: 'spacer'
},
{
text: 'Reset',
handler: function () {
form.reset();
}
},
{
text: 'Save',
ui: 'action',
handler: function () {
console.log(form.getValues());
}
}]
}]
};

if (Ext.platform.isAndroidOS) {
formBase.items.unshift({
xtype: 'component',
styleHtmlContent: true,
html: '<span style="color: red">Forms on Android are currently under development. We are working hard to improve this in upcoming releases.</span>'
});
}

if (Ext.platform.isPhone) {
formBase.fullscreen = true;
} else {
Ext.apply(formBase, {
autoRender: true,
floating: true,
modal: true,
centered: true,
hideOnMaskTap: false,
height: 385,
width: 480
});


var form = new Ext.form.FormPanel(formBase);
form.show();
}
var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'light',
animation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical'
},
items: [{
title: 'My Locations',
//html: '<h1>MyLocations Card</h1>',
cls: 'card5',
iconCls: 'user',
itmes: [form]
},
{
title: 'Voicemail',
html: '<h1>Forwarding Card</h1>',
iconCls: 'info',
cls: 'card1'
},
{
title: 'Forwarding',
html: '<h1>Forwarding Card</h1>',
iconCls: 'favorites',
cls: 'card2'
//badgeText: '4'
},
{
title: 'OCS',
id: 'tab3',
html: '<h1>OCS Card</h1>',
//badgeText: 'Text can go here too, but it will be cut off if it is too long.',
cls: 'card3',
iconCls: 'download'
},
{
title: 'Corp Dir',
html: '<h1>corp dir Card</h1>',
cls: 'card4',
iconCls: 'settings'
}]
});
}
});

[evant]

Your "My Locations" tab doesn't have any layout, try adding a layout: 'fit'

[LostSoul]

Thanks for the reply, I added layout:'fit' to the my locations tab and had no luck getting the form to show on the iphone. any other ideas?


{
title: 'My Locations',
//html: '<h1>MyLocations Card</h1>',
cls: 'card5',
iconCls: 'user',
layout: 'fit',
itmes:[form]
}

[evant]

A form can't be fullscreen if it's the child of another item!

[LostSoul]

thank you for that, I guess I should of done more research into that. is there API for the sencha-touch so I don't make these mistakes that I should of read up on?

[evant]

http://www.sencha.com/deploy/touch/docs/

[LostSoul]

thank you!!