Sencha Touch is the latest and most powerful of web app frameworks. Web apps are mobile applications that run on a web browser (just browse the URL) but, with the look, feel and functionality of a native app
There are many examples out there for Sencha Touch but, I couldn’t find one that explains the absolute basic outline of a Sencha Touch project. Here I will explain what the basic outline of a Sencha Touch project looks like:
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <title>Learn Sencha</title> <script src="lib/touch/sencha-touch.js" type="text/javascript"></script> <link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" /> <script> Ext.setup({ onReady: function() { // This is the absolute skeleton of a Sencha Touch file. // When the DOM is ready for you to play with, this function will be called. // All your Sencha Touch code should go in here. } }); </script> </head> <body></body> </html> |
It is always recommended not to embedded Javascript inline like this. Preferably, create a file called app.js and put the Javascript code in it. Include the js file in your HTML. So, finally you will end up with 2 files like this:
index.html
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title>Learn Sencha</title> <script src="lib/touch/sencha-touch.js" type="text/javascript"></script> <link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" /> <script src="app.js" type="text/javascript"></script> </head> <body></body> </html> |
app.js
|
1 2 3 4 5 6 7 |
Ext.setup({ onReady: function() { // This is the absolute skeleton of a Sencha Touch file. // When the DOM is ready for you to play with, this function will be called. // All your Sencha Touch code should go in here. } }); |
