ども、小堤です。
先の投稿で、Ext.setupメソッドにしていするコンフィグオプションの解説を行いましたが、ここでは、それぞれのコンフィグオプションが指定されることにより、何が起こるのかを検証していきます。
addMetaTags
隠しコンフィグオプションとして紹介しましたが、初期値でtrue判定になるので、通常有効になっていると考えてください。
このaddMetaTagsが有効な場合、次のメタタグは、他のコンフィグオプションの設定にかかわらず設定されます。
1 |
<span style="color:#0000FF;"><meta <span style="color:#000000;">name=</span><span style="color:#009900;">"viewport"</span> <span style="color:#000000;">content=</span><span style="color:#009900;">"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0;"</span>></span> |
参考:Using the Viewport Meta Tag
fullscreen
Appleデバイスをフルスクリーンモードで動作させる際に、適切なMETAタグを設定します。
falseを設定しない場合、METAメタタグが設定されます。
falseを指定しない限り有効になります。
有効な場合、次のタグが出力されます。
1 |
<span style="color:#0000FF;"><meta <span style="color:#000000;">name=</span><span style="color:#009900;">"apple-mobile-web-app-capable"</span> <span style="color:#000000;">content=</span><span style="color:#009900;">"yes"</span>></span> |
参考:apple-mobile-web-app-capable
statusBarStyle
iPhone OSでのフルスクリーン時のステータスバースタイルを設定します。
有効な設定値は、”default”,”black”,”black-translucent”のいずれかです。
fullscreenコンフィグオプションが有効な場合のみ、このコンフィグオプションが評価されます。
statusBarStyleコンフィグオプションに文字列が指定されている場合に、有効になります。
有効な場合、次のタグが出力されます。
1 |
<span style="color:#0000FF;"><meta <span style="color:#000000;">name=</span><span style="color:#009900;">"apple-mobile-web-app-status-bar-style"</span> <span style="color:#000000;">content=</span><span style="color:#009900;">"指定された文字列"</span>></span> |
参考:apple-mobile-web-app-status-bar-style
tabletStartupScreen
iPadで動作させる際のスタートアップ画像を指定します。
画像サイズは、768×1004である必要があり、縦方向(portrait)である必要があります。
tabletStartupScreen文字列が指定されていて、かつ、タブレット環境である場合に、次のタグが設定されます。
1 |
<span style="color:#0000FF;"><meta <span style="color:#000000;">name=</span><span style="color:#009900;">"apple-touch-startup-image"</span> <span style="color:#000000;">content=</span><span style="color:#009900;">"指定された文字列"</span>></span> |
phoneStartupScreen
iPhoneまたはiPod touchで動作させる際のスタートアップ画像を指定します。
画像サイズは、320×460である必要があり、縦方向(portrait)である必要があります。
phoneStartupScreen文字列が指定されていて、かつ、携帯電話環境である場合に、次のタグが設定されます。
1 |
<span style="color:#0000FF;"><meta <span style="color:#000000;">name=</span><span style="color:#009900;">"apple-touch-startup-image"</span> <span style="color:#000000;">content=</span><span style="color:#009900;">"指定された文字列"</span>></span> |
icon
使用するデフォルトアイコンを設定します。
ここで設定されるアイコンは、tabletIconとphoneIconに自動的に設定されます。
画像は、72×72の画像を指定してください。
iconコンフィグオプションに文字列で画像のパスを指定します。
この、コンフィグオプションを指定すると、tabletIconコンフィグオプションとphoneIconコンフィグオプションが指定されるため、それぞれのコンフィグオプションが有効になります。
tabletIcon
tablet用のアイコンを設定します。
iconコンフィグオプションが指定されている場合、この設定は無効です。
画像は、72×72の画像を指定してください。
文字列が指定されているか、iconコンフィグオプションが有効な場合に次のタグが生成されます。
1 |
<span style="color:#0000FF;"><meta <span style="color:#000000;">name=</span><span style="color:#009900;">"apple-touch-icon"</span> <span style="color:#000000;">content=</span><span style="color:#009900;">"指定された文字列"</span>></span> |
また、glossOnIconコンフィグオプションが有効な場合は、代わりに、次のタグが生成されます。
1 |
<span style="color:#0000FF;"><meta <span style="color:#000000;">name=</span><span style="color:#009900;">"apple-touch-icon-precomposed"</span> <span style="color:#000000;">content=</span><span style="color:#009900;">"指定された文字列"</span>></span> |
phoneIcon
phone用のアイコンを設定します。
iconコンフィグオプションが指定されている場合、この設定は無効です。
画像は、72×72の画像を指定してください。
文字列が指定されているか、iconコンフィグオプションが有効な場合に次のタグが生成されます。
1 |
<span style="color:#0000FF;"><meta <span style="color:#000000;">name=</span><span style="color:#009900;">"apple-touch-icon"</span> <span style="color:#000000;">content=</span><span style="color:#009900;">"指定された文字列"</span>></span> |
また、glossOnIconコンフィグオプションが有効な場合は、代わりに、次のタグが生成されます。
1 |
<span style="color:#0000FF;"><meta <span style="color:#000000;">name=</span><span style="color:#009900;">"apple-touch-icon-precomposed"</span> <span style="color:#000000;">content=</span><span style="color:#009900;">"指定された文字列"</span>></span> |
glossOnIcon
iPhone/iPad/iPod touch上のアイコンに対して角丸や光沢処理を加えます。
tabletIconコンフィグオプションとphoneIconコンフィグオプションが指定され、メタタグが指定される際に、apple-touch-icon-precomposedが指定されるようになります。
preloadImages
先読みする画像のURLを配列で指定します。
配列で指定したURLをsrc属性としてImageオブジェクトを生成します。
例:
1 2 3 4 5 6 7 |
Ext.setup({ preloadImages : [ <span style="color:#009900;">'a.gif'</span>, <span style="color:#009900;">'b.gif'</span>, <span style="color:#009900;">'c.gif'</span> ] }); |
onReady
DOMの読み込みが完了下時点で呼び出される関数オブジェクトを指定します。
いままでの、Ext JSで記載してきたExt.onReadyと同様です。
例:
1 2 3 4 5 |
Ext.setup({ onReady : <span style="color:#000099;">function</span>() { alert(<span style="color:#009900;">'onReady!'</span>) } }); |
scope
onReadyコンフィグオプションで指定した関数オブジェクトのスコープを指定します。
onReadyで指定した関数オブジェクト内のスコープを変更する場合に指定します。
未指定時は、windowがカレントスコープになります。
例:
1 2 3 4 5 6 7 8 9 |
Ext.setup({ onReady : <span style="color:#000099;">function</span>() { alert(<span style="color:#009900;">'onReady!'</span>); alert(<span style="color:#000099;">this</span>.foo); }, scope : { foo: <span style="color:#009900;">'bar'</span> } }); |
はい、全部説明でした(笑)
先にもいいましたが、ソースコードリーディングしながら書いてるので、めっさ時間かかる。。。。
まぁ、ほぼほぼあってるはずです(爆
初歩で、Ext.onReadyのように指定するものが関数オブジェクト1個から始まったExt JSに対して、Sencha Touchは、コンフィグオプションで幾つか指定するようになっています。
なにこれ?とかコンフィグオプションで思ったときに参考にしてもらえればと思います。
あでゅ(手
Pingback: Tweets that mention Sencha Touch Ext.setup(2) - code:x -- Topsy.com