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',{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',{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",{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",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。

通过自定义的方法来设定判断条件。

sencha touch笔记（5）——DataView组件（1）

相关文章