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

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

といっても、上手くメモを残せる自信もないです。

[javascript] var panel_1 = Ext.extend(Ext.Panel, { layout: 'fit',

initComponent: function() {
    this.dockedItems = [{
        dock: 'top',
        xtype: 'toolbar',
        title: 'panel_1'
    }];

    this.items = [{
        xtype: 'list',
        store: store_1,
        itemTpl: '{name}',
        listeners: {
            afterrender: function() {
                this.getStore().load();
            }
        }
    }];

    panel_1.superclass.initComponent.call(this);
}

});

var panel_2 = Ext.extend(Ext.Panel, { layout: 'vertical',

initComponent: function() {
    this.dockedItems = [{
        dock: 'top',
        xtype: 'toolbar',
        title: 'panel_2'
    }];

    this.items = [{
        xtype: 'list',
        fullscreen: true,
        store: store_2,
        itemTpl: '{name}',
        listeners: {
            afterrender: function() {
                this.getStore().load();
            }
        }
    }];

    panel_2.superclass.initComponent.call(this);
}

}); [/javascript]

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

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

[javascript] var panel_2 = Ext.extend(Ext.Panel, { layout: 'vertical',

initComponent: function() {
    this.dockedItems = [{
        dock: 'top',
        xtype: 'toolbar',
        title: 'panel_2'
    }];

    this.items = [{
        xtype: 'list',
        //fullscreen: true,  ここを削除
        store: store_2,
        itemTpl: '{name}',
        listeners: {
            afterrender: function() {
                this.getStore().load();
            }
        }
    }];

    panel_2.superclass.initComponent.call(this);
}

}); [/javascript]

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

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

[javascript] var panel_2 = Ext.extend(Ext.Panel, { //layout: 'vertical', layout: 'fit',

initComponent: function() {
    this.dockedItems = [{
        dock: 'top',
        xtype: 'toolbar',
        title: 'panel_2'
    }];

    this.items = [{
        xtype: 'list',
        //fullscreen: true,  ここを削除
        store: store_2,
        itemTpl: '{name}',
        listeners: {
            afterrender: function() {
                this.getStore().load();
            }
        }
    }];

    panel_2.superclass.initComponent.call(this);
}

}); [/javascript]

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

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

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

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