PDA

View Full Version : Form showing on ipad but not iphone



LostSoul
14 Jul 2010, 2:17 PM
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
14 Jul 2010, 5:13 PM
Your "My Locations" tab doesn't have any layout, try adding a layout: 'fit'

LostSoul
15 Jul 2010, 5:03 AM
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
15 Jul 2010, 5:07 AM
A form can't be fullscreen if it's the child of another item!

LostSoul
15 Jul 2010, 5:10 AM
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
15 Jul 2010, 5:10 AM
http://www.sencha.com/deploy/touch/docs/

LostSoul
15 Jul 2010, 5:16 AM
thank you!!