Sencha Touch 2 and PhoneGap

**jeanluca** · 7 Feb 2012 6:05 AM

Hi

I'm trying to get Sencha Touch to work in Phonegap.

I have added the SDK stuff and my app.js looks like

Code:

Ext.setup({
          viewport: {
            autoMaximize: false
          },
          onReady: function() {
            console.log("ST2 READY") ;
            MyApp = new Ext.Application({
                                      name: "MyApp",
                                      controllers: [],
                                      models:[],
                                      stores:[],
                                      autoCreateViewport: true,
                                      launch: function() {
                                        console.log("CHECK") ;
                                      }
                                      });
          
            }
  });

I can see the 'ST2 READY' and 'Our first PhoneGap app' messages in the log but not the 'CHECK' which should be logged when 'launch' is called.
My index.html looks like

Code:

<!DOCTYPE html><html>
    <head>
        <title>Contacts</title>
        <script type="text/javascript" src="lib/touch/sencha-touch.js"></script>
        <link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="phonegap-1.4.1.js"></script>
        <script type="text/javascript" src="lib/touch/builds/sencha-touch-all-debug.js"></script>
        <script type="text/javascript" src="app/app.js"></script>
        
        <script type="text/javascript">
            document.addEventListener("deviceready", function () {
          console.log('Our first PhoneGap app');
        
        }, false);
        </script>
        
    </head><body></body>
</html>

Any suggestions ?

cheers
Luca

**mitchellsimoens** · 7 Feb 2012 9:08 AM

So in your deviceready event listener... you should check to see if ST's launch method has fired and if so then execute some method on the Application. I personally would execute the launch method again and have an if statement to check a property on the Application to see if it accounts to one...

Code:

Ext.application({
    ....
    counter : 0,

    launch : function() {
        if (this.counter !== 1) {
            this.counter += 1;
            return;
        }

        .....
    }
});

So ST will fire the launch method first usually and will add one to the counter making it one and stopping the execution. Then when the deviceready listener fires the launch method the couter is one so it will proceed.

**jeanluca** · 7 Feb 2012 11:15 AM

I'm not sure I understand. In the current setting the launch method is not called. So if I call the launch method inside the

deviceready event listener it still would be the first time. So there is no second time. So how does this work?

Furthermore, how would I call the 'launch' function manually ? Ext.application.launch() doesn't work!

Cheers
Luca

**mitchellsimoens** · 7 Feb 2012 11:24 AM

ST2 fires it and then you would fire it in the deviceready event = 2

**jeanluca** · 7 Feb 2012 12:18 PM

well thats my problem, ST doesn't fire anything. I've also copied the sencha-touch-all-debug.js file into the www folder (at the same level of phonegap-1.4.1.js)

Furthermore I copied the content of app.js into index.html. And still no launch event

Here is my index.html

Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Contacts</title>
        <link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="phonegap-1.4.1.js"></script>
        <script type="text/javascript" src="sencha-touch-all-debug.js"></script>
        <script type="text/javascript">
            document.addEventListener("deviceready", function () {
                console.log('Our first PhoneGap app');
                //console.log(Ext) ; --> Ext exists
                new Ext.Application({
                    launch: function () {
                        console.log("LLLLLLLLLAAAAAAUUUUUUUNCH") ;
                        }
                    });
                console.log("READY") ;
             }, false);
        </script>
        
    </head><body></body>
</html>

I only see 'Our first PhoneGap app' in the xcode debug console. Because the 'READY' message isn't printed I assume something should go wrong inside ST. But unfortunately the console doesn't log (runtime) errors. Should I include a different ST file ?

**rdougan** · 7 Feb 2012 1:57 PM

No no no.

Sencha Touch 2 automatically listens to the deviceready event when you are running with PhoneGap. All you have to do is define Ext.setup/Ext.application, and it will just work.

So your index page should look a little like this:

Code:

<!DOCTYPE html>
<html>
  <head>
	<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
	<script type="text/javascript" charset="utf-8" src="touch2/builds/sencha-touch-all-debug.js"></script>

	<link rel="stylesheet" href="touch2/resources/css/sencha-touch.css">

	<script type="text/javascript">

		Ext.application({
			name: 'MyApp',
			launch: function() {
				alert('launch');
			}
		});

	</script>
  </head>

  <body></body>
</html>

Obviously you need to update the paths to the files.

warning: This will not run in a normal browser. We'll fix this soon. Until then, to run it in the browser, just comment out the phonegap source tag.

**mitchellsimoens** · 7 Feb 2012 1:59 PM

Fantastic! Didn't know we do that

**rdougan** · 7 Feb 2012 2:20 PM

Here is a barebones example of a Sencha Touch 2 example wrapped in PhoneGap 1.2.0.

https://github.com/rdougan/barebones-phonegap

**jeanluca** · 7 Feb 2012 2:37 PM

the launch function is executed (at this point I have the same as in the example at https://github.com/rdougan/barebones-phonegap ). But I see an other problem.

I don't see anything happening on the screen. Here is my updated test code

Code:

<!DOCTYPE html><html>
  <head>
    <script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="sencha-touch-all-debug.js"></script>


    <link rel="stylesheet" href="lib/resources/css/sencha-touch.css">


    <script type="text/javascript">


        Ext.application({
            name: 'MyApp',
            viewport: { autoMaximize: false },
            launch: function() {
                alert("LAUNCH!!!!!!") ;


                Ext.define('Ext.Panel', {
                    config: {
                        layout: 'card',
                        items: [
                            {
                                html: "First Item"
                            },
                            {
                                html: "Second Item"
                            },
                            {
                                html: "Third Item"
                            },
                            {
                                html: "Fourth Item"
                            }
                        ]


                    }
                }) ;


            }


        });
        
        


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

I see the alert, but after that the screen remains black. The strange thing to note here is when I change the alert to console.log I don't see the LAUNCH!!! message appear in my debug console. Also, with the alert, it was shown before the debug console shows the initialization stuff:

2012-02-07 23:29:43.516 Test PhoneGap[26077:207] Device initialization: DeviceInfo = ....

Is the launch function fired before the device is ready ? Or is it something I do wrong with th viewport ?

**rdougan** · 7 Feb 2012 2:41 PM

The following works for me in my example:

Code:

Ext.application({
	name: 'MyApp',
	launch: function() {
		console.log('launch');

        Ext.Viewport.add([
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'PhoneGap'
            },
            {
                html: 'Content'
            }
        ]);
	}
});

And the console outputs this in Xcode:

Code:

2012-02-07 14:40:40.567 barebones-phonegap[98098:13403] Device initialization: DeviceInfo = {"name":"iPhone Simulator","uuid":"3F2F66B1-9717-563E-8FA3-D36DD16C0D1C","platform":"iPhone Simulator","gap":"1.2.0","version":"5.0","connection":{"type":"wifi"}};
2012-02-07 14:40:40.609 barebones-phonegap[98098:13403] [INFO] launch

Edit I updated my example on github to have this example.

Sencha Touch 2 and PhoneGap

Thread Tools

Search Thread

Display

Sencha Touch 2 and PhoneGap

Sencha Touch 2 and PhoneGap