How to Create a Sencha Touch 2 App, Part 1

In this series we will create the Sencha Touch 2 version of the Notes Application, an application that allows its users to take notes and store them on the device running the app. Along the way, we will dive into the following areas:

  • The building blocks of a Sencha Touch application.
  • How to implement navigation in an application with multiple views.
  • How to edit data using Sencha Touch form elements.
  • How to render information using lists views.
  • How Sencha Touch stores data with HTML5 local storage.

Note: An expanded version of this tutorial that covers creating a production build of the application is available in my Sencha Touch book.

In the first part of the series, we are going to define the features of the application, its look and feel, and we will start building its main screen.

The Features Of The Notes App

We want our app to give its users the following abilities:

  • Create notes.
  • Edit existing notes.
  • Delete notes.
  • Render a list of the notes currently saved on the device.
  • Persist notes on the device running the application, across browser sessions.

The Application’s User Interface

The main screen of the Notes App will render a list of the existing notes. We will name this View NotesListContainer. Here is its mockup, depicting the Sencha Touch Components we will use to build it:

As you can see, the NoteListContainer View is an Ext.Container Component that hosts a Toolbar Component and a List Component. We will treat the Ext.Lit as a separate View – the NotesList View.

A second screen, the NoteEditor View, will allow users to create, edit and delete notes. This view will look just like the following mockup:

The NoteEditor View is an Ext.form.Panel Component that contains a couple of Toolbars and the form elements needed to edit a note’s properties.

We also need a mechanism for our users to navigate to these screens. As each Sencha Touch Application gets a Viewport instance upon launch, we will use the Viewport to take care of rendering the NotesListContainer and NoteEditor Views, as well as manage the navigation between them:

The Viewport is ideal for this task. It extends from the Container Class, and it defaults to a full screen Card layout, which is what we need in the Notes App.

Organizing A Sencha Touch Application In Directories And Files

With the application features and user interface already defined, we can begin writing the source code. We will organize our source code in a directories tree like this:

We will place our files under the NotesApp directory, with the Application’s setup code in the app.js file.

We will also have an app directory, in which we will have the controller, model, profile, store, and view directories. The controllers, models, profiles, stores and views used in the Application will reside in these directories.

The index.html file will launch the app. In it, we will include the Sencha Touch framework, along with our application:

<!--<!DOCTYPE html>
<html>
<head>--> <!--Remove comments!-->
    My Notes
<script type="text/javascript" src="../Lib/ST2/sencha-touch-debug.js"></script><script type="text/javascript" src="app.js"></script>
<!--</head>
<body>
</body>
</html>--> <!--Remove comments!-->

Note that we are keeping the framework files in the Lib/ST2 folder:

Creating a Sencha Touch Application Instance

Our first step in the app.js file will consist of creating an instance of the Sencha Touch Application Class. We are going to define an Application instance as follows:

Ext.application({
    name: "NotesApp",
    launch: function () {

        console.log("App launch");
    }
});

The application() method loads an Application instance after the page is ready, and it uses the supplied config object to configure the app. In our case, we are simply giving the app a name, and defining the launch() function.

One important role of the application() function is to trigger the load of any Models, Views, Controllers, Stores and Profiles the application depends on. This happens automatically when we define these dependencies using the models, views, controllers, stores and profiles config objects. We will see this feature in detail in this tutorial.

The launch() function is invoked as soon as the app loads its dependencies and instantiates its Controllers.

If we navigate to this page on the emulator, we should see something like this:

Extending Classes In Sencha Touch

We already know that the main screen of our application will render the list of notes currently cached on the device. To build this screen, we will use an instance of the Container Class, which will host a Toolbar and a List:

First, we will create the NotesListContainer.js file in the view directory:

In the NotesListContainer.js file, we will then define the NotesListContainer View like so:

Ext.define("NotesApp.view.NotesListContainer", {
    extend: "Ext.Container",
    config: {
        items: [{
            xtype: "toolbar",
            docked: "top",
            title: "My Notes",
            items: [{
                xtype: "spacer"
            }, {
                xtype: "button",
                text: "New",
                ui: "action",
                id:"new-note-btn"
            }]
        }]
    }
});

Here we are using Ext.define() to define an extension to the Ext.Container class. We have added a Toolbar instance to this view, docked to the top. The Toolbar will in turn contain one Button, the New button, which will allow our users to activate the NoteEditor View and create a new note.

