ExtJSノートStore

18541 ワード

The Store class encapsulates a client side cache of  Model  objects. Stores load data via a  Proxy , and also provide functions for  sortingfiltering  and querying the  model  instances contained within it.
Storeクラスは、Modelオブジェクトのクライアントでのキャッシュをカプセル化します.storeはproxyを介してデータをロードし、modelインスタンスをソート、フィルタリング、クエリーする関数を提供します.
Creating a Store is easy - we just tell it the Model and the Proxy to use for loading and saving its data:
storeの作成は簡単です.modelとproxyに伝えるだけです.
// Set up a model to use in our Store
 Ext.define('User', {
     extend: 'Ext.data.Model',
     fields: [
         {name: 'firstName', type: 'string'},
         {name: 'lastName',  type: 'string'},
         {name: 'age',       type: 'int'},
         {name: 'eyeColor',  type: 'string'}
     ]
 });

 var myStore = Ext.create('Ext.data.Store', {
     model: 'User',
     proxy: {
         type: 'ajax',
         url: '/users.json',
         reader: {
             type: 'json',
             root: 'users'
         }
     },
     autoLoad: true
 });

 
In the example above we configured an AJAX proxy to load data from the url '/users.json'. We told our Proxy to use a JsonReader  to parse the response from the server into Model object -  see the docs on JsonReader  for details.
上記の例ではajaxエージェントを'/usersから構成した.json'はデータをロードします.JsonReaderを使用してサービス側の応答をmodelオブジェクトに解析するようエージェントに伝えた.詳細はsee the docs on JsonReaderを参照

Inline dataインラインデータ


Stores can also load data inline. Internally, Store converts each of the objects we pass in as  data  into Model instances:
storeは、インライン方式でデータをロードできます.内部では、store変換はmodelインスタンスに変換されます.
 Ext.create('Ext.data.Store', {
     model: 'User',
     data : [
         {firstName: 'Ed',    lastName: 'Spencer'},
         {firstName: 'Tommy', lastName: 'Maintz'},
         {firstName: 'Aaron', lastName: 'Conran'},
         {firstName: 'Jamie', lastName: 'Avins'}
     ]
 });

 
