sencha touch 2

Recently I’ve noticed that in iOS, the navigation animation for the title bar is more than simply slide in new screen from right to left, despite I’m using iPhone for few months now, I didn’t aware of the animation until I felt something different with the animation done by Sencha Touch, the attention paid to the detail made the whole screen switching much smoother.

Your browser does not support native video tag, that’s bad
(video quality might not be that clear, but still able to see the title bar animation)

It appears that Sencha Touch 2 provide a new component Ext.navigation.View, which according to the documentation, it’s a container with extra features. Using navigation view is a bit different than what I’ve done previously.

Another navigation animation I found different from iOS native and Sencha Touch is the tab panel switching, in Sencha Touch, it use the slide effects, while in stock apps in iOS, it don’t have animation, but this one is a quick fix in Sencha Touch.

So, as usual, we need the MVC folder structure, index.html, app.js and Viewport.js to get started. In this testing, I’m using tab panel on the viewport.

Continued from Creating Mobile Apps with Sencha Touch 2 – Part 2

Now that we have most of the things ready, just need to modify something to let the store sync (CRUD operation) back to server.

Uncomment the proxy in the Note store, and remove the dummy data.

app/store/Note.js

Ext.define("SenchaNote.store.Note", {  
  extend: "Ext.data.Store",
  requires: ["SenchaNote.model.Note"],
  config: {  
    model: "SenchaNote.model.Note", //need full name
    proxy: {  
      type: "ajax",
      api: {  
        create: "http://192.168.168.10:8888/SenchaNote/Note.php?action=create",
        read: "http://192.168.168.10:8888/SenchaNote/Note.php",  
        update: "http://192.168.168.10:8888/SenchaNote/Note.php?action=update",  
        destroy: "http://192.168.168.10:8888/SenchaNote/Note.php?action=delete"  
      },  
      reader: {  
        type: "json",  
        rootProperty: "notes",  
        totalProperty: "total"  
      }  
    },  
    autoLoad: true  
  }  
});

Continued from Creating Mobile Apps with Sencha Touch 2 – Part 1

Since the editing and creating note screen going to be same, so we can share the same screen.

app/view/NoteEditor.js

Ext.define("SenchaNote.view.NoteEditor", {
  extend: "Ext.form.Panel",
  xtype: "noteeditor",
  requires: ["Ext.form.FieldSet", "Ext.field.Select"],  
  initialize: function() {
    var toolbar = {  
      xtype: "toolbar",  
      docked: "top",
      title: "Add Note",
      items: [  
        {
          xtype: "button",
          ui: "back",
          text: "Back",
          handler: this.onBackTap,  
          scope: this  
        },  
        { xtype: "spacer" },  
        {  
          xtype: "button",  
          ui: "confirm",
          text: "Save",
          handler: this.onSaveTap,  
          scope: this  
        }  
      ]  
    };

    this.add([
      toolbar,  
      {  
        xtype: "fieldset",
        defaults: { //this set default value to every items added  
          xtype: "textfield"
        },  
        items: [
          { 
            name: "content", 
            label: "Content" 
          },  
          { 
            name: "categoryid", 
            label: "Category", 
            xtype: "selectfield", 
            store: "Category", 
            displayField: "name", 
            valueField: "id"
          }  
        ]  
      }  
    ]);  
  },
  config: {  
    listeners: {  
      show: function() { this.onShow(); }  
    }
  },  
  onShow: function() {  
  if (this.getRecord().phantom) {
    this.items.get(0).setTitle("Add Note");
  } else {
    this.items.get(0).setTitle("Edit Note");
  }
  },  
  onSaveTap: function() {  
  //fire event to controller  
  },  
  onBackTap: function() {  
  //fire event to controller  
  }  
});

Here we need to use the Ext.form.Panel, and import the Ext.form.FieldSet and Ext.form.Select. Then the usual stuff, create a toolbar, docked it on the top, give it a title “Add Note”, and add a back button and a save button on it, and assign handler to both buttons.

After creating the object of toolbar, add it to the screen using this.add just like the search bar (do it in initialize because we need to add the handler to the buttons.

In the this.add, we add another item on the fly (I mean without creating using the var ), use the built in xtype fieldset, note that there is a new thing, defaults, it simply means what ever item we configure later on will using the setting in defaults, unless specified otherwise.

So here I set default type to xtype:textfield, so that all item will default to a textbox. In the items, I need the content textbox. Note the { name: “price”, label :”Price”, xtype: “numberfield” } I commented is to show that we can override the defaults by specifying the xtype, and the numberfield here will allow the mobile browser display numeric keyboard, which made data entry easier.

Remember when I started to Googling around to search for Sencha Touch 2 tutorial, all I found was pieces of here and there, so I write this very simple example (probably not even close to best practice, but it get job done), from creating Sencha Touch front end, to storing data in server.

Required pieces: – Sencha Touch 2 SDK – Web server – Webkit based web browser

The reason web server is needed, beside to run some server script, is that Sencha Touch does not work properly (some part) using file:// protocol.

I’m using MVC style here. In Sencha Touch, Model is use to describe the data structure, thing of it as the table in database, it has column and datatype. Model handle validation, and proxy thingy (which URL to point to, what datatype is the response).

View just simply displaying the GUI. Controller is probably best describe as the brain, it glue the View and Model together. And there’s a Store, which responsible to store the the records/data get from server.

The is how’s the main screen of the apps will looks like:

The main screen will show the list of notes, a search bar to searching notes, an add button on top to add new note, and bottom I still don’t have idea what to add in, just leave it as it is at the moment. Note that the list is showing arrow at the side, it means that when you tap on it, it should show the edit screen.