Top Support Tips
こんにちは、ゼノフィnakamuraです。
Sencha Supportのチームが毎月のSenchaニュースレターでSenchaフレームワークを利用する最高なコツ (Tips) を提供しています。このブログ記事で、いくつか新しいコツを教え、今年に入ってから掲載されたトップのコツをまとめます。もしこのコツとSenchaフレームワークについての、多くの技術的の記事をご希望なら、毎月のSenchaニュースレターにお申し込み下さい。
MavericksがRuby2を採用 (Sencha Cmd)
by Greg Barry
ご存じかもしれませんが、Sencha Cmdは今までRuby 1.9.3以下に対応していました。Ruby 2.0ではいくつかの変更があって、少し問題があったのです。Ext JSのテーマでは “null !default” にセットされているSass変数を使っています。我々のSassの「Cmdバージョン」は古いバージョンなのは、このような変数の行動が変更されたからです。Ruby 2.0はCmdに含まれているSassのバージョンと互換性がない独特な害を与える変更を導入しました。それは全て互換性の問題をおこしたため、Rubyの古いバージョンが必要でした。
しかし、MavericksのリリースとともにRuby 2.0がデフォルトでインストールされるようになりました。いくつかの点を素早く変更し、現在Ruby 2.0で実行するCmdのビルドがあります。この新しいCmdのビルドは以前経験した問題を防ぐ為にSassのパッチされたバージョンと提供されています。このフィックスはCmd 4.0.1ベータで使用可能となっています。
Ext.util.Observable.capture() (Ext JS)
by Seth Lemmons
Ext.util.Observableを利用するクラスで発火されたイベントを全て見たかったら、静的なchaptureメソッドを利用できます。グリッドで発火されるイベントを見る為に次のような事ができます:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | var grid = Ext.widget('gridpanel', { renderTo: document.body, title: 'Capture Example', heigh: 300, width: 500, store: { fields: ['foo'], data: [{ foo: 'bar' }] }, columns: [{ text: 'Foo', dataIndex: 'foo', flex: 1 }] }); Ext.util.Observable.capture(grid, function (eventName, args) { // console.log() will not work on all browsers - modify accordingly console.log(eventName); // log the event's name as it's fired }); |
captureメソッドは二つ目のパラメータで渡された関数を呼び出します。このコールバック関数にパスされるパラメータは 1)発火されたイベント名 2)イベントの発火からパスされた引数の配列です。
captureメソッドを使うとオブザーバブルなインスタンスがいつとどのようにイベントを発火しているかを知る以外に、コールバックメソッドにおいてfalseを返すとイベントの発火を止めることもできます。もしあるクラスに -beforeイベントがあるなら、イベントを発火することを止める時にそれを利用するのがベストプラクティスですが、もし無い場合、キャプチャメソッドはユーティリティメソッドとしてとても便利です。Observableのキャプチャメソッドについて詳しくは、 ここ で読むことができます。
もうAutoMaximizeは使わない! (Sencha Touch)
by Greg Barry
以前はViewportユーティリティクラスのautoMaximizeの設定でWeb Viewの全画面表示をエミュレートできました。実際にはこれはWebアプリケーションの上下のバーを隠しました。しかし、デバイスがこの回避策を徐々に防ぐようになってきてから、このコンフィグの機能性と有用性はなくなって来ました。実はこのコンフィグはTouch 2.3.0で問題をおこすようになりました、特にiOS7を利用している場合。現在、ユーザーはアプリケーションからautoMaximizeの設定を外すのが推奨されています。
全てのストアを支配する一つのストア (Ext JS)
by Greg Barry
Ext JSでアプリケーションを作成する時には、通常はストアにstoreIdを与え、それは複数のコンポーネント間で共有されます。しかし、もしGrid AとGrid Bがストアを共有するとして、ストアをフィルターすると、両方のグリッドがフィルターされたデータを表示します。もしストアに変更があった時に、全てのコンポーネントを変更させたくない場合はどうしますか? 心配しないで下さい!
ストアを定義する時に、それにstore.storealiasでエイリアスを与えることができます(storealiasは自由につけられるエイリアス名)。
例えば:1 2 3 4 5 6 | Ext.define('MyApp.store.MyStore', { extend: 'Ext.data.Store', storeId: 'MyStore', alias: 'store.mystore', fields: ['foo', 'bar'] }); |
1 2 3 | store: { type: 'mystore' } |
詳しくはドキュメンテーションへ。
線グラフのセグメント化 (Ext JS)
by Mitchell Simoens
Sencha Ext JSはIE6から最新バージョンのChromeまでクロスブラウザで動作する、プラグインレスの豊富で完全な機能のチャートパッケージを提供しています。線グラフを表示しながら、線を途中で途切れさせて表示する方法をよく聞かれます。Ext JSはデータ内のfalse
を利用して、これを簡単に実現できるようになっています。もしfalse
を返されたら、これはデータではないポイントとして扱われて、そのfalseのデータポイントの前後、またはマーカーや連携している線を描画しません。次がその例です:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | var store = Ext.create('Ext.data.Store', { fields : ['month', 'foo', 'bar'], data : [ { month : 'January', foo : 7, bar : false }, { month : 'February', foo : 8, bar : 3 }, { month : 'March', foo : 8, bar : 2 }, { month : 'April', foo : 7, bar : 1 }, { month : 'May', foo : false, bar : 1 }, { month : 'June', foo : 5, bar : 1 }, { month : 'July', foo : 5, bar : 1 }, { month : 'August', foo : false, bar : 1 }, { month : 'September', foo : 7, bar : 1 }, { month : 'October', foo : 8, bar : 2 }, { month : 'November', foo : 8, bar : 3 }, { month : 'December', foo : 7, bar : false } ] }); Ext.create('Ext.chart.Chart', { renderTo : Ext.getBody(), width : 500, height : 300, animate : true, store : store, axes : [ { type : 'Numeric', position : 'left', fields : ['foo', 'bar'], title : 'Sample Values', minimum : 0 }, { type : 'Category', position : 'bottom', fields : ['month'], title : 'Month' } ], series : [ { type : 'line', axis : 'left', xField : 'month', yField : 'foo' }, { type : 'line', axis : 'left', xField : 'month', yField : 'bar' } ] }); |
この例では、fooとbarの値を表示する二つの線のシリーズがあります。fooの線は5月と8月のfalse
値のお陰で三つの個別の線を表示しています。barの線は単一の線になっていますが、falseの値のお陰で、fooの線と違ってbarのシリーズは1月と12月のデータポイントを表示していません。
Field Triggerについて詳しくは次をご覧ください: https://fiddle.sencha.com/#fiddle/mu
Sencha Touchボタンの敏感さを使って反応が良いアプリケーションを構築 (Sencha Touch)
by Greg Barry
デバイスの画像度が向上する度、何人かのユーザーはSencha Touchボタンの敏感性に対する問題に出会うかもしれません。しかし、心配しないで下さい。Sencha Touch 2.2.0でmoveDistanceという新しいイベント認識構成項目を導入しました。MoveDistanceはタッチスタートのイベントが移動する上、まだタップとして認定される最大のピクセル距離を判断します。もっと大きいデバイスでは、デフォルトの8pxはもしかしたら遅すぎるため、いくつかのタップは無視される可能性があります。この敏感性を変更するには、単純に次のコードをアプリケーションブロックに追加して下さい。
1 2 3 4 5 6 7 8 9 10 11 12 13 | Ext.application({ name : 'MyApp', eventPublishers : { touchGesture : { recognizers : { tap : { xclass : 'Ext.event.recognizer.Tap', moveDistance : 20 //This was adjusted from the default 8 } } } } }); |
moveDistanceについて詳しくは こちら へ。
連結の利用:より素早いファイル送信 (Sencha Cmd)
By Seth Lemmons
出力のJavaScriptファイルはCmd作成のインデックスページから連携されているall-classes.jsファイルの時、開発者はよくSencha Cmdを利用してExt JSとSencha Touchアプリケーションを生成します。しかし、もし選択したファイルを連結したくて、もっと素早いファイル送信の為に圧縮したかったどうしますか?
選択されたファイルで単純なファイル生成では(Cmdが各連携されているクラスの依存性を整理する必要があるアプリケーションではなく)fs
とconcat
コマンドを利用できます。
例えば、JavaScriptファイルAとBを連結するには、次のコマンドを利用できます:
sencha fs concat -to=concatenated.js -from=file-a.js,/file-b.js
または、もし出力をミニファイしたかったら、次のようにします:
sencha fs concat -to=concatenated.js -from=file-a.js,file-b.js and minify -yui -from=concatenated.js -to=minified.js
圧縮のオプションとして*-yui または -closure が利用できます。
この機能に関して、詳しくはドキュメンテーションへ: http://docs.sencha.com/extjs/4.2.1/#!/guide/command_advanced
圧縮との戦い(Sencha Cmd and Ext JS)
by Greg Barry
Ext JSのユーザーが圧縮されてないプロダクションビルドを生成したい状況が現れる可能性もあります。実はこれは割と簡単にできます。
この場所にあるproduction.propertiesの設定を開いて下さい:
1 | .sencha/app/production.properties |
ここに移動したら、いくつの圧縮設定を変更できます。
YUI圧縮を無効にする場合は次の変更をして下さい:
1 | build.compression.yui=1 |
CSS圧縮を無効するには次の変更をして下さい:
1 | build.css.compress=true |
Sencha Cmdのオプションをカスタマイズすることに対して、詳しくはこちらへ: http://docs.sencha.com/cmd/3.1.2/#!/guide/command_advanced