Creating Mobile Apps with Sencha Touch 2 - Part 3

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.


Ext.define("", {  
  extend: "",
  requires: ["SenchaNote.model.Note"],
  config: {  
    model: "SenchaNote.model.Note", //need full name
    proxy: {  
      type: "ajax",
      api: {  
        create: "",
        read: "",  
        update: "",  
        destroy: ""  
      reader: {  
        type: "json",  
        rootProperty: "notes",  
        totalProperty: "total"  
    autoLoad: true  
Read more ... →

May 5, 2012 · Stephen Saw

Creating Mobile Apps with Sencha Touch 2 – Part 2

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.


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  

        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.

Read more ... →

May 3, 2012 · Stephen Saw

Creating Mobile Apps with Sencha Touch 2 - Part 1

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:

Sencha Note - Main Screen

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.

Read more ... →

May 2, 2012 · Stephen Saw

Mobile Apps Development Experience

I’ve started to look into JavaScript to be use in web project as much as possible ever since I last built a web game with jQuery. During my service in previous company, my team was assigned an assignment to research on mobile apps development, we’ve focusing on technology other than native, as we don’t have the skills for Java and Objective-C.

We’ve came out with few option, Appcelerator, Rhomobile, OpenPlug (Discontinued), and PhoneGap. Rhomobile was out of the picture very quickly, as it uses MVC style to code, and the team is not proficient in the style at that time. I’ve taken the rest to test drive.

OpenPlug then removed from our option, as it uses ActionScript, MXML to build and design the apps, which is then again, the team don’t have the skills on these technology. Even though it claim to compile the code into native code (which is appealing to me) and it has iOS simulator (a plus as well, as the team only have one MacBook).

Read more ... →

April 27, 2012 · Stephen Saw

Session Lost in IE When Using IFrame

Not a fans of iframe in any way, but there are times when we need to use iframe, and to the extend we need to use session to store some value to use in other pages in the iframe page.

Yes, IE did it again, screwing developer, while every other browser is doing just fine, but in IE, the session inside the iframe page itself lost on each post.

The solution is to add the following header:


Check the detailed solutions

July 30, 2011 · Stephen Saw

jQuery hover executed twice

Recently been using jQuery a lots for effect and for the awesome DOM manipulation. I found there is a small problem with this code:

$("#myButton").hover(function() {  
  // my hover function  

The function get executed when mouse over the button, but when mouse is leaving the button, it get executed again, quick fix:

$("#myButton").hover(function() {  
  // my hover function  
, function() {});

Just adding in the an empty function after that seems to fix the problem.

May 31, 2011 · Stephen Saw

Facebook showing HTTP 405 error

Facebook had deprecated the support for static FBML on fan page, which now it has to be done in iframe apps method, and add the apps to the fan page tab.

Today is the first time I put create an apps and pointed it to our server, to a simple html file, when the apps was added to the fan page tab, it shows HTTP 405 error, previously had setup a page and hosted on a same server, same directory, and the apps settings were same as the new one, and both were added to the same fan page, but existing apps work just fine.

I’m surprised how easy it is to fix it, I’m not sure what’s the reason behind it, but simply changing the .html to .php, it works like charm.

May 31, 2011 · Stephen Saw

WebGL Music Video

Excited to see, music video created using WebGL, is a music video for Norah Jones’ song, throughout the music video, we can look around, lots of great things is happening in the surrounding, and it got Mario, and Megaman inside! WebGL apps, great music.

In order to load WebGL using Chrome in Windows XP, one have to run Chrome using some parameter, chrome.exe –ignore-gpu-blacklist.

May 16, 2011 · Stephen Saw

Linq to Excel

Having fun with Linq to SQL for a little while now, it speed up my development time dramatically, because I can write C# code better than SQL statement, so I let Linq to SQL handle the SQL for me.

Came across a need to read Excel, I knew I can read it using ADO.NET , but when try to make use of Linq to SQL in the project, try not to create a function that using the normal querying using the ADO.NET, so I came across Linq to Excel , now I can read the Excel files like normal Linq to SQL, and it works with Excel files created in Excel 2010, thumbs up!

April 21, 2011 · Stephen Saw

Web Page Automation

I’ve WiMax that acting weird, sometimes when Windows is reporting I’m unable to connect to the Internet, the WiMax modem is showing strong signal strength, even the status page of the modem is showing operational as well, when this happen, I reboot it, I don’t go to the modem to reboot, I login via browser and reboot it using the web interface.

Even though I saved my login name and password, but clicking login button and clicking reboot button, and then clicking “yes” from the popup is too many steps for me, so I figured, I could just learn how to write code to automate a web page.

Using C#, it came with handle WebBrowser control, which rendering the passed in URL parameter using IE (I think, since all the context menu is identical with my IE one) on our Windows form. I tried to do this without UI interference, but not yet manage to get WebBrowser object to work in console application yet, so I ended up with a simple Windows application.

Read more ... →

February 20, 2011 · Stephen Saw