Results 1 to 3 of 3

Thread: LoadMask issue with PhoneGap and iOS 5

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    5
    Vote Rating
    0
      0  

    Default LoadMask issue with PhoneGap and iOS 5

    Hello everyone,

    after Upgrading to iOS 5, i encountered a really strange behavior in Sencha Touch. I don't know whether it's related to Sencha Touch or PhoneGap so i did not post it as a bug.

    So this is what happens: I have a simple Panel with a text box and a button. If you enter something in a textfield and trigger the "action" event by taping on the return key i want to show a loading mask. But sometimes the transparency for the load mask seems to be broken. When i trigger the the event by taping on the button the load mask will be shown correctly.

    This issue first occured under iOS 5.0, while under iOS 4.3 i had no problems with this.

    If i run the app in my local web browser everything runs fine. Also when i implement the Winre debugger and highlight the mask element in the inspector in will be displayed with the desired transparency again

    Also this seems to depend on the string you enter in the textfield. I found it most likely to happen if you enter a one digit number.

    I know this sounds totally wired. I have no clue why this happens

    Here is some example code to reproduce this behavior (tested with Sencha Touch 1.1.1 and PhoneGap 1.2 on iOS 5.0/5.0.1):

    app.js
    PHP Code:
    Ext.regApplication({
        
    name'app',
        
    launch: function() {
            
    this.launched true;
            
    this.mainLaunch();
        },
        
    mainLaunch: function() {
            if (
    /*!device ||*/ !this.launched) {return;}
            
            
    this.views.viewport = new Ext.Panel({
                
    fullscreentrue,
                
    items: [{
                    
    xtype'textfield'
                
    }, {
                    
    xtype'button',
                    
    text'action',
                    
    handler: function() {
                        
    app.views.viewport.getComponent(0).blur();
                        
    app.views.viewport.fireEvent('action');
                    }
                }],
                
    listeners: {
                    
    action: function() {
                        
    this.setLoadingtrue );
                        var 
    task = new Ext.util.DelayedTask(function(){
                            
    this.setLoadingfalse );
                        }, 
    this);
                        
    task.delay1000 );
                    }
                }
            });
        }
    }) 
    index.html
    HTML Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title>App</title>
            
            <meta charset="utf-8">
    
    
            <script type="text/javascript" src="touch/sencha-touch.js"></script>
            <link href="touch/resources/css-debug/apple.css" rel="stylesheet" type="text/css" />
            <script type="text/javascript" src="app/app.js"></script>
            
            <script type="text/javascript" src="phonegap-1.2.0.js"></script>
            
            <script type="text/javascript">
                document.addEventListener("deviceready", app.mainLaunch, false);
            </script>
        </head>
        <body>
        </body>
    </html>
    Hope somebody can help me with this.

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Vote Rating
    1272
      0  

    Default

    Just tried

    Code:
    new Ext.Panel({
        fullscreen: true,
        items: [{
            xtype: 'textfield'
        }, {
            xtype: 'button',
            text: 'action'
        }],
        listeners: {
            afterrender: function() {
                this.setLoading( true );
                var task = new Ext.util.DelayedTask(function(){
                    this.setLoading( false );
                }, this);
                task.delay( 1000 );
            }
        }
    });
    Outside of phonegap and it works perfectly. Not sure what phonegap would be doing.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    5
    Vote Rating
    0
      0  

    Default

    Yeah that's the strange thing... Running the code in a normal web browser works fine. But with PhoneGap i get the blank screen caused by the LoadMask overlay BUT ONLY i if i trigger the action event via the return key on the keyboard.

Posting Permissions

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