2013年7月10日 星期三

Sencha Touch 2 筆記

1. 安裝Sencha SDK需注意
a. Macbook OS 需要先俱備java,可以在終端機打入 "java -v"來安裝
b. 中文問題

安裝完之後需要對其做一些小的修改,以保證不會出現中文亂碼。
i) 打開安裝目錄,然後依次打開comp​​act/jsbuilder/src/文件夾,用文本編輯器打開該文件夾下的Project.js文件。
ii) 搜索“getCompressor”,將下一行的“java -jar”修改為“java -Dfile.encoding=UTF-8 -jar”,保存退出。

2. 程式注意:
Ext.Msg沒作用 (alert)
需要:
  requires: [
        'Ext.MessageBox'
    ],

    launch: function() { ...

3. Sencha SDK Tool: 可以給重頭到尾自己開發程式,自己編輯檔案使用。
程式撰寫完成後編輯命令:

sencha create jsb -a index.html -p app.jsb3
sencha build -p app.jsb3 -d .

4. 安裝 Sencha Cmd: 可以自動產生框架與目錄架構。
a. 安裝在 Sencha SDK Tools/bin 之下 (也許可以不需要 SDK Tool)
b. 記得把 Sencha SDK 的目錄放在 /Desktop 底下 (似乎是 Macbook 上的問題)
才可以在 SDK 目錄下使用 sencha app generate ..., 不然會出現 Workspace ... 的錯誤
==> 花了一星期才搞定這些問題
==> Sencha 官方網站也會誤導

5. 大問題:TextArea不能Scroll,中國網站有解法,重新定義一個Class:

Ext.define('Sai.view.TextArea', {
    extend: 'Ext.form.TextArea',
    xtype:'scrollTextArea',
   initialize: function() {
      this.callParent();
      this.element.dom.addEventListener(
         Ext.feature.has.Touch ? 'touchstart' : 'mousedown',
         this.handleTouchListener = Ext.bind(this.handleTouch, this),
         false);
      this.element.dom.addEventListener(
         Ext.feature.has.Touch ? 'touchmove' : 'mousemove',
         this.handleMoveListener = Ext.bind(this.handleMove, this),
         false);
      this.moveListenersAttached = true;
   },
   destroy: function() {
         if (this.moveListenersAttached) {
         this.moveListenersAttached = false;
         this.element.dom.removeEventListener(
            Ext.feature.has.Touch ? 'touchstart' : 'mousedown',
            this.handleTouchListener,
            false);
         this.element.dom.removeEventListener(
            Ext.feature.has.Touch ? 'touchmove' : 'mousemove',
            this.handleMoveListener,
            false);
         this.handleTouchListener = this.handleMoveListener = null;
      };
      this.callParent();
   },
   handleTouch: function(e) {
      this.lastY = e.pageY;
   },
      handleMove: function(e) {
          var textArea = e.target;
          var top = textArea.scrollTop <= 0;
          var bottom = textArea.scrollTop + textArea.clientHeight >= textArea.scrollHeight;
          var up = e.pageY > this.lastY;
          var down = e.pageY < this.lastY;
          this.lastY = e.pageY;
     
          if((top && up) || (bottom && down))    e.preventDefault();
      
          if(!(top && bottom))    e.stopPropagation();
      }
});