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即可。还是看官网给的示例代码：

 

 

// 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})"
});