1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    5
    Vote Rating
    0
    evilbrot is on a distinguished road

      0  

    Default LoadMask issue with PhoneGap and iOS 5

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,604
    Vote Rating
    818
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    5
    Vote Rating
    0
    evilbrot is on a distinguished road

      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.

Thread Participants: 1