ExtJS

ExtJS中Store与TreeStore

ExtJS中将后台数据交由前端显示的一般过程为：将数据库中数据通过交互文件和AJAX技术传到前端，根据前端定义的相应的model，将数据加载到相应的store中，将创建的store赋给相应的前端组件即可显示。采取这样的方式，就避免了原生JavaScript等要先将json数据解析，再分析数据，然后根据结果进行显示的耦合性比较高的问题。

Model与TreeModel

Model类型指定了解析json等数据的格式。store可以根据model直接将json等数据解析为model定义的格式。

1
2
3
4
5
6
7
8
9
Ext.define('treeModel', { //定义Model类
    extend: 'Ext.data.Model', //从Ext.data.Model扩展，此外还有treeModel
    fields: [ //其域的名称以及类型要和传递的json数据的格式对应
        { name: 'id', type: 'string' }, 
        { name: 'text', type: 'string' }, //还可以定义默认值等属性
        { name:'name',type:'string'}

    ]
});

TreeStore

本文以TreeStore为例分析，此外还有JsonPStore、JsonStore、XmlStore等store类。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//1.创建store
var treeStore = Ext.create('Ext.data.TreeStore', { 
    model: 'treeModel', //按照treeModel格式解析
    proxy: {
        type: 'ajax',
        url: '..', //指向请求的相应的处理文件的位置。可以通过更改url，使store加载不同的值
        reader: { //定义reader，即对数据进行解码的方式。可采用默认值
            type: 'json'
        }
    }
});

//2.给相应的组件赋值
Ext.create("Ext.tree.Panel",{
		//其他属性
		store:treeStore //将store赋给某个组件的store
	}); 

//3.加载数据及重加载数据
treeStore.load(); //加载，将数据加载到treeStore中。执行这个方法后，控件就会显示数据

treeStore.reload(); //再次加载。当数据更新后，调用此方法重新加载以显示新数据。