extjs6怎么接收展示一个list集合里面的map集合
时间: 2024-05-29 19:13:25 浏览: 17
您好!关于您的问题,extjs6可以通过使用store和grid实现展示list集合中的map集合。首先,您需要创建一个store并设置其reader属性为json格式,然后通过ajax请求获取list集合数据。接着,您可以在store中定义field和mapping属性,以便将map集合字段映射到store的字段中。最后,您可以创建一个grid并将其绑定到store中,这样就可以展示list集合中的map集合数据了。希望对您有所帮助!
相关问题
extjs6接收展示一个list集合里面的map集合的完整案例
好的,我理解了您的问题。以下是一个简单的 ExtJS 6 的代码示例,用于从一个包含多个 Map 对象的 List 中获取和展示数据:
```
Ext.define('MyApp.model.MyModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' },
{ name: 'values', convert: function (value, record) {
// 将 Map 对象数组转换成字符串
return JSON.stringify(value);
} }
]
});
Ext.create('Ext.grid.Panel', {
store: {
model: 'MyApp.model.MyModel',
data: [
{
id: 1,
name: 'Map Collection 1',
values: [
{ name: 'Key1', value: 'Value1' },
{ name: 'Key2', value: 'Value2' },
{ name: 'Key3', value: 'Value3' }
]
},
{
id: 2,
name: 'Map Collection 2',
values: [
{ name: 'Key4', value: 'Value4' },
{ name: 'Key5', value: 'Value5' },
{ name: 'Key6', value: 'Value6' }
]
}
]
},
columns: [
{ text: 'ID', dataIndex: 'id' },
{ text: 'Name', dataIndex: 'name' },
{ text: 'Values', dataIndex: 'values' }
],
renderTo: Ext.getBody()
});
```
该示例中包含定义一个 `MyModel` 模型的代码,该模型包含名为 `values` 的字段。这个字段使用 `convert` 函数将 Map 对象数组转换成字符串。最后,在 `Ext.grid.Panel` 中,数据存储在 `store` 中,该 `store` 包含多个 `MyModel` 记录,并构建了一个包含多个 `Map` 对象的 `values` 数组。最后,使用 `columns` 属性定义表格中的列,并在页面上呈现出来。
请注意,此代码仅供参考,并假定您已经具有一定的 ExtJS 6 开发经验。如果需要更多的帮助或说明,请随时联系我。
extjs6怎么接收后端传过来的map集合里面有两个list集合的数据
可以使用Ext.Ajax.request()方法,其中options的参数中设置success回调函数,接收后端传过来的数据。在回调函数中,可以使用Ext.decode()方法将后端传来的JSON字符串转化为对象,然后直接访问对象中的map集合和list集合数据。具体代码如下:
```
Ext.Ajax.request({
url: 'yourUrl',
method: 'POST',
success: function(response, options) {
var data = Ext.decode(response.responseText); // 将后端传来的JSON字符串转化为对象
var mapData = data.mapData; // 访问map集合数据
var listData1 = data.listData1; // 访问list集合数据1
var listData2 = data.listData2; // 访问list集合数据2
// do something with mapData, listData1, listData2
},
failure: function(response, options) {
// handle error
}
});
```
相关推荐
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)