Results 1 to 7 of 7

Thread: Form showing on ipad but not iphone

  1. #1
    Sencha Premium Member
    Join Date
    Mar 2010
    Posts
    63

    Default Form showing on ipad but not iphone

    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.

    Code:
    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: '[email protected]'
                    },
                    {
                        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: '[email protected]',
                                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'
                }]
            });
        }
    });

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    Your "My Locations" tab doesn't have any layout, try adding a layout: 'fit'
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Sencha Premium Member
    Join Date
    Mar 2010
    Posts
    63

    Default

    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?

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

  4. #4
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    A form can't be fullscreen if it's the child of another item!
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  5. #5
    Sencha Premium Member
    Join Date
    Mar 2010
    Posts
    63

    Default

    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?

  6. #6
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  7. #7
    Sencha Premium Member
    Join Date
    Mar 2010
    Posts
    63

    Default

    thank you!!

Similar Threads

  1. Great article for tips on optimizing performance on the iPhone and iPad
    By gpenston in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 6 Mar 2013, 6:19 AM
  2. iPhone, iPad Emulators
    By nobosh in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 6 Jul 2010, 12:47 PM
  3. Testing iPad app without iPad
    By Sesshomurai in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 29 Jun 2010, 5:45 AM
  4. Replies: 0
    Last Post: 19 May 2010, 7:52 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •