Sencha Touch – create your first app

Pals,

This tutorial is completely based on what and how i learned in creating sencha environment and my first app in sencha. This completely i followed the documentation of sencha docs and summarised in an easy manner with simple explanation. Hope its clear now.

Steps:

You can browse this article or see the installation procedure with sencha cmd from here (or) else you can try in a simple way as how i mentioned in steps.

I am going to create a simple hello world in sencha..

Download and unzip Sencha Touch. You can unzip the software to any directory.

Sencha Touch requires Chrome or Safari. ( hope you are aware of using emulator in chrome. if not pls check here)

Downloading Sencha Touch

If you haven’t already done so, download the Sencha Touch SDK. The distribution includes extensive documentation, example applications, build resources, and, most importantly, the JavaScript libraries and CSS stylesheets required to run Sencha Touch applications.

The SDK may seem like a large download, but the requirements for a production Sencha Touch application are only two files within it: the framework’s JavaScript library and the CSS stylesheet. By default, these are named sencha-touch-all.js and sencha-touch.css respectively, and you should easily be able to find them in the SDK.

Application structure
For the sake of this article, create a new folder called hello-world, and place an empty file calledindex.html within it. Copy (or symlink) your Sencha Touch SDK as a subdirectory calledlib/touch, next to it, so that the file structure looks like this:

p1

The HTML file

Sencha Touch applications are bootstrapped with an HTML5 document, which contains references to JavaScript and CSS resources. These will include the two core files above, but also the application code that you’ll develop yourself. Open up index.html in your favorite editor and add the following:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>Hello World</title> 
 
        <script src="lib/touch/sencha-touch-all.js" type="text/javascript"></script> 
        <link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" /> 
 
    </head> 
    <body></body> 
</html>

The application code

Normally, you’ll be developing your applications’ JavaScript in a separate file (or files) and then linking to them in the same way that we have done for the Sencha Touch library, above. But for the very simplest of applications (like this one), it is also possible to embed our application’s JavaScript into the HTML itself, inside a <script> tag within the document’s <head>:

<script type="text/javascript"> 
 
    Ext.application({
        launch: function () {
            Ext.create('Ext.Panel', {
                fullscreen: true,
                html: 'Hello World!'
            });
        }
    });
 
</script>

 

Now execute it and you can see like below..

30-07-2014 16-04-19

 

For more: http://www.sencha.com/learn/hello-world/

 

Note: You even can add the script file in app.js file in your project folder and finally include like this..

<script src=”app.js”></script>

This will also work same 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s