如何将数据从json放入ext窗口中的extjs网格视图
[英]How to put data from json to extjs grid view in ext window
问题描述
I have JSON data which is stored in one object. 
我有存储在一个对象中的JSON数据。
Now I have to show data on UI in Grid View. 现在，我必须在网格视图中的UI上显示数据。 When I click on the button one new window should be open and in that window the JSON data will be shown. 当我单击按钮时，应打开一个新窗口，并在该窗口中显示JSON数据。
I am not able to iterate JSON and put the data into grid view. 我无法迭代JSON并将数据放入网格视图。
Here is my code 这是我的代码
var data = response.responseText;
var win = new Ext.Window({
modal : true,
height: 410,
width: 700,
style: 'background: #fff',
insetPadding: 60,
closable : true,
closeAction : 'destroy',
title : 'API Usage',
autoScroll : true,
buttonAlign : 'center',
items: //What should I write?
}]
}).show();
My json data 我的json数据
[
"list",
[
{
"apiName": "List",
"action": "GET",
"count": 24
},
{
"apiName": "Test",
"action": "GET",
"count": 8
}
]
]
Can any one help how will I iterate this JSON data and put the data into this new Window in extJS? 有谁能帮助我如何迭代此JSON数据并将数据放入extJS的新Window中？
2 个解决方案
解决方案1
1 已采纳 2018-04-16 06:39:40
Example, based on your question: 示例，基于您的问题：
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
/** This sounds more like JSON object
* var data = {
* "list": [
* {
* "apiName": "List",
* "action": "GET",
* "count": 24
* },
* {
* "apiName": "Test",
* "action": "GET",
* "count": 8
* }
* ]
* };
*/
var data = [
"list",
[
{
"apiName": "List",
"action": "GET",
"count": 24
},
{
"apiName": "Test",
"action": "GET",
"count": 8
}
]
];
var win = new Ext.Window({
modal : true,
layout: 'fit',
height: 410,
width: 700,
style: 'background: #fff',
insetPadding: 60,
closable : true,
closeAction : 'destroy',
title : 'API Usage',
autoScroll : true,
buttonAlign : 'center',
items: [
{
xtype: 'gridpanel',
autoScroll: true,
stripeRows: true,
width: 420,
height: 200,
columnLines: false,
store: new Ext.data.Store({
fields: ['apiName', 'action', 'count'],
/**
* data: data.list
*/
data: data[1]
}),
columns : [
{header : 'API Name', sortable : true, width: 100, dataIndex : 'apiName'},
{header : 'Action', sortable : true, width : 100, dataIndex : 'action'},
{header : 'Count', sortable : true, width : 100, dataIndex : 'count'}
]
}
]
}).show();
});
</script>
<title>Test</title>
</head>
<body>
</body>
</html>
Notes: Tested with ExtJS 4.2 注意：经过ExtJS 4.2测试
解决方案2
-1 2018-05-15 13:29:31
Below are the detail and modified code for your answer 以下是您的答案的详细信息和修改后的代码
Ext.onReady(function() {
var myData = [
{'apiName':'List', 'action':'GET','count':'23'},
{'apiName':'Test', 'action':'GET','count':'24'}
];
var store = new Ext.data.JsonStore({
fields: [
{ name: 'apiName', type: 'string' },
{ name: 'action', type: 'string' },
{ name: 'count', type: 'string' }
]
});
store.loadData(myData);
var grid = new Ext.grid.GridPanel({
store: store,
loadMask: true,
columns: [
{ header: 'apiName', dataIndex: 'apiName' },
{ header: 'action', dataIndex: 'action' },
{ header: 'count', dataIndex: 'count' }
],
viewConfig: {
forceFit: true
}
});
var myWin = new Ext.Window({
layout: 'fit',
title: 'API Usage',
width: 400,
height: 300,
closable: true,
buttonAlign: 'center',
items: [grid],
modal: true
});
myWin.show();});
**I created a fiddle using your store values in a popup. Go through this link for details code.**
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.