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

  2. #2
    Ext GWT Premium Member
    Join Date
    Jul 2010
    Posts
    17
    Vote Rating
    0
    Philippe Quemener is on a distinguished road

      0  

    Default


    bump

  3. #3
    Ext GWT Premium Member
    Join Date
    Jul 2010
    Posts
    17
    Vote Rating
    0
    Philippe Quemener is on a distinguished road

      0  

    Default


    If there is anything unclear or if more information is needed, please let me know.

  4. #4
    Ext GWT Premium Member
    Join Date
    Jul 2010
    Posts
    17
    Vote Rating
    0
    Philippe Quemener is on a distinguished road

      0  

    Default


    bump

  5. #5
    Ext GWT Premium Member
    Join Date
    Jul 2010
    Posts
    17
    Vote Rating
    0
    Philippe Quemener is on a distinguished road

      0  

    Default


    I found the solution myself. The Problem was some quite funny constructs I used due to my little experience with sencha touch. Solution is the following: The onReady function should begin like this:
    Code:
    
    panel = new Ext.Panel(
            {
                fullscreen: true,
                id: MAIN,
                layout: 'card',
                cardSwitchAnimation: 
                {
                    type: 'slide',
                    cover: true
                },
                defaults: 
                {
                    scroll: 'vertical'
                },
                dockedItems: 
    ...
    

    I deleted the unnecessary Tabbar, the panel should be a Ext.Panel, not a TabPanel and gets a card-layout.

    Although I found the solution, I still think that this is a bug in sencha touch. But anyway. I can continue programming.

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."