sencha touch筆記（5）——DataView組件（1）

1.DataView組件可以顯示列表，圖像等等的組件或者元素，特別適用於數據倉庫頻繁更新的情況。比如像顯示新聞或者微博等等的很多相同樣式的組件的列表這種一次性從後臺或者數據源拿取很多數據展示的樣式。比如官網給的簡單的示例：

var touchTeam = Ext.create('Ext.DataView', {
    fullscreen: true,
    store: {
        fields: ['name', 'age'],
        data: [
            {name: 'Jamie',  age: 100},
            {name: 'Rob',   age: 21},
            {name: 'Tommy', age: 24},
            {name: 'Jacky', age: 24},
            {name: 'Ed',   age: 26}
        ]
    },

    itemTpl: '<div>{name} is {age} years old</div>'
});

DataView組件是和Store組件緊密聯繫在一起的。當Data組件中的數據發生變化時，也會迅速的反應在DataView的組件上面。
2.Ext.data.Model是 M層，也就是數據層。在想要被展示在UI上面時，它應該被Store組件所使用。官網給的示例代碼：

Ext.define('User', {    //定義一個model
    extend: 'Ext.data.Model',

    config: {
        fields: [ //fields代表model的所有實例所遵循的模式
            {name: 'name',  type: 'string'},
            {name: 'age',   type: 'int'},
            {name: 'phone', type: 'string'},
            {name: 'alive', type: 'boolean', defaultValue: true}
        ]
    },

    changeName: function() {
        var oldName = this.get('name'),
            newName = oldName + " The Barbarian";

        this.set('name', newName);
    }
});

3.Ext.data.Store，Store通過Proxy來獲取加載數據，可以用來將數據展示在Ui上，直觀點講store就是用model的數據組織模式通過proxy來加載數據，最後展示在UI裏面。所以在創建一個store的時候只需要告訴它所需要的model模型和加載時候通過的proxy即可。再通俗一點講。model是數據組織方式，store是存數據的，而list的創建需要數據store和樣式tpl。還是看官網給的示例代碼：

// Set up a model to use in our Store
Ext.define("User", {
    extend: "Ext.data.Model",
    config: {
        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",        //指定引用所需的model

    pageSize:7,//pageSize的作用並不是指在list中每次顯示多少條數據，而是告訴後臺你每次要顯示多少條數據，應該要和後臺相結合的時候纔會顯示出效果來
    proxy: {              //指定proxy
        type: "ajax",     //AJAX從指定的路徑加載數據
        url : "/users.json",
        reader: {
            type: "json",
            rootProperty: "users"
        }
    },
    autoLoad: true
});

Ext.create("Ext.List", {
    fullscreen: true,
    store: myStore,
    itemTpl: "{lastName}, {firstName} ({age})"
});

4.綁定store的方法有兩種，一種是通過組件的配置選項進行綁定，比如list等等；另外一種是使用setStore的方法進行綁定，這個方式在給已有的組件增添或者修改store的時候用的多。例如：

var list = Ext.getCmp('myList');
list.setStore(store);

使用setStore的方法進行store的綁定。
5.store的find方法：

find方法會返回第一次匹配項的下標，若想獲得數據，需要調用getAt(index)的方法去獲得，而且find方法是從前至後進行匹配的，也就是前綴匹配，findExact則是精確匹配：

var index = store.find('firstName', 'Dave');
console.log(index); //Dave第一次出現是在第5條記錄，下標爲4，輸出4。
var record = store.getAt(index);
console.log(record);    //輸出的是一條Dave的那條record。

findBy適用於比較複雜的匹配條件，可以加入一條匹配條件的函數：

var index = store.findBy(function(record){
    return record.get('firstName') == 'Dave' && record.get('lastName') == 'Kaneda';
});
console.log(index);//Dave Kaneda第一次出現是在第14條記錄，下標爲13，輸出13。

通過自定義的方法來設定判斷條件。