Results 1 to 2 of 2

Thread: Need Help making my App responsive with iPhone 6

  1. #1
    Sencha User
    Join Date
    Aug 2017
    Posts
    44
    Answers
    1
    Vote Rating
    1
      0  

    Default Need Help making my App responsive with iPhone 6

    Code:
    Version:    4.2.2.282
    Channel:    4.2-stable
    Platform:    1.6.2.49 - darwin x64
    Renderer:    56.0.2924.87
    Cmd:    6.5.1.240
    Framework:Ext JS 6.5.x Classic
    
    I need help making this application looking better on Portrait mode. The app looks pretty good on landscape, but on portrait mode it's not scaling. What should be the best way to approach this issue. I know that I need to use responseConfig, but I'm not clear on how to make everything larger on portrait mode since the font and the rest of the app looks small and hard to read.

    I will link pictures of what I see on the chrome inspector.

    Portrait Mode - https://imgur.com/7y4qyyt
    LandScape Mode - https://imgur.com/ydjZWPI

    Code:
    Ext.define('TestingVP.view.MyTabPanel', {    extend: 'Ext.tab.Panel',
        alias: 'widget.mytabpanel',
    
    
        requires: [
            'TestingVP.view.MyTabPanelViewModel',
            'TestingVP.view.MyTabPanelViewController',
            'Ext.plugin.Responsive',
            'Ext.tab.Tab',
            'Ext.form.FieldSet',
            'Ext.toolbar.Toolbar',
            'Ext.menu.Menu',
            'Ext.menu.Item',
            'Ext.form.field.Number',
            'Ext.form.field.Date',
            'Ext.tab.Panel',
            'Ext.grid.Panel',
            'Ext.view.Table',
            'Ext.grid.column.Action'
        ],
    
    
        controller: 'mytabpanel',
        viewModel: {
            type: 'mytabpanel'
        },
        resizable: true,
        responsiveConfig: {
            
        },
        activeTab: 0,
    
    
        items: [
            {
                xtype: 'panel',
                title: 'Sign In',
                tabConfig: {
                    xtype: 'tab',
                    iconCls: 'x-fa fa-user-circle'
                },
                items: [
                    {
                        xtype: 'fieldset',
                        height: 130,
                        margin: 30,
                        title: 'My Fields',
                        items: [
                            {
                                xtype: 'textfield',
                                anchor: '100%',
                                itemId: 'emailVerification',
                                fieldLabel: 'Email',
                                inputType: 'email',
                                vtype: 'email'
                            },
                            {
                                xtype: 'textfield',
                                anchor: '100%',
                                itemId: 'passwordVerification',
                                fieldLabel: 'Password',
                                inputType: 'password'
                            },
                            {
                                xtype: 'toolbar',
                                layout: {
                                    type: 'hbox',
                                    pack: 'center'
                                },
                                items: [
                                    {
                                        xtype: 'button',
                                        itemId: 'logInButton',
                                        iconCls: 'x-fa fa-check-circle',
                                        text: 'Log In'
                                    },
                                    {
                                        xtype: 'button',
                                        itemId: 'cancelButton',
                                        iconCls: 'x-fa fa-window-close',
                                        text: 'Cancel'
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },
            {
                xtype: 'panel',
                title: 'Calculations',
                tabConfig: {
                    xtype: 'tab',
                    itemId: 'sizeToggle',
                    iconCls: 'x-fa fa-cubes'
                },
                dockedItems: [
                    {
                        xtype: 'toolbar',
                        dock: 'top',
                        html: 'Period',
                        layout: {
                            type: 'hbox',
                            padding: ''
                        },
                        items: [
                            {
                                xtype: 'button',
                                itemId: 'dayButtonStore',
                                margin: '0, 8, 0, 45',
                                text: 'D'
                            },
                            {
                                xtype: 'button',
                                text: 'W',
                                listeners: {
                                    click: 'weekClick'
                                }
                            },
                            {
                                xtype: 'button',
                                text: 'M',
                                listeners: {
                                    click: 'monthClick'
                                }
                            },
                            {
                                xtype: 'button',
                                text: 'Y',
                                listeners: {
                                    click: 'yearClick'
                                }
                            },
                            {
                                xtype: 'button',
                                text: 'MyButton',
                                menu: {
                                    xtype: 'menu',
                                    items: [
                                        {
                                            xtype: 'menuitem',
                                            text: 'Last Week'
                                        },
                                        {
                                            xtype: 'menuitem',
                                            text: 'Last Month'
                                        },
                                        {
                                            xtype: 'menuitem',
                                            text: 'Last Year'
                                        }
                                    ]
                                }
                            },
                            {
                                xtype: 'numberfield',
                                fieldLabel: 'Target',
                                labelWidth: 60
                            }
                        ]
                    },
                    {
                        xtype: 'toolbar',
                        dock: 'top',
                        items: [
                            {
                                xtype: 'datefield',
                                fieldLabel: 'From',
                                labelWidth: 40
                            },
                            {
                                xtype: 'datefield',
                                fieldLabel: 'To',
                                labelWidth: 40
                            },
                            {
                                xtype: 'button',
                                text: 'Show',
                                menu: {
                                    xtype: 'menu',
                                    width: 120,
                                    items: [
                                        {
                                            xtype: 'menuitem',
                                            text: 'Amount'
                                        },
                                        {
                                            xtype: 'menuitem',
                                            text: 'Menu Item'
                                        },
                                        {
                                            xtype: 'menuitem',
                                            text: 'Menu Item'
                                        }
                                    ]
                                }
                            }
                        ]
                    }
                ],
                items: [
                    {
                        xtype: 'tabpanel',
                        activeTab: 0,
                        items: [
                            {
                                xtype: 'panel',
                                title: 'Item Compare',
                                items: [
                                    {
                                        xtype: 'gridpanel',
                                        scrollable: false,
                                        store: 'hardCodeStore',
                                        viewConfig: {
                                            scrollable: 'both',
                                            width: '100%'
                                        },
                                        columns: [
                                            {
                                                xtype: 'gridcolumn',
                                                dataIndex: 'F1126',
                                                text: 'F1126'
                                            },
                                            {
                                                xtype: 'gridcolumn',
                                                dataIndex: 'F1127',
                                                text: 'F1127'
                                            },
                                            {
                                                xtype: 'gridcolumn',
                                                dataIndex: 'Date1',
                                                text: 'Date1'
                                            },
                                            {
                                                xtype: 'gridcolumn',
                                                dataIndex: 'Ttl1',
                                                text: 'Ttl1'
                                            },
                                            {
                                                xtype: 'gridcolumn',
                                                dataIndex: 'Rank1',
                                                text: 'Rank1'
                                            },
                                            {
                                                xtype: 'gridcolumn',
                                                dataIndex: 'Date2',
                                                text: 'Date2'
                                            },
                                            {
                                                xtype: 'gridcolumn',
                                                dataIndex: 'Ttl2',
                                                text: 'Ttl2'
                                            },
                                            {
                                                xtype: 'gridcolumn',
                                                dataIndex: 'Rank2',
                                                text: 'Rank2'
                                            },
                                            {
                                                xtype: 'gridcolumn',
                                                dataIndex: 'Diff',
                                                text: 'Diff'
                                            },
                                            {
                                                xtype: 'gridcolumn',
                                                dataIndex: 'DiffPercent',
                                                text: 'Diff Percent'
                                            },
                                            {
                                                xtype: 'actioncolumn',
                                                text: 'Detail',
                                                items: [
                                                    {
                                                        iconCls: 'x-fa fa-file-text-o',
                                                        tooltip: 'Detail'
                                                    }
                                                ]
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                xtype: 'panel',
                                title: 'Operator',
                                items: [
                                    {
                                        xtype: 'gridpanel',
                                        itemId: 'opConfiguration',
                                        scrollable: false,
                                        store: 'FinancialCompareStore',
                                        viewConfig: {
                                            scrollable: false
                                        },
                                        columns: [
                                            {
                                                xtype: 'gridcolumn',
                                                dataIndex: 'F1034',
                                                text: 'F1034'
                                            },
                                            {
                                                xtype: 'gridcolumn',
                                                dataIndex: 'F1039',
                                                text: 'F1039'
                                            },
                                            {
                                                xtype: 'gridcolumn',
                                                dataIndex: 'Date1',
                                                text: 'Date1'
                                            },
                                            {
                                                xtype: 'gridcolumn',
                                                dataIndex: 'Date2',
                                                text: 'Date2'
                                            },
                                            {
                                                xtype: 'gridcolumn',
                                                dataIndex: 'Diff',
                                                text: 'Difference'
                                            },
                                            {
                                                xtype: 'gridcolumn',
                                                width: 133,
                                                dataIndex: 'DiffPercent',
                                                text: 'Diff Percentage'
                                            },
                                            {
                                                xtype: 'gridcolumn',
                                                text: 'End'
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                xtype: 'panel',
                                title: 'Group Compare'
                            }
                        ]
                    }
                ]
            },
            {
                xtype: 'panel',
                iconCls: 'x-fa fa-space-shuttle',
                title: 'SW Data Panel',
                items: [
                    {
                        xtype: 'gridpanel',
                        store: 'swDataStore',
                        columns: [
                            {
                                xtype: 'gridcolumn',
                                dataIndex: 'name',
                                text: 'Name'
                            },
                            {
                                xtype: 'gridcolumn',
                                dataIndex: 'height',
                                text: 'Height'
                            },
                            {
                                xtype: 'gridcolumn',
                                dataIndex: 'birth_year',
                                text: 'Birth Year'
                            },
                            {
                                xtype: 'gridcolumn',
                                dataIndex: 'eye_color',
                                text: 'Eye Color'
                            },
                            {
                                xtype: 'gridcolumn',
                                dataIndex: 'gender',
                                text: 'Gender'
                            }
                        ]
                    }
                ],
                dockedItems: [
                    {
                        xtype: 'toolbar',
                        dock: 'bottom',
                        items: [
                            {
                                xtype: 'button',
                                text: 'MyButton'
                            }
                        ]
                    }
                ]
            },
            {
                xtype: 'panel',
                height: 304,
                width: 510,
                title: 'About Company',
                tabConfig: {
                    xtype: 'tab',
                    iconCls: 'x-fa fa-info-circle'
                }
            }
        ],
        plugins: [
            {
                ptype: 'responsive'
            }
        ]
    
    
    });
    I like the way landscape looks and would like a similar look to portrait.

    Any help would be greatly appreciated. Thanks so much for the help!

    Regards

    Jorge Cruz

  2. #2
    Sencha - Support Team bjdurham85's Avatar
    Join Date
    Mar 2014
    Posts
    927
    Answers
    53
    Vote Rating
    18
      0  

    Default

    Hi--,

    Have you tried also adding the responsive plugin as described in the API docs?

    http://docs.sencha.com/extjs/6.5.2/c...esponsive.html

    Regards,
    Bryan

Similar Threads

  1. Replies: 3
    Last Post: 13 Nov 2014, 3:45 PM
  2. Animator created app works in iPhone Simulator, how to get it on a real iPhone?
    By gctwnl in forum Sencha Animator Help & Discussion
    Replies: 5
    Last Post: 10 Feb 2012, 6:28 AM
  3. Testing iPhone app wihout iphone (or simulator): Chrome user agent spoofing?
    By charris in forum Sencha Touch 1.x: Discussion
    Replies: 10
    Last Post: 9 Jan 2012, 12:24 PM
  4. NestedList works in safari/chrome but not in iphone simulator or iphone
    By nakana123 in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 9 Aug 2011, 11:53 PM
  5. Replies: 4
    Last Post: 3 Dec 2010, 5:43 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
  •