extjs6怎么接收后端传过来的map集合里面有两个list集合的数据并格式化到model层
时间: 2024-05-29 08:12:33 浏览: 105
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
可以使用Ext.data.reader.Json的transform方法将后端传过来的数据进行格式化,然后再通过Ext.data.Model的set方法将格式化后的数据设置到model的属性中。
以下是一个示例代码:
假设后端返回的数据格式如下:
{
"name": "John",
"age": 30,
"address": {
"city": "New York",
"state": "NY"
},
"hobbies": ["reading", "swimming"],
"friends": [
{"name": "Mike", "age": 28},
{"name": "Kate", "age": 32}
]
}
那么在前端可以这样处理:
// 定义数据模型
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'},
{name: 'city', type: 'string'},
{name: 'state', type: 'string'},
{name: 'hobbies', type: 'auto'},
{name: 'friends', type: 'auto'}
]
});
// 定义数据代理
Ext.define('MyProxy', {
extend: 'Ext.data.proxy.Ajax',
alias: 'proxy.myproxy',
reader: {
type: 'json',
transform: function(data) {
// 将address对象的属性展开到根级别
data.city = data.address.city;
data.state = data.address.state;
delete data.address;
// 将friends数组转换成对象
var friends = {};
Ext.each(data.friends, function(friend) {
friends[friend.name] = friend.age;
});
data.friends = friends;
return data;
}
}
});
// 定义数据源
var store = Ext.create('Ext.data.Store', {
model: 'MyModel',
proxy: {
type: 'myproxy',
url: 'data.json'
}
});
// 加载数据
store.load({
callback: function(records, operation, success) {
if (success) {
// 遍历数据,输出每个记录的属性
Ext.each(records, function(record) {
console.log(record.get('name'));
console.log(record.get('age'));
console.log(record.get('city'));
console.log(record.get('state'));
console.log(record.get('hobbies'));
console.log(record.get('friends'));
});
}
}
});
在transform方法中,先将address对象的属性展开到根级别,然后将friends数组转换成对象。最后返回这个格式化后的数据对象。这样在model中定义的fields可以正确地映射到数据中。
在加载数据时,可以通过callback回调函数获取加载的数据,并通过Ext.data.Model的get方法获取每个记录的属性。
阅读全文