MORIWAKI.NETのメモ帳

Sencha（旧 Ext JS）がモバイル端末用HTML5アプリケーションフレームワークSencha Touchのベータ版を公開

APIドキュメント：Sencha Touch API

サンプルについてるTwitter 検索がこんな感じ（PCだとChromeで）

http://www.sencha.com/blog/2010/06/14/ext-js-jqtouch-raphael-sencha/

jQTouch(スマートフォン向けUI) と Raphaël(SVGライブラリ) を配下にして「Ext JS, Inc.」が社名を「Sencha Inc.」に変更

新URLは http://www.sencha.com/

手っ取り早くJavaDocを日本語のPDFで出力できるように、pdfdocletを修正済み。

• javadoc-pdf.xml
• doc.zip

1. javadoc-pdf.xmlのjavadoc.packagesプロパティのvalueに対象のパッケージを記述して、Eclipseのプロジェクト直下に置く。
2. Eclipseのプロジェクト直下にdoc.zip（日本語対応ライブラリ）を展開し、docフォルダを作成する。
3. javadoc-pdf.xmlを右クリックメニューで実行すると、docフォルダにapi.pdfが作成される。

元はページを切り替えるたびにRecordを作り直していたので、これを修正。

if (!Array.prototype.map) {
  Array.prototype.map = function(fun) {
    var len = this.length;
    if (typeof fun != 'function') {
      throw new TypeError();
    }
    var res = new Array(len);
    var thisp = arguments[1];
    for (var i = 0; i < len; i++) {
      if (i in this) {
        res[i] = fun.call(thisp, this[i], i, this);
      }
    }
    return res;
  };
}

Ext.ns('Ext.ux.data');

Ext.ux.data.PagingMemoryProxy = Ext.extend(Ext.data.MemoryProxy, {
  customFilter : null,
  resultMemory : null,
  constructor : function(data) {
    Ext.ux.data.PagingMemoryProxy.superclass.constructor.call(this);
    this.data = data;
  },
  insert : function(record) {
    this.resultMemory.records.unshift(record);
    this.resultMemory.totalRecords = this.resultMemory.records.length;
  },
  remove : function(record) {
    for (i = this.resultMemory.records.length - 1; i >= 0; i--) {
      if (this.resultMemory.records[i].id == record.id) {
        this.resultMemory.records.splice(i, 1);
        this.resultMemory.totalRecords = this.resultMemory.records.length;
        return;
      }
    }
  },
  doRequest : function(action, rs, params, reader, callback, scope, options) {
    params = params || {};
    var result = {
      success : null,
      records : null,
      totalRecords : null
    };
    try {
      if (!this.resultMemory) {
        this.resultMemory = reader.readRecords(this.data);
      }
    } catch (e) {
      this.fireEvent('loadexception', this, options, null, e);
      callback.call(scope, null, options, false);
      return;
    }

    // filtering
    if (params.filter !== undefined) {
      this.resultMemory.records = this.resultMemory.records.filter(function(el) {
            if (typeof(el) == 'object') {
              var att = params.filterCol || 0;
              return String(el.data[att]).match(params.filter)
                  ? true
                  : false;
            } else {
              return String(el).match(params.filter)
                  ? true
                  : false;
            }
          });
      this.resultMemory.totalRecords = this.resultMemory.records.length;
    }
    // sorting
    if (params.sort !== undefined) {
      var dir = String(params.dir).toUpperCase() == 'DESC' ? -1 : 1;
      var fn = function(v1, v2) {
        return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
      };
      this.resultMemory.records.sort(function(a, b) {
            var v = 0;
            if (typeof(a) == 'object') {
              v = fn(a.data[params.sort], b.data[params.sort])
                  * dir;
            } else {
              v = fn(a, b) * dir;
            }
            if (v == 0) {
              v = (a.index < b.index ? -1 : 1);
            }
            return v;
          });
    }
    // paging (use undefined cause start can also be 0 (thus false))
    if (params.start !== undefined && params.limit !== undefined) {
      result.records = [];
      var index = 0;
      for (var i = params.start; i < params.start + params.limit; i++) {
        if (this.resultMemory.records[i]) {
          result.records[index++] = this.resultMemory.records[i];
        } else {
          break;
        }
      }
    }
    result.success = this.resultMemory.success;
    result.totalRecords = this.resultMemory.totalRecords;
    callback.call(scope, result, options, true);
  }
});

// backwards compat.
Ext.data.PagingMemoryProxy = Ext.ux.data.PagingMemoryProxy;

jQuery でドラッグスクロールを設定する簡単なプラグインのサンプル。

サンプルページ：http://moriwaki.net/jquery/dragscroll.html

サンプルHTML：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery ドラッグスクロールのサンプル</title>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load("jquery", "1.4");
</script>
<script type="text/javascript" src="jquery.dragscroll.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $('#scroll').dragScroll(); // ドラッグスクロール設定
  });
</script>
</head>
<body>
<h3>jQuery ドラッグスクロールのサンプル</h3>

<div id="scroll" style="width:300px;height:300px;">
  <div style="width:500px;height:500px;background-color:#ff0000">
    <span style="font-size:48pt">あいうえおあいうえおあいうえおあいうえお…</span>
  </div>
</div>
</body>
</html>

サンプルJavaScript(jquery.dragscroll.js)：

(function() {
  $.fn.dragScroll = function() {
    var target = this;
    $(this).mousedown(function (event) {
      $(this)
        .data('down', true)
        .data('x', event.clientX)
        .data('y', event.clientY)
        .data('scrollLeft', this.scrollLeft)
        .data('scrollTop', this.scrollTop);
      return false;
    }).css({
      'overflow': 'hidden', // スクロールバー非表示
      'cursor': 'move'
    });
    // ウィンドウから外れてもイベント実行
    $(document).mousemove(function (event) {
      if ($(target).data('down') == true) {
        // スクロール
        target.scrollLeft($(target).data('scrollLeft') + $(target).data('x') - event.clientX);
        target.scrollTop($(target).data('scrollTop') + $(target).data('y') - event.clientY);
        return false; // 文字列選択を抑止
      }
    }).mouseup(function (event) {
      $(target).data('down', false);
    });

    return this;
  }
})(jQuery);