関西支店の神庭です。
Sencha Ext JSにおいて、ViewでStoreを指定する際、記法により挙動が変わります。目的に合わせて使い分けましょう。
- Storeオブジェクト指定
- StoreID指定
- Config Object指定
共通事項
全例において下記Storeを使用するものとします。
1
2
3
4
5
6
7
8
9
|
Ext.define('Hoge.store.MyStore', {
extend: 'Ext.data.Store',
alias: 'store.mystore',
storeId: 'MyStore',
autoLoad: true,
//色々省略
});
|
Storeオブジェクト指定
1
2
3
4
5
6
7
|
Ext.define('MyGrid1', {
extend: 'Ext.grid.Panel',
//色々省略
//現物を渡す
store: Ext.create('Hoge.store.MyStore'),
});
|
オブジェクト事態の指定はそのまま渡された物が使われます。
例えばExt.createなら新規インスタンスが、Ext.getStoreなら取得されたインスタンスが入ります。
見たままなので特筆すべきことはないです。
StoreID指定
1
2
3
4
5
6
7
|
Ext.define('MyGrid2', {
extend: 'Ext.grid.Panel',
//色々省略
//StoreIDで指定
store: 'MyStore'
});
|
StoreIDで指定は、該当StoreIDを持つStoreの実体が存在している必要があります。つまりどこかで、Ext.create(‘Hoge.store.MyStore’)などで生成される必要があります。当オブジェクト(MyGrid2)以外で管理されているStoreを設定したい場合に使います。注意点ですが、StoreのFilter, Sortなどはインスタンスに対して適用されるので、使いまわすとそれらの状態も共有します。
Config Object指定
1
2
3
4
5
6
7
8
9
10
|
Ext.define('MyGrid3', {
extend: 'Ext.grid.Panel',
//色々省略
//Ext.data.Storeのconfig objectを渡す。
store: {
//typeコンフィグにStoreのaliasを渡す。
type: 'mystore'
},
});
|
config object指定は新しいStoreインスタンスを作成します。一つのStore定義を複数個所で使いたい、しかし状態は共有したくないときに使います。
補足: ChainedStore
データソースを同一としながらFilterとSortだけ別に使えるChainedStoreというクラスも存在します。ただしChainedStoreにはsync, saveなどのメソッドはなく、ChainedStoreからデータソースに変更を加えることは想定されていないことに注意する必要があります。つまりもしStoreインスタンスを分けたい理由が「表示」にのみあるのなら、ChainedStoreの使用を検討すべきです。