画像を切り抜きするカスタムコンポーネントを作った | Sencha Advent Calendar 2014 – 15日目

Sencha Advent Calendar 2014の15日目です。

GitHubのプロフィール画像の登録とかで使う画像を切り抜きするカスタムコンポーネントをExtJSで作りました。
こんなやつ。

34ca50632023d832d2415a28466f477e

GitHubに公開しました。
まだ荒削りで機能足りないし、ドキュメントとか書けてませんがとりあえず公開!

整ったらSencha Marketに出したい。

ispern/ext-crop-image
デモ

カスタムコンポーネントを作るにあたり、どのアプリケーションでも使えるようSencha Cmd Package の機構を利用しました。

使い方

サンプルソースは以下のページで確認できます。
https://github.com/ispern/ext-crop-image/tree/master/examples/example-app

パッケージの設置

パッケージはワークスペース内かアプリケーション内のpackagesディレクトリに設置してください。
外部公開したパッケージ使う方法もあるようですが、まだ分からないことが多くて今回は時間切れ・・・。
どこかで書きます。。。

app.jsonの定義

app.jsonでext-crop-imageを定義します。

Ext.form.field.FileButtonの設置

コンポーネントを使うには、Ext.form.field.FileButton使って指定したファイルを受け取るようにします。

changeイベントで受け取ったファイルをFileReaderを使って読み込み、画像データを取得します。

Ext.ux.cropimage.Windowを呼び出す

FileReaderで取得した画像データをExt.ux.cropimage.Windowに渡します。
cropイベントで切り抜いた画像データが取得できるようになっています。

参考ページ

参考にしたページを紹介します。

Sencha Cmdを使ったパッケージの作り方の説明は以下のページで説明されています。

Creating Sencha Cmd Packages

また、SenchaがSencha Cmd Packageを使ったサンプルソースコードがGitHubに公開されています。ディレクトリ構成やpackage.jsonの書き方など参考になりました。

senchalabs/CmdPackages

明日は、@martini3ozさんです!