Pay attention to how we included a Spacer Component before the button. This will place the New button on the right end of the Toolbar. Also, how the ui=”action” config allows us to give the button a distinctive look, indicating that it represents the default button on the view.

Specifying Application Dependencies In Sencha Touch

With the NotesListContainer Class defined, it is time to make the Application aware of it. Back in the app.js file, we are going to add the views config to the application() function:

Ext.application({
    name: "NotesApp",
    views: ["NotesListContainer"],

    launch: function () {

        var notesListContainer = Ext.create("NotesApp.view.NotesListContainer");
        Ext.Viewport.add(notesListContainer);
    }
});

We inform the Application that it has a dependency on the NoteListContainer View by using the views config:

views: ["NotesListContainer"]

The Application Class expects its models, views, controllers, stores and profiles to exist in the app/model, app/view, app/controller, app/store, and app/profile directories. With this convention, we can define models, views, controllers, stores and profiles using the last part of their names, as we do here. If we use a different directory structure, we will need to refer to them using their fully qualified names.

Time to check out how the View looks. On the emulator, you should see something similar to this:

Very nice, right? Let’s move on to the Controller. We need a Controller Class to be in charge of handling user input, modifying the models, and governing the transitions between views.

Creating Sencha Touch Controllers

Let’s define a very simple Notes Controller Class. We will place this Class in the Notes.js file, which we will add to the controller directory:

And this is the Controller’s definition:

Ext.define("NotesApp.controller.Notes", {
    extend: "Ext.app.Controller",
    launch: function () {
        this.callParent();
        console.log("launch");
    },
    init: function () {
        this.callParent();
        console.log("init");
    }
});

Controllers contain a couple of functions, init() and launch(), that run at different moments during the Application’s startup process. The init() function is invoked by the framework before the Application’s launch() function. The Controller’s launch() function is invoked after the Application’s launch() function runs.

We will make the Application aware of the Notes Controller Class by adding this Controller to the app’s controllers config:

Ext.application({
    name: "NotesApp",
    controllers: ["Notes"],
    views: ["NotesListContainer"],

    launch: function () {

        var notesListContainer = Ext.create("NotesApp.view.NotesListContainer");
        Ext.Viewport.add(notesListContainer);
    }
});

As we already know, having the Notes Controller Class listed in the controllers config will cause the Application to automatically instantiate and keep a reference to this Controller.

How To Handle View Events In a Sencha Touch Controller

At this point we have our Controller set up, and we are ready to start adding features to it. The first thing the Notes Controller needs to do is handle taps on the New button. We can accomplish this by making the following modification to the Controller’s definition:

Ext.define("NotesApp.controller.Notes", {
    extend: "Ext.app.Controller",
    config: {
        refs: {
            newNoteBtn: "#new-note-btn"
        },
        control: {
            newNoteBtn: {
                tap: "onNewNote"
            }
        }
    },
    onNewNote: function () {
        console.log("onNewNote");
    }

    // init and launch functions omitted.
});

Notice the change? Exactly – the refs and control configurations. They are the foundation of the mechanism by which a Controller acquires references to the Components in the app, and defines event handlers for them.

Refs give the Controller the ability to find Components in the app. They use the ComponentQuery Class, which retrieves components using a CSS selector-like syntax. I will not go into the details of ComponentQuery in this article, but I highly recommend that you take some time to study it.

In the Notes Controller, we use the newNoteBtn ref to create a reference to the Component whose id is #new-note-btn. This is the New button.

refs: {
    newNoteBtn: "#new-note-btn"
}

Based on this ref, the framework generates a getter function that we can use to work with the New button reference if we need to. Ref-derived getter functions are named following a simple format, consisting of the word get and the capitalized name of the ref in question. In our case, the name of the function will be getNewNoteBtn().

Refs also give us the ability to instantiate the components they reference if such components do not already exist. Although we are not taking this approach in our app, I recommend that you study these features. They are important, especially if you will be building large applications where you cannot afford or do not need to instantiate all the application’s components upon application launch.

The control config allows us to define event handlers for any of the Application’s Components. We can use refs or ComponentQuery selectors to define event handlers within control. In the Notes Controller, we are using the newNoteBtn ref to define a tap handler for the New button:

