Sencha Project

Folks,

From prev example in last article. Have some small notes with little more explanation.

31-07-2014 13-11-01

From the above pic initially i created a sample named project in c drive. Prior to that i have copied sencha touch files to c drive and specified the path clearly as shown above.

While creating a registration view:

Sencha generate form Registration “name1:text”,“name2:text” registrationform.

In step4. point2-> replace the code in Registration view with sample code.

In step4.point4-> create a data folder in your project folder and have a file name with Server.json.

Finally folder structure will be like this..

31-07-2014 13-33-38

31-07-2014 13-33-50

Note: Once all the above procedure done and when you run your application you will be shown with the following image

31-07-2014 15-12-43

this will be shown in generally if application get stuck while running. you should find errors in console log. My error is package.json is not loading..for this very simple solution is :

31-07-2014 15-14-09

or try sencha app build

Still if you find the errors? try exploring below sites:

http://www.sencha.com/forum/showthread.php?278822-bootstrap.json-404-(not-found)

http://www.sencha.com/forum/tags.php?tag=bootstrap.json

http://stackoverflow.com/questions/23007986/sencha-touch-2-failed-to-load-bootstrap-json

You can even try this: http://www.sitepoint.com/first-steps-in-sencha-touch/

http://javatechig.com/sencha-touch/getting-started-with-sencha-touch

Advertisements

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 🙂