Resizableの使い方

Ext.JS

基本的な使い方のメモ。

// target_idはDOMエレメントのID
// 例えば、<div id="target_id">ここがリサイズされる</div>
//
var elm = new Ext.Resizable('target_id', {
  width: 200,
  height: 50,
  minWidth: 0,
  maxWidth: 500,
  handles: 'e',       // 右方向だけリサイズ可
  dynamic: true,    
  transparent: true   // リサイズ時に枠を表示しない
});

// リサイズ時のイベント処理
elm.on("resize", function() {
  // リサイズ後の幅を取得
  alert(this.getEl().getWidth());
});

参考

Ext.JS 公式サイトデモページ　http://extjs.com/deploy/dev/examples/resizable/basic.html