control: {
    newNoteBtn: {
        tap: "onNewNote"
    }
}

Obviously, we also need to define the handler function, which we do further down in the Controller’s source:

onNewNote: function () {
    console.log("onNewNote");
}

The onNewNote() function is simply writing a message to the console, but we will soon add to it the code that will open the NoteEditor View.

Let’s take a moment to check the application on the emulator. In particular, what happens when we tap the New button. If a tap occurs, the console output should display the message we just added in the onNewNote() handler:

One important takeaway from this tutorial is that when you need your Controller to handle a particular event on a Component, you can follow these steps:

  1. Create a ref for the Component.
  2. Create an entry for the ref in the Controller’s control config.
  3. Use the entry in the control config to specify the handler for the events in which you are interested.

Summary

We are going to end this first part of the tutorial taking a minute to recap what we have done so far.

After defining the features and the user interface of the application we will build, we started to become familiar with how Sencha Touch works. We learned how to create the directories for the app, and how to create an instance of the Application Class.

We also created the first version of the Application’s main View, which we named NotesListContainer, and started working on the Notes Controller instance that will manage the interactions between the different parts of the Application.

In the next chapter of this series we will continue working on the Application’s main View and its child elements, as we need to create the List that will render the notes cached on the device.

Stay tuned!

Downloads

Download the source code for this article: NotesApp-1.zip

The Entire Series

Want To Learn More?

My Sencha Touch books will teach you how to create an application from scratch.