Loading inline data using the method above is great if the data is in the correct format already (e.g. it doesn't need to be processed by a  reader ). If your inline data requires processing to decode the data structure, use a  MemoryProxy  instead (see the  MemoryProxy  docs for an example).
データフォーマットが正しい場合(readerで処理する必要はありません)、インラインデータを使用するのは良いです.インラインデータがデータフォーマットを解析する必要がある場合は、MemoryProxyを使用します.
Additional data can also be loaded locally using  add .
追加のデータはaddメソッドでロードできます.

Dynamic Loading動的ロード


Stores can be dynamically updated by calling the  load  method:
storeはloadメソッドを呼び出すことで動的に更新できます.
store.load({
    params: {
        group: 3,
        type: 'user'
    },
    callback: function(records, operation, success) {
        // do something after the load finishes
    },
    scope: this
});

 
Here a bunch of arbitrary parameters is passed along with the load request and a callback function is set up to do something after the loading is over.
この例では,任意のパラメータのセットがload法によって伝達され,コールバック関数はloadを終了させるときに何かをすることができる.

Loading Nested Dataネストデータのロード


Applications often need to load sets of associated data - for example a CRM system might load a User and her Orders. Instead of issuing an AJAX request for the User and a series of additional AJAX requests for each Order, we can load a nested dataset and allow the Reader to automatically populate the associated models. Below is a brief example, see the  Ext.data.reader.Reader  intro docs for a full explanation:
appは、crmシステムがusersとそのordersをロードするなど、関連するデータのセットをロードする必要があることが多い.1つの方法はajaxリクエストによってuserを取得し、一連の追加リクエストによって各受注を取得し、ネストされたデータセットをロードし、readerに関連するモデルを自動的に組み立てることができます.詳細はExt.data.reader.Readerを参照してください.
 var store = Ext.create('Ext.data.Store', {
     autoLoad: true,
     model: "User",
     proxy: {
         type: 'ajax',
         url: 'users.json',
         reader: {
             type: 'json',
             root: 'users'
         }
     }
 });

 
Which would consume a response like this:
私たちはこのような応答を消費します.
 {
     "users": [{
         "id": 1,
         "name": "Ed",
         "orders": [{
             "id": 10,
             "total": 10.76,
             "status": "invoiced"
        },{
             "id": 11,
             "total": 13.45,
             "status": "shipped"
        }]
     }]
 }

 
See the  Ext.data.reader.Reader  intro docs for a full explanation.

Filtering and Sortingフィルタリングとソート


Stores can be sorted and filtered - in both cases either remotely or locally. The  sorters  and  filters  are held inside  MixedCollection  instances to make them easy to manage. Usually it is sufficient to either just specify sorters and filters in the Store configuration or call  sort  or  filter :
storeはソートおよびフィルタリングできます.リモートおよびローカルモードをサポートします.MixedCollection内部ではsortersfiltersが管理されている.stroe構成項目でsortersとfiltersを指定するか、sortまたはfilterを直接呼び出すかの2つの方法があります.
 var store = Ext.create('Ext.data.Store', {
     model: 'User',
     sorters: [{
         property: 'age',
         direction: 'DESC'
     }, {
         property: 'firstName',
         direction: 'ASC'
     }],

     filters: [{
         property: 'firstName',
         value: /Ed/
     }]
 });

 
The new Store will keep the configured sorters and filters in the MixedCollection instances mentioned above. By default, sorting and filtering are both performed locally by the Store - see  remoteSort  and  remoteFilter  to allow the server to perform these operations instead.
この新しいstoreはMixedCollectionインスタンスにsortersとfiltersの構成を保存します.デフォルトでは、ソートおよびフィルタリングはローカルで実行されます.サーバが実行できるようにするには、remoteSortおよびremoteFilterを参照してください.
Filtering and sorting after the Store has been instantiated is also easy. Calling  filter  adds another filter to the Store and automatically filters the dataset (calling  filter  with no arguments simply re-applies all existing filters). Note that by default  sortOnFilter  is set to true, which means that your sorters are automatically reapplied if using local sorting.
storeをインスタンス化すると、フィルタリングとソートを変更するのも簡単です.フィルタを呼び出して他のフィルタを追加し、データセットを自動的にフィルタします(パラメータなしでフィルタを直接呼び出すと、既存のフィルタが再適用されます).sortOnFilterのデフォルトはtrueです.これは、sorterが自動的に再適用されることを意味します.
store.filter('eyeColor', 'Brown');

 
Change the sorting at any time by calling  sort :
いつでもsortメソッドを呼び出してソートを変更します.
store.sort('height', 'ASC');

 
Note that all existing sorters will be removed in favor of the new sorter data (if  sort  is called with no arguments, the existing sorters are just reapplied instead of being removed). To keep existing sorters and add new ones, just add them to the MixedCollection:
既存のソートはすべて置換されることに注意してください(sortがパラメータなしで呼び出されると、削除ではなく既存のsorterが再適用されます).既存のソートを保持して新しいソートを追加する場合は、MixedCollectionに追加します.
store.sorters.add(new Ext.util.Sorter({
    property : 'shoeSize',
    direction: 'ASC'
}));

store.sort();

 

Registering with StoreManager StoreManager StoreManagerに登録


Any Store that is instantiated with a  storeId  will automatically be registered with the  StoreManager . This makes it easy to reuse the same store in multiple views:
1つのstoreIdでインスタンス化されたstoreは、StoreManagerに自動的に登録されます.これにより、複数のビュー間で同じstoreを再利用しやすくなります.
//this store can be used several times
Ext.create('Ext.data.Store', {
    model: 'User',
    storeId: 'usersStore'
});

new Ext.List({
    store: 'usersStore',
    //other config goes here
});

new Ext.view.View({
    store: 'usersStore',
    //other config goes here
});

 

Further Readingエクステンション読書


Stores are backed up by an ecosystem of classes that enables their operation. To gain a full understanding of these pieces and how they fit together, see:
storeはクラスシステムに基づいて構築されます.それらを完全に理解し、どのように一緒に仕事をするかを明らかにするには、次を参照してください.
  • Proxy  - overview of what Proxies are and how they are used
  • Model  - the core class in the data package
  • Reader  - used by any subclass of  ServerProxy  to read a response