Sencha Touch 2 + Phonegap + Sencha SDK Tools

**testvogel** · 6 Jan 2012 7:56 AM

Hi,

I’m trying to use the Sencha SDK Tools 2 by following the guide at

http://robertdougan.com/posts/packag...ncha-sdk-tools

The first problem is that the example application is not working for me as long as I’m using the sencha-touch-debug.js. If I’m including the sencha-touch-ALL-debug.js the application is running fine. I get the following errors by using the sencha-touch-debug.js:

Code:

1.          GET http://192.168.137.1:800/cocktails/lib/touch2/src/app/Application.js?_dc=1325861770517 404 (Not Found)
1.          GET http://192.168.137.1:800/cocktails/lib/touch2/src/event/Dispatcher.js?_dc=1325861770517 404 (Not Found)
1.          GET http://192.168.137.1:800/cocktails/lib/touch2/src/dom/CompositeElementLite.js?_dc=1325861770517 404 (Not Found)
1.          GET http://192.168.137.1:800/cocktails/lib/touch2/src/event/publisher/Dom.js?_dc=1325861770544 404 (Not Found)

Also the sencha create jsb command is not working if I’m using the sencha-touch-debug.js (sencha-touch-all-debug.js is working fine).
Is this an mistake in your guide or do I something wrong?

My own project is using phonegap with plugins because I’m using some device capabilities and I’m unable to build the jsb file. I don’t get any error message, but the jsb is looking like this:

Code:

{
    "projectName": "Project Name",
    "licenseText": "Copyright(c) 2011 Company Name",
    "builds": [
        {
            "name": "All Classes",
            "target": "all-classes.js",
            "options": {
                "debug": true
            },
            "files": []
        },
        {
            "name": "Application - Production",
            "target": "app-all.js",
            "compress": true,
            "files": [
                {
                    "path": "",
                    "name": "all-classes.js"
                },
                {
                    "path": "",
                    "name": "app.js"
                }
            ]
        }
    ],
    "resources": []

Here are my index.html and app.js. Does anyone have some ideas what the problem is?

index.html

Code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>sencha phonegap demo</title>
    <link rel="stylesheet" type="text/css" href="lib/css/sencha-touch.css">
    <link rel="stylesheet" type="text/css" href="lib/css/myStyle.css">
    
    <script type="text/javascript" src="app/app.js"></script>
    <script type="text/javascript" src="lib/js/phonegap-1.3.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="lib/js/phonegap-nfc-0.2.0.js"></script>
    <script type="text/javascript" src="lib/js/sencha-touch-all-debug.js"></script>
    <script type="text/javascript" src="lib/js/sha256.js"></script>
	<script type="text/javascript" src="lib/js/barcodescanner.js"></script>   
   
	<script type="text/javascript">
        document.addEventListener("deviceready", mainLaunch, false);
    </script> 
</head>
<body></body>
</html>

app.js

Code:

function mainLaunch(){
	Ext.Loader.setConfig({ enabled: true });


	Ext.application({
		name: 'MyPhoneGapApp',  
		appFolder: 'app',
		models: ['Customer','MyModel'],
		controllers: ['MainController','ProfileController']	,
	});
}

I've also added the required classes at my views. Maybe I forget something but I think than I should get an error message?

Any ideas or hints would be great...

**mitchellsimoens** · 6 Jan 2012 8:10 AM

While developing your MVC app, you should only use sencha-touch-debug.js not one of the sencha-touch-all JS files. You should not have any console warnings about dynamically loading a class as you should use the requires/uses/views/etc configs in your application classes and Ext.require for things you need loaded upfront. This is what tells the SDK Tools how to create a JSB3 file that is used for the final build. You are getting 404 errors I am assuming because you didn't use the requires configs so the SDK Tools didn't know to include those classes.

**testvogel** · 6 Jan 2012 8:20 AM

I get the 404 errors by using the cocktails example...

**mitchellsimoens** · 6 Jan 2012 8:21 AM

What cocktails example?

**testvogel** · 6 Jan 2012 8:32 AM

https://github.com/rdougan/cocktails-app

**mitchellsimoens** · 6 Jan 2012 8:43 AM

So it's using the requires correctly but after you use the SDK Tools it is still loading these files event after you change from using app.js to app-all.js?

**testvogel** · 6 Jan 2012 9:01 AM

I get the four 404 errors before I'm using the SDK tools. After using the sdk tools i get much more 404 errors...

**mitchellsimoens** · 6 Jan 2012 9:02 AM

So the SDK Tools aren't building the JSB3 file correctly for you? Odd as it worked no problems for me.

**testvogel** · 6 Jan 2012 9:07 AM

I cannot open the example application (without any modifications) in a browser by using the sencha-touch-debug.js. I always get these 404 errors.

The jsb file is build without any problems but I cannot open the app in a browser. I always get some 404 errors

**rdougan** · 6 Jan 2012 12:48 PM

You need to follow the blog post in order for the example to work.

1. Clone the repository
2. Download ST2 and put it inside a lib/touch2 folder

At this point index-debug.html should work

3. Build the jsb3 file by running `sencha create jsb -a http://localhost/cocktails/index-debug.html -p app.jsb3`
4. Updating the jsb3 file to include ST2 (under 'Updating the JSB3 File' in the blog post)
5. Build the compiled JS files by running `sencha build -p app.jsb3 -d .`

index.html should now work.

Sencha Touch 2 + Phonegap + Sencha SDK Tools

Thread Tools

Search Thread

Display

Unanswered: Sencha Touch 2 + Phonegap + Sencha SDK Tools

Unanswered: Sencha Touch 2 + Phonegap + Sencha SDK Tools