Sencha Touch Development Notes

Panel Construction
basicPanel = Ext.extend(Ext.Panel, {
...
initComponent: function(){
     //put initialization code here
     ......
     basicPanel.superclass.initComponent.call(this); //IMPORTANT
}
});

myPanel = new basicPanel({
  //override attributes here if required
});

Set Panel as loading 

panel.setLoading(true, true);

Hide button initially and show after some event 

by configuring button property "Hidden:true" not work, it can't be shown upon button.show()

use listener "afterrender" to hide it instead: 

{
   text: 'Reset',
   listeners: {
     afterrender: function(){
        this.hide();
     }
   },
   //hidden: true,   <---Not working!
}

Reference ancestor container object from ExtJS control.
http://stackoverflow.com/questions/5986899/how-to-reference-ancestor-container-object-from-an-extjs-control

var newWizardWindow = new WizardWindow({
  id: 'newWizardWindow',
  title: 'New',
  items: [
    ...
  ],   
  buttons: [{
    text: 'Cancel',
    handler: function() {
      // REFERENCE WizardWindow instance here.
    }
  },{
    id: 'newWizardPreviousButton',
    text: '« Previous',
    disabled: true,
    handler: newWizardNavigator.createDelegate(this, [-1])
  },{
    id: 'newWizardNextButton',
    text: 'Next »',
    handler: newWizardNavigator.createDelegate(this, [1])
  }],
  listeners: {
    …
  }
});

 can use the xtype instead of the id as reference and the xtype is the same no matter what instance you have of that type.

buttons: [{
    text: 'Cancel',
    handler: function() {
        // REFERENCE WizardWindow instance here.
        var parentWindow = this.findParentByType('xtypelizardwindow');
    }
}]

Web Server on Mac OS X Setup step-by-step


http://www.sencha.com/learn/sencha-touch-quick-start/
Sencha SDK 2.0 has already been downloaded and installed in Application/


Stylesheet


Sencha Touch is using SASS
what is SASS? http://sass-lang.com/tutorial.html
- install Ruby and Sass (for the first time only)
    gem install sass
- start out by creating SCSS file "style.scss". just like what a traditional CSS do.
- then translate the sass file into a css file by running
  sass --watch style.scss:style.css
Now whenever changes made in style.scss, sass will auto update style.css

Compass - Open source CSS Authoring Framework. http://compass-style.org/  (it uses SASS)
install compass using gem command:
    gem install compass
installed directory:  /Users/etp_user/.gem/ruby/1.8/bin/compass
in order to use the compass command, make sure the installation path has been included in the environment PATH variable.

to create a css from scss file:
    compass compile mps.scss
mps.css will be created if everything's alright.

Icon

using inline-image  which converts image to a base64 inline image
use custom icon http://www.senchatouchbits.com/9/adding-custom-embedded-inline-icons.html
Online base64 encoder http://www.simoens.org/Base64/ (not work on Safari, use Firefox)