Sencha TouchのListコンポーネントでハマったメモ

Sencha TouchのListコンポーネントでハマったのでメモ。
といっても、上手くメモを残せる自信もないです。

ToolbarとListを持ったPanelを2つ用意します。
本当はこの2つのパネルを乗せる、cardレイアウトの親パネル(TabPanel)を用意して、タブで2つのパネルを切り替えるというのが全体像です。

こういうプログラムを書いた時に、panel_1にstore_1のデータを表示したいのに、なぜかstore_2のデータが表示されてしまうという現象に悩まされました。
「なんだーこれは?」と悩み、ドキュメントみてもよくわからず試行錯誤してたら、panel_2のListコンポーネント中の「fullscreen: true」という指定を消したら正常にstore_1のデータが表示されるようになりました。

ただこのままだと、panel_2のリストが画面の中央にきゅっと寄ってしまします。

そこでpanel_1を参考に、layoutをfitに変更してみました。

これで期待していた画面が表示されるようになりました。

ちなみに、Listコンポーネントのfullscreenコンフィグの説明には、

* 画面の全ての幅と高さをこのコンポーネントで占有します。デフォルト値はfalse。
* このオプションをtrueに設定するとmonitorOrientationも自動的にtrueになります。
* また、このオプションtrueに設定すると、コンポーネントは即時に描画されます。

とあります。
monitorOrientationというのは画面の回転を監視するものらしいです。
まぁ正直よくわからないですけど、List使うときに注意することとしてメモしときます。

Pocket

Posted in Ext JS.

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">