Comments

  1. Artur B. says

    Hi Jorge,
    after completing your Sencha Touch 1 and jQuery Mobile tutorials (thank you again very much) I tried
    today the Sencha Touch 2 part 1 tutorial.
    I use Eclipse with Android SDK and ADT, PhoneGap and the newest Sencha Touch 2 Beta3 files.
    After installing the part 1 tutorial on the Android 4.0.3 emulator, the app in emulator shows an empty
    page and I get following errors (in the emulator’s LogCat in Eclipse):
    Uncaught Error: [Ext.Loader] Failed loading ‘file:///android_asset/www/sencha/src/event/Dispatcher.js’, please verify that the file exists at file:///android_asset/www/sencha/sencha-touch-debug.js:7935
    Uncaught Error: [Ext.Loader] Failed loading ‘file:///android_asset/www/sencha/src/MessageBox.js’, please verify that the file exists at file:///android_asset/www/sencha/sencha-touch-debug.js:7935
    Uncaught Error: [Ext.Loader] Failed loading ‘file:///android_asset/www/sencha/src/event/publisher/Dom.js’, please verify that the file exists at file:///android_asset/www/sencha/sencha-touch-debug.js:7935

    Any ideas?

    Best regards,
    Artur

  2. tf says

    Hi Jorge, when is the 2nd part coming out? I love your tutorials and I’m really depending on the stores part to make my move to Sencha Touch 2. Cheers!

      • mars says

        hi,Jorge,I need your help.

        First layout(List.js)
        Ext.define(‘app.views.contact.List’,{
        extend:’Ext.List’,
        requires: [
        'Ext.List',
        ],
        fullscreen:true,
        config:{
        itemTpl: ‘{name}–{age}’,
        store: {
        autoLoad: true,
        fields: ['name', 'age'],
        data: [
        {name: 'Jamie Avins', age: 100},
        {name: 'Rob Dougan', age: 21},
        {name: 'Tommy Maintz', age: 24},
        {name: 'Jacky Nguyen', age: 24},
        {name: 'Ed Spencer', age: 26}
        ]
        },
        },

        });

        Second layout(ContactUsList.js):
        Ext.define(‘app.views.contact.ContactUsList’,{
        extend:’Ext.Panel’,
        requires: [
        'Ext.Panel',
        ],
        fullscreen:true,
        config:{
        scrollable:true,
        layout:{type:’vbox’},
        items:[
        {
        xtype:'container',
        height:100,
        style: 'border:1px red solid',

        },
        {
        //I am going to put 'List.js' here,what can I do?Thank you!
        },
        ],
        },
        });

  3. Sanjay says

    Hello Jorge,
    You have a great writing style, thank you for this great tutorial. Are you planning to update your book with Sencha 2? I would be happy to pay for such a quality content. Thanks.

  4. Hemant says

    Great tutorial Jorge …. Wish had found it a little more earlier…
    and when is part-2 of sencha touch 2 app coming out ????

  5. Ben says

    Hello,

    Thank you for writing this guide in such a beginner-friendly fashion. Great that you explain what each step does, and why we do it, and alternative uses and the likes.

    Cant wait for part 2!:) – despite having to, though.

  6. Andy says

    Thanks Jorge for the tutorial.
    Its exactly what I am trying to do but I use the new Navigation View instead of the tool bar.
    I was wondering if you have thoughts of changing this to use the Navigation view.
    The reason I ask, is that I am trying to do a similar UI but I am trying to use the navigation view component. Unfortunately I lose the events after tapping on the back button and cannot understand why. I was hoping I could see a working example to see where I was going wrong.
    Thanks
    Andy

    • says

      Thank you Andy. I’m not very familiar with the Navigation View yet. The first time I read its documentation, I had the impression that this Component is not fully baked. I might be wrong, though. I will try to come up with an example for it similar to the Notes App as soon as I can.

  7. cuongdm says

    Thanks for good tutorial, Please tell me what tool did you use for implement this Note App.
    Thanks again!

  8. Rams says

    Thanks for the tutorials. I bought your Sencha Touch book but its in 1.1. Will you be upgrading it to ST 2.0? and will there be an automatic upgrade to my book?

    • says

      Thank you for buying the book, Rams. I’m sure it will be very helpful. There will not be a free upgrade to the book, as it takes effort to write it again, this time for ST2. If you are not satisfied with your purchase, please shoot me an email and I will issue a refund so you can have your money back.

  9. Akash Saikia says

    Hi, nice tutorial :)
    I started my journey in Sencha Touch by reading your Notes tutorial made in Sencha Touch 1.1.

    Now again, before starting Sencha Touch 2, i am in the same place.

    Thanks alot for this master piece :)

    And btw there is a typo below the First Sketch, in the second line

    Ext.Lit

    You might mean it as Ext.List

    Thanks.

  10. Vipul says

    Hi Jorge. Thanks for the tutorials. I’m new to Sencha and just tried it using Eclipse. Do I need to use the Android emulator or can I just make this a standard HTML web project? I tried using it as an HTML project and when the index.html page comes up, it never seems to call the launch function in app.js. Do I need to explicitly call it somehow when the index.html page loads?

    • says

      You can start with just an html page and a webkit browser, and bring in the emulator later. Make sure you are including the framework files. Looks like you might be missing them.

  11. says

    It would be good to put this on your tutorial (index.html):
    link rel=”stylesheet” href=”../lib/ST2/resources/css/sencha-touch.css”
    script type=”text/javascript” src=”../lib/ST2/sencha-touch-all-debug.js”

  12. CP3 says

    I hava a quetion, how the app.js know the controler Note.js and the viewcontainer NoteListContainer.js are in the special dir? I could not find any qoute in the app.js? How the application could make it ?~

    • says

      The framework’s loader takes care of downloading their files. This is one of the reasons why you use the views, controllers, stores, models, profiles configs in the app.js file. For the loader to work, you can use the default directories configuration, or tell the loader how your directories are structured.

  13. says

    hi, I am trying to create the same example NotesApp using MVC. But when I create the NotesListContainer using create, I get error : ” Uncaught reference Error: trying to create a component with an xtype that has not been registered”. How do I solve this??

  14. Vaibhav says

    Hi

    I am using Sencha touch with SUP 2.1.2. When I integrate the apps with SUP and run it on iOS, it was showen me the error as ‘Error: Result of expression ssRules[i].selectorText[undefined] is not an object’.

    Please guide me to resolve this issue.

    Regards,
    Vaibhav More

  15. Peter says

    Thank you for this great tutorial!

    Can you tell me wich Software you used for the presentation graphics? for example “http://miamicoder.com/wp-content/uploads/2012/02/notes-list-mockup-3.png”

  16. Troels K says

    Hi Jorge,

    thanks for a well-written tutorial.

    I had a little problem with your html-file, though, which seems to call a function in a folder that doesn’t exist and for that reason just showed a blank screen. But if I keep the html-file that is build automatically by Sencha (when running “sencha app create NotesApp ../NotesApp” in command prompt) rather than use your code, everything seems to work fine. Just a heads-up.

    • says

      Thanks! Can you provide a simplified version of the app? There’s a ton of files in your repo and it’s difficult to find stuff there.

  17. Srinivas says

    Thanks for the reply. I realized that it is showing the messages in the console where it supposed to show. By mistake I was hoping that the messages will list on the emulator screen, tricked by the image in the tutorial.

    By the way my project is a shell project tutorial I have followed from the following link http://andidog.de/blog/2012/06/packaging-a-sencha-touch-2-application-with-phonegap-for-android/?unapprovedCommentId=50#comment-50

    Only thing I have done to that is added new files from your tutorial to this project.

    Thanks
    Srinivas

  18. Nageswara Rao says

    in app.js iam writing

    Ext.application({
    name:’NotesApp’

    });
    then index.html iam configure it
    and deploy in tomcat but it throws this error

    Ext.application is not a function in app.js

  19. Tikkes says

    I love this well written tutorial.
    I do have a little problem though.

    I keep getting a blank screen, even with your code it just stays blank.

    Any ideas? I’ve been searching for so long now…

    • says

      Tikkes, make sure the Sencha Touch css and js files are in the right place. Open the app in Google Chrome, enable Chrome’s JavaScript console and see what the error is.

  20. Yasser says

    Hi, i am asp.net developer. I have to use sencha for mobile devices from shopping cart website. I do not know how handle session for shopping cart items in mobile devices? Should i develope javascript cart or another solution need? Thanks

    • says

      Yasser, it probably makes more sense for you to use one of the shopping carts that already exist. I don’t think you want to roll out your own cart at this point.

  21. Girish says

    hi, jorge i am getting this type of errors. please tell me how to solve this

    07-23 17:17:41.530: DEBUG/PhoneGapLog(4351): file:///android_asset/www/app/controller/Notes.js: Line 1 : Uncaught ReferenceError: Ext is not defined
    07-23 17:17:41.530: ERROR/Web Console(4351): Uncaught ReferenceError: Ext is not defined at file:///android_asset/www/app/controller/Notes.js:1
    07-23 17:17:41.538: DEBUG/PhoneGapLog(4351): file:///android_asset/www/app/view/NotesListContainer.js: Line 1 : Uncaught ReferenceError: Ext is not defined
    07-23 17:17:41.538: ERROR/Web Console(4351): Uncaught ReferenceError: Ext is not defined at file:///android_asset/www/app/view/NotesListContainer.js:1
    07-23 17:17:41.546: DEBUG/PhoneGapLog(4351): file:///android_asset/www/app.js: Line 1 : Uncaught ReferenceError: Ext is not defined
    07-23 17:17:41.546: ERROR/Web Console(4351): Uncaught ReferenceError: Ext is not defined at file:///android_asset/www/app.js:1

  22. Girish says

    Hi,
    Let me show how i placed the folders and calling style.
    Folder Structure
    -sencha touch
    src
    com.sencha
    senchaTouch.java
    gen
    Android2.2
    phonegap-0.9.3.jar
    assets
    www
    app
    controller
    model
    profile
    store
    view
    lib
    touch
    resources
    css
    sencha-touch.js
    sencha-debug.js
    sencha-touch.css
    app.js
    index.html

    And in index .html

    My Notes

    And app.js contains

    Ext.application({
    name: “app”,
    controllers: ["Notes"],
    views: ["NotesListContainer"],

    launch: function () {

    var notesListContainer = Ext.create(“app.view.NotesListContainer”);
    Ext.Viewport.add(notesListContainer);
    }
    });

    Please…..help me were i am going wrong.

  23. Girish says

    Index.html is not printed above so updating here

    !DOCTYPE html
    html
    head
    meta charset=”utf-8″
    title My Notes /title
    link href=”file:///android_asset/www/lib/touch/resources/css/sencha-touch.css” rel=”stylesheet” type=”text/css”
    script src=”file:///android_asset/www/lib/touch/resources/sencha-touch.js” type=”text/javascript” /script
    script src=”file:///android_asset/www/app/controller/Notes.js” type=”text/javascript” /script
    script src=”file:///android_asset/www/app/view/NotesListContainer.js” type=”text/javascript” /script
    script src=”app.js” type=”text/javascript” /script
    a href=”app.js” button app /button /a
    /head
    body
    /body
    /html

  24. Girish says

    hi jorge ,i did’t get the response from u please tell me how to solve.May be my folder structure and the references are not correct .i am developing app in eclipse for android

  25. sam says

    Thank you for this tutorial.I was struggling with setup for last 1 week.and you made it so simple and in one shot it started working.You are so amazing.Buying your book right now.

  26. Saurabh says

    Hi Jorge,

    I have bought your book and its really awesome. I’m able to create notes app looking at your code but i wants to add additional functionality to it .
    ” 1) I wanted to add child list ( i wanted to add child for every item in the nested list ) . ”
    ” 2) I will be more than happy if you can help me out to resolve this issue I’m already fighting with it from about two weeks. ”

    ” Even if I’m able to provide child to the nested list item then the problem is for every click on any of the item in the nested list the app is showing the child of all the items in the nested list. ”
    I think the issue is with the ID so if there is any way through with i can assign separate child which will add automatically as soon as user wants to add child or sub note to its main nested list item.

    Thanks in advance.

  27. Charlie says

    I downloaded the file after the tutorial and tried loading it through xampp and absolutely nothing shows up. As a complete Sencha noob, what steps are needed to get this running? Even this highly detailed tutorial seems to miss some steps for the noobs.

    • Charlie says

      Finally figured out that there was no CSS sheet referenced so it would not load properly! Not sure why the demo would skip a vital part like that. Love the tutorials though.

  28. Robbe Wuyts says

    Hey,
    When I test my app, I get an empty page, with No erros. It looks like app.js doesn’t load, bt I’m not sure. I made the app using Visual Studio 2012, and tested it with firefox, chrome, safari, internet explorer, safari (user agent set as iPhone and iPad).
    Is there anyone who had the same problem, or who knows how I can fix this?

  29. says

    Hi, Jorge.
    Congratulations for your post. Its very good.

    I am a begginer with Sencha Touch 2 and I am with dificulty in meet a tutorial with learn how to connect the Sencha touch 2 with a mysql database.

    I has read your five posts in this serie, but I am not understand how to do this. And I am not meet other tutorial in the web with this content.

    Can you help me with this?

  30. Larry says

    Hi Jorge thank you so much for your tutorials they are very informative, Sencha owes you big time.
    I was wondering if your book contains any instructions to package native to android, if not are you able to provide some guidance.

    • says

      Larry, I have a couple of articles planned that will tackle packaging for Android and iOS. The book explains how to create a production build of the app. It doesn’t touch on packaging for Android.

  31. Lito Saulo says

    Hi Jorge,
    I’m so glad I stumbled into your books and tutorials on Sencha Touch 2. I was getting very frustrated with the documentation and videos of Sencha. There is a lot of information, but I find it difficult to follow – unlike yours.
    I am currently developing a mobile app where I want to use my own customised form. All I want is a skeleton panel with top and bottom toolbars. I will put in my form in the middle bit. It is written in HTML5/CSS3/Javascript. How do I do it? Do you want me to send you the code?
    Thanks. Merry Xmas.
    Lito

    • says

      Lito, thank you for your feedback. If you want to reuse your existing form, you can create a Sencha Touch panel with toolbars docked at the top and bottom, then use the panels html config to inject the form. If you decide to use only Sencha Touch, you can use a form.Panel instance with toolbars docked at the top and bottom.

      • Lito Saulo says

        Thanks for your quick response, Jorge, particularly on Xmas day!
        i want to resue my existing form, but there is quite a bit of html & css code. how do i inject it in the panels html config. i can’t find the syntax for html. i’ve seen examples where each html tag is written in quotes. i will not have to do this, don’t i? there must be a way to reference it as an external file.

  32. Jatin says

    Hi,

    Thanks for the wonderful example ,it really did wonders for learning Sencha Touch 2.
    Apart from this i want to ask one thing regarding the coding approach while developing the Sencha Touch 2 app. i.e. creating components using variable method (var) as explained in your example or through the items method. I personally prefer the variable method but I need to know its advantage over the items method. Please suggest some pros of it. Thanks in advance.

    • says

      I prefer defining the components in separate files and then instantiating them over defining them inline because of two main reasons: (1) It allows me to have more maintainable code, as it is easier for me to change the application when its components reside in separate files; and (2) it produces a more efficient/flexible application, as I can create components when I need them instead of instantiating all the app’s components at launch time.

      In this particular tutorial I do not take advantage of the second item above because the app is very small. However, it is generally a good idea to only create components at the time they are needed.

  33. says

    Hi Jorge,
    I just downloaded the book. I’m looking forward to reading it. The Sencha documentation is plentiful but just so daunting and confusing.
    BTW, I managed to embed the external HTML file, but somehow I couldn’t make it to render the whole panel between the toolbars. It only gives me the top bit on the iPhone. On the laptop, it is the same except that I get scrolling bars. I searched the whole Sencha documentation for an answer and I just couldn’t find any. Please check out the app. saulo.com.au/aaa. Any suggestions?
    Regards.

  34. Steve says

    Downloaded Sencha and was going to try out this tutorial… right off the bat I am not following ‘Organizing A Sencha Touch Application In Directories And Files’ as in architect there is no directory structure or a way to customize it from what I can see… is this for a different version or what?

  35. chatura says

    Check the book page 29 for define store code sample. I think model config value must be define out of config.

    Ext.define(‘NotesApp.store.Notes’, {
    extend: ‘Ext.data.Store’,
    model: ‘NotesApp.model.Note’,
    config: {
    data: [
    { title: 'Note 1', narrative: 'narrative 1' },
    { title: 'Note 2', narrative: 'narrative 2' } ],
    autoLoad: true,
    sorters: [{ property: 'dateCreated', direction: 'DESC'}]
    }
    });

  36. Sid says

    Jorge,

    Firstly, thanks a lot for posting this tutorial. It has served as a useful guide in my app development . However, I am facing a problem on a seemingly simple task. I have some inline list data that I would like to display in a navigation view and although I get a screen with the list rows, there is no data displayed in the rows. I’ve been struggling with this for a while and unable to resolve the issue. Can you please take a look at the code below and let me know where I am going wrong? Thanks in advance for your help.

    Ext.define(‘MyApp.view.courtsearch’, {
    extend: ‘Ext.navigation.View’,
    requires: ['Ext.dataview.List'],
    alias: ‘widget.courtsearchpage’,
    xtype: ‘courtsearch’,

    config: {
    title: “Search”,
    iconCls: “search”,
    scroll: “vertical”,
    layout: {
    type: ‘card’
    }, /*Fit layout does not work with navigation view.Hence using card.*/

    items: [ {
    xtype: 'list',
    title: 'Search by',
    itemId: 'searchcategorylist',
    itemTmpl: '{title}',
    data: [ /*the following list data does not appear on the screen*/
    { title: "Current location"},
    { title: "Address"},
    { title: "Park name"},
    { title: "Favorites"},
    { title: "Recent search"}
    ],
    }
    ],
    }
    });

      • Sid says

        Hi Jorge,

        Thanks for the response. I tried with store but it still doesn’t work. Here’s the new code.

        //the model file
        Ext.define(‘MyApp.model.searchcategory’, {
        extend: ‘Ext.data.Model’,
        config: {
        fields: [
        {name:'category', type: 'string' }
        ]}
        });

        //the store file
        Ext.define(‘MyApp.store.searchcategories’,{
        extend: Ext.data.store,
        requires: ['MyApp.model.searchcategory'],
        config: {
        model: ‘sportwise.model.searchcategory’,
        data: [
        { category: "Current location"},
        { category: "Address"},
        { category: "Park name"},
        { category: "Favorites"},
        { category: "Recent search"}
        ]
        }
        });

        //the main code
        Ext.define(‘MyApp.view.courtsearch’, {
        extend: ‘Ext.navigation.View’,
        requires: ['Ext.dataview.List', 'Ext.data.Store', 'MyApp.store.searchcategories'],
        alias: ‘widget.courtsearchpage’,
        xtype: ‘courtsearch’,

        config: {
        title: “Search”,
        iconCls: “search”,
        scroll: “vertical”,
        layout: {
        type: ‘card’
        }, /*Fit layout does not work with navigation view*/

        items: [
        {
        xtype: 'list',
        title: 'Search for courts by',
        itemId: 'searchcategorylist',
        itemTmpl: '{title}',
        store: 'searchcategories'
        }
        ],
        }
        });

  37. newsencha says

    thanks..though a newbie since yesterday, i could do it! wow! Now i think i can lay my hands on sencha!

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *