隨它去吧

前言：

 

數據模型[Model]就像模具，它保證了經它手產出的數據都具有一樣的格式，但是數據模型本身并不能直接為view的展示提供內容，因為它并不是數據實體，真正存儲數據實體的是Store，而Store的獲取與保存由需要借助Proxy的力量，所以學習Sencha Touch的Model，就必須熟練掌握Store和Proxy。由于兩篇文章都比較短且關系緊密，所以我把它們合并成一篇來發布。

 

兩文章的英文原址是

http://docs.sencha.com/touch/2-0/#!/guide/stores

http://docs.sencha.com/touch/2-0/#!/guide/proxies

Sencha Touch 交流QQ群213119459歡迎您的加入。

 

Using Stores

使用數據存儲

注：為方便起見，文中所有出現 Sencha Touch的地方均以 ST簡寫替代。

Models are typically used with a Store, which is basically a collection of model instances. Setting up a store and loading its data is simple:

數據模型一般都要跟數據存儲一起使用，而數據存儲其實就是一組數據模型實體的集合。設置一個數據存儲并且加載數據是很簡單的

Ext.create('Ext.data.Store', {

    model: 'User',

    proxy: {

        type: 'ajax',

        url : 'users.json',

        reader: 'json'

    },

    autoLoad: true

});

We configured our store to use an Ajax Proxy, providing the name of the URL from which to load data the Reader used to decode the data. In this case our server is returning JSON, so we've set up a Json Reader to read the response. The store auto-loads a set of User model instances from the URL users.json. The users.json URL should return a JSON string that looks something like this:

我們定義這個數據存儲（store）使用Ajax作為數據代理（proxy），并指定了提供數據的Url和用來解碼數據的閱讀器（reader）。本例當中我們的服務器返回的是JSON格式，所以我們使用Json Reader去讀取和解析數據。這個數據存儲會通過訪問users.json路徑來自動加載一系列使用User數據模型的實例。Users.json這個url應當返回一個JSON字符串，比如下面這樣：

{

    success: true,

    users: [

        { id: 1, name: 'Ed' },

        { id: 2, name: 'Tommy' }

    ]

}

For a live demo, see the Simple Store example.

這里有一個簡單鮮活的例子， Simple Store，我把代碼直接摳過來了

Ext.define('User', {

    extend: 'Ext.data.Model',

    fields: [

        {name: 'id', type: 'int'},

        {name: 'name', type: 'string'}

    ]

});

 

var userStore;

Ext.require('Ext.data.Store');

Ext.onReady(function() {

    userStore = Ext.create('Ext.data.Store', {

        model: 'User',

        autoLoad: true,

 

        proxy: {

            type: 'ajax',

            url: 'data/users.json',

            reader: {

                type: 'json',

                root: 'users',

                successProperty: 'success'

            }

        }

    });

});

 

Inline data

內聯數據

Stores can also load data inline. Internally, Store converts each of the objects we pass in as data into Model instances:

數據存儲也可以通過內聯（內嵌）的方式加載數據。數據存儲內部會把傳入的每一個對象轉成數據模型的實例：

Ext.create('Ext.data.Store', {

    model: 'User',

    data: [

        { firstName: 'Ed',    lastName: 'Spencer' },

        { firstName: 'Tommy', lastName: 'Maintz' },

        { firstName: 'Aaron', lastName: 'Conran' },

        { firstName: 'Jamie', lastName: 'Avins' }

    ]

});

Inline Data example慣例我把代碼直接摳過來方便看

Ext.define('User', {

    extend: 'Ext.data.Model',

    fields: ['firstName', 'lastName']

});

 

var userStore;

Ext.require('Ext.data.Store');

Ext.onReady(function() {

    userStore = Ext.create('Ext.data.Store', {

        model: 'User',

        data: [

            {firstName: 'Ed',    lastName: 'Spencer'},

            {firstName: 'Tommy', lastName: 'Maintz'},

            {firstName: 'Aaron', lastName: 'Conran'},

            {firstName: 'Jamie', lastName: 'Avins'}

        ]

    });

});

 

Sorting and Grouping

排序和分組

Stores are able to perform sorting, filtering, and grouping locally, as well as to support remote sorting, filtering, and grouping:

數據存儲可以在本地實現排序、篩選以及分組，當然也能支持遠程的排序、篩選和分組：

Ext.create('Ext.data.Store', {

    model: 'User',

 

    sorters: ['name', 'id'],

    filters: {

        property: 'name',

        value   : 'Ed'

    },

    groupField: 'age',

    groupDir: 'DESC'

});

In the store we just created, the data will be sorted first by name then id; it will be filtered to only include users with the name Ed, and the data will be grouped by age in descending order. It's easy to change the sorting, filtering, and grouping at any time through the Store API. For a live demo, see the Sorting Grouping Filtering Store example.

在剛才創建的數據存儲里，數據將會按照先name后id的順序進行排序，他還會篩選出僅僅滿足name等于Ed的users，同時數據會按照年齡分組進行降序排列。在任何時候通過Store的api來改變排序、篩選和分組都是很容易的，這里有個例子Sorting Grouping Filtering Store。（下面就是代碼，免得你自己去翻了）

Ext.define('User', {

    extend: 'Ext.data.Model',

    fields: [

        { name: 'id', type: 'int' },

        { name: 'name', type: 'string' },

        { name: 'age', type: 'int' },

        { name: 'bob', type: 'int' }

    ]

});

 

var userStore;

Ext.require('Ext.data.Store');

Ext.onReady(function() {

    userStore = Ext.create('Ext.data.Store', {

        model: 'User',

        autoLoad: true,

 

        sorters: ['name', 'id'], // sort first by name, then by id

        filters: {

            // filter the data to only include users with the name 'Ed'

            property: 'name',

            value: 'Ed'

        },

        groupField: 'age',

        groupDir: 'DESC',

 

        proxy: {

            type: 'ajax',

            url: 'data/users.json',

            reader: {

                type: 'json',

                root: 'users',

                successProperty: 'success'

            }

        }

    });

});

 

Using Proxies

使用數據代理

注：為方便起見，文中所有出現 Sencha Touch的地方均以 ST簡寫替代。

Proxies are used by stores to handle the loading and saving of model data. There are two types of proxy: client and server. Examples of client proxies include Memory for storing data in the browser's memory and Local Storage which uses the HTML 5 local storage feature when available. Server proxies handle the marshaling of data to some remote server and examples include Ajax, JsonP, and Rest.

數據存儲通過代理來處理Model數據的加載和保存。代理有兩種方式，本地代理和服務端代理。例子里的客戶端代理包含了瀏覽器內存和html5的本地存儲兩種介質。服務端代理通過遠程服務器實現數據的處理，包含Ajax、JsonP和Rest方式。

Proxies can be defined directly on a model, like so:

代理可以直接定義在數據模型里，就像這樣：

Ext.define('User', {

    extend: 'Ext.data.Model',

 

    config: {

        fields: ['id', 'name', 'age', 'gender'],

        proxy: {

            type: 'rest',

            url : '/data/users.json',

            reader: {

                type: 'json',

                root: 'users'

            }

        }

    }

});

 

// Uses the User Model's Proxy

Ext.create('Ext.data.Store', {

    model: 'User'

});

This helps in two ways. First, it's likely that every store that uses the User model will need to load its data the same way, so we avoid having to duplicate the proxy definition for each store. Second, we can now load and save model data without a store:

這樣做有兩個好處，第一是每一個使用了這個User數據模型的store都通過一樣的方式來加載數據，這樣我們就沒必要把proxy的定義在每個store里都拷貝一遍了，第二我們現在可以不通過store就實現加載和保存model數據了。

// Gives us a reference to the User class

// 首先實現一個對User數據模型的引用

var User = Ext.ModelMgr.getModel('User');

 

var ed = Ext.create('User', {

    name: 'Ed Spencer',

    age : 25

});

 

// We can save Ed directly without having to add him to a Store first

// because we configured a RestProxy this will automatically send a POST

// request to the url /users

ed.save({

    success: function(ed) {

        console.log("Saved Ed! His ID is "+ ed.getId());

    }

});

 

// Load User 1 and do something with it (performs a GET request to /users/1)

User.load(1, {

    success: function(user) {

        console.log("Loaded user 1: " + user.get('name'));

    }

});

There are also proxies that take advantage of the new capabilities of HTML5 - LocalStorage and SessionStorage. Although older browsers don't support these new HTML5 APIs, they're so useful that a lot of applications will benefit enormously by using them.

我們還有利用了html5新特性備受內地存儲和會話存儲的proxy。雖然比較老一些的瀏覽器不支持這些html5的api，但仍會有很多應用程序會從中受益。