Threaded View

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext GWT Premium Member
    Join Date
    Jul 2010
    Posts
    17
    Vote Rating
    0
    Philippe Quemener is on a distinguished road

      0  

    Default iPhone: TabPanel is shifted wrongly when showing virtual keyboard

    iPhone: TabPanel is shifted wrongly when showing virtual keyboard


    Sencha Touch version tested:
    • 1.1.0
    • only default ext-all.css
    Platform tested against:
    • iOS 3.x
    • iOS 4
    • Android 2.3
    Description:
    • I have a TabPanel with 7 items. If I tap a TextField, the virtual keyboard appears and the panel is shifted also to the left (cf. screenshot). This happens only with iPhones with the portrait orientation. If I reduce the number of items of the tabpanel to 6 or less, it works (doesn't matter which items, just the number). But 7 or more leads to this behaviour. No problem with Android 2.3 (Galaxy i9000) or with horizontal orientation.
    Test Case:
    Code:
    var MAIN = "main";
    var SETTINGS = "settings";
    var panel = null;
    
    Ext.setup({
        onReady: function() 
        {
            panel = new Ext.TabPanel(
            {
                id: MAIN,
                fullscreen: true,
                tabBar: 
                {
                    dock: 'bottom',
                    ui: 'light'
                },
                defaults: 
                {
                    scroll: 'vertical'
                },
                dockedItems: 
                [
                    {
                        xtype: 'toolbar',
                        dock: 'top',
                        title: 'Test',
                        id: 'titleBar'
                    }
                ],
                
                items:
                [
                    new LoginPanel(),
                    new SettingsPanel(),
                    new SettingsPanel(),
                    new SettingsPanel(),
                    new SettingsPanel(),
                    new SettingsPanel(),
                    new SettingsPanel()
                ]
            });
        }
    });
    
    
    
    
    LoginPanel = function()
    {
        LoginPanel.superclass.constructor.call(this); 
    };
    
    
    Ext.extend(LoginPanel, Ext.form.FormPanel, 
    {
        layout: 'vbox',
        scroll: 'vertical',
        id: "login",
        
        initComponent: function()
        {
            this.items = 
            [
                {
                    xtype: 'fieldset',
                    title: "Login",
                    items:
                    [
                        {
                            id: 'loginName',
                            xtype: 'textfield',
                            label: "User"
                        },
                        {
                            id: 'loginPassword',
                            xtype: 'passwordfield',
                            label: "Password"
                        }
                    ]
                }
            ];
            
            LoginPanel.superclass.initComponent.call(this);
        },
    
    
        submit : function()
        {
            this.onLogin(null, null);
        },
        
        onLogin : function(relogin, response)
        {
            panel.setActiveItem(SETTINGS, 'slide');
        }
    });
    
    
    Ext.reg('loginPanel', LoginPanel);
    
    
    SettingsPanel = function()
    {
        SettingsPanel.superclass.constructor.call(this); 
    };
    
    
    Ext.extend(SettingsPanel, Ext.Carousel, 
    {
        id : SETTINGS,
        scroll: 'vertical',
        initComponent: function()
        {
            this.items =  
            [
                new Ext.Panel({html: 'Test 1'}),
                new Ext.Panel({html: 'Test 2'})
            ];
            
            SettingsPanel.superclass.initComponent.call(this);
        }
    });
    Code:
    Ext.reg('settingsPanel', SettingsPanel);
    

    Steps to reproduce the problem:
    • Copy the code above in a file called test.js and create a file called test.html with the following content:<!DOCTYPE html>
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>CAESAR2Go</title>


      <!-- Sencha Touch CSS -->
      <link rel="stylesheet" href="sencha/resources/css/sencha-touch.css" type="text/css">

      <!-- Sencha Touch JS -->
      <script type="text/javascript" src="sencha/sencha-touch-debug.js"></script>

      <!-- Application JS -->
      <script type="text/javascript" src="test.js"></script>

      </head>
      <body></body>
      </html>

      Cut the items of the tabpanel to 6 or less to see the problem disappear.
    ScreenshotPS: I have no idea why I cannot correct the second code block to merge with the first one. But I think you will get the idea.

    Thank you very much for reading.
    Last edited by Philippe Quemener; 6 Oct 2011 at 11:53 PM. Reason: sometimes left and right are a hard to understand concept

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar