Extjs7.0.0——Store篇

store 是前端用来接收后台响应的对象。

1. Store 的创建方式

1.1 方式一 (Hard Code)

//创建一个Store 对象
Ext.create('Ext.data.Store', {
    // Store 的名字
    storeId: "simpsonsStore",
 
 	//字段名称
    fields: ['name', 'email', 'phone'],
    // 默认数据
    data: [{
        'name': 'Lisa',
        "email": "lisa@simpsons.com",
        "phone": "555-111-1224"
    }, {
        'name': 'Bart',
        "email": "bart@simpsons.com",
        "phone": "555-222-1234"
    }, {
        'name': 'Homer',
        "email": "home@simpsons.com",
        "phone": "555-222-1244"
    }, {
        'name': 'Marge',
        "email": "marge@simpsons.com",
        "phone": "555-222-1254"
    }]
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

例子：

//创建一个Store 对象
Ext.create('Ext.data.Store', {
    // Store 的名字
    storeId: "simpsonsStore",
 
 	//字段名称
    fields: ['name', 'email', 'phone'],
    // 默认数据
    data: [{
        'name': 'Lisa',
        "email": "lisa@simpsons.com",
        "phone": "555-111-1224"
    }, {
        'name': 'Bart',
        "email": "bart@simpsons.com",
        "phone": "555-222-1234"
    }, {
        'name': 'Homer',
        "email": "home@simpsons.com",
        "phone": "555-222-1244"
    }, {
        'name': 'Marge',
        "email": "marge@simpsons.com",
        "phone": "555-222-1254"
    }]
});
 
let columns = [{
    text: 'Name',
    dataIndex: 'name',
    flex: 1
}, {
    text: 'Email',
    dataIndex: 'email',
    flex: 1
}, {
    text: 'Phone',
    dataIndex: 'phone',
    flex: 1
}];
 
let grid = Ext.create('Ext.grid.Grid', {
    title: 'Simpsons',
 
    // Using the Named Store
    store: "simpsonsStore",
 
    columns: columns,
    layout: 'fit',
    renderTo: document.body,
    width: '100%',
    height: 300
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

1.2 方式二(Proxy 请求)

// 当fileds 太过复杂可以单独拆除了定义字段模型
Ext.define('SimpsonsStoreItem', {
        extend: 'Ext.data.Model',
        fields: [
        	{name: 'name', type: 'string'},
            {name: 'email', type: 'string'},
            {name: 'phone', type: 'string'}
        ]
    });

// Store 的名字
let simpsonsStore= new Ext.data.Store({
 	//字段模型，
	model: 'SimpsonsStoreItem',
    // 通过proxy,请求后台数据
    proxy: {
            type: 'ajax',
            //请求路径
            url: 'url'，
            //请求参数
            extraParams: {
                orderNo: orderNo,
                bsn: bsn
            },
            //数据渲染
            render: {
            //指定要data对象的数据
                root: 'data',
                type: 'json'
            }
        },
        //页面加载自动加载
        autoLoad: true
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

2. Store 接收Json数据

Store 接收复杂的Json数据，需要特别主要fields的设置。
常用属性：

• name
• 用来给前端使用，主要是dataIndex，或者遍历store。如果与后台响应的字段名一样则可直接接收数据。
• type
• 指定数据类型：string、number、boolean。
• mapping
• 用来匹配后台响应的数据的字段名，如果名字一样就接收响应数据。存在的意义是，如果想要前端想使用单独的name，可以用mapping，去匹配后台响应的字段名 或者一些复杂的json就需要mapping去匹配了。
• convert
• 后台响应的数据，在接收前转化一下。如：后台传boolean，前台要Y/N则需要转化。

这里以Ext.data.Model对象创建模型举例。
Json:

[
    {
        'name': 'Lisa',
        "email": "lisa@simpsons.com",
        "phone": "555-222-1244"
    }, {
        'name': 'Bart',
        "contact": {"email": "bart@simpsons.com", "phone": "555-222-1244", tel: "1111"}
    }, {
        'name': 'Homer',
        "contact": {"email": "home@simpsons.com", "phone": "555-222-1244", tel: "1111"}
    }, {
        'name': 'Marge',
        "contact": {"email": "marge@simpsons.com", "phone": "555-222-1244", tel: "1111"}
    }]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Ext.define('SimpsonsStoreItem', {
        extend: 'Ext.data.Model',
        fields: [
        	{name: 'name', type: 'string'},
            {name: 'email', type: 'string', mapping: 'contact.email'},
            {name: 'phone', type: 'string', 'contact.phone'}，
            {
       	 	name: 'isAdult',
        	type: 'string',
       	 	convert: function (value) {
            	if(value == null || value == '' || value == 'false' || value == false){
							return 'N';
						}			
               return 'Y';
        			}
    		}
        ]
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

例子：

Ext.create('Ext.data.Store', {
 
    // Named Store
    storeId: "simpsonsStore",
 
    fields: ['name', {name: 'email'}, {name: 'phone', mapping: 'contact.phone'}, {
        name: 'isAdult',
        type: 'string',
        convert: function (value) {
            if(value == null || value == '' || value == 'false' || value == false){
							return 'N';
					}
							
                    return 'Y';
        }
    }],
    data: [
        {
        'name': 'Lisa',
        "email": "lisa@simpsons.com",
        "phone": "555-222-1244",
        "isAdult": false
    }, {
        'name': 'Bart',
        "contact": {"email": "bart@simpsons.com", "phone": "555-222-1244"},
        "isAdult": false
    }, {
        'name': 'Homer',
        "contact": {"email": "home@simpsons.com", "phone": "555-222-1244"},
        "isAdult": true
    }, {
        'name': 'Marge',
        "contact": {"email": "marge@simpsons.com", "phone": "555-222-1244"},
        "isAdult": true
    }]
});
 
let columns = [{
    text: 'Name',
    dataIndex: 'name',
    flex: 1
}, {
    text: 'Email',
    dataIndex: 'email',
    flex: 1
}, {
    text: 'Phone',
    dataIndex: 'phone',
    flex: 1
}, {
    text: 'Adult',
    dataIndex: 'isAdult',
    flex: 1
}];
 
let grid = Ext.create('Ext.grid.Grid', {
    title: 'Simpsons',
 
    // Using the Named Store
    store: "simpsonsStore",
 
    columns: columns,
    layout: 'fit',
    renderTo: document.body,
    width: '100%',
    height: 300
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

效果：