如何在Ajax成功上使用JSON数据加载网格数据 [英] How to load grid data with json data on ajax sucess
问题描述
在我的ajax成功中，我将此功能称为函数"，然后从响应中提取需要加载的数据.
In my ajax sucess i am calling this funcction and there from response I am extracting the data which I need to load.
success: function(response){
StoreloadData(this,response);
},
在StoreloadData函数中，我试图像这样将数据加载到网格中，但未获取数据.
In StoreloadData function i am trying to load data in my grid like this but not getting data.
StoreloadData(me,response){
var myGrid = Ext.getCmp('#myGrid');
var myGridStore = myGrid.getStore();
var gridData = response.myData.data;
var total = gridData[0].recordsCount;
myGridStore.load(gridData); // Not loading
myGridStore.loadData(gridData); // Not loading
myGrid.refresh(); // Error.
}
我在这行中有myJSon数据.var gridData = response.myData.data;这是一个像这样的简单json对象.
Here I have myJSon data in this line var gridData = response.myData.data; this is a simple json object like this.
[{dataIndex1: "Value1",dataIndex2: "Value2"},
{dataIndex1: "Value1",dataIndex2: "Value2"},
{dataIndex1: "Value1",dataIndex2: "Value2"}]
任何人都可以建议我如何克服这个问题.
Can anyone please suggest me how to overcome from this.
推荐答案
我建议您使用此解决方案.只需使用字段定义定义空存储，然后使用Ext.JSON.decode()和store.loadData()加载数据.
I suggest you this solution. Just define the empty store with fields definitions, then load data using Ext.JSON.decode() and store.loadData().
工作示例:
文件 grid_json_load.json :
{
"data": [
{
"dataIndex1": "Value1",
"dataIndex2": "Value2"
},
{
"dataIndex1": "Value1",
"dataIndex2": "Value2"
}
],
"success": true
}
文件 grid_json_load.html :
<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.define('Test.TestWindow', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 560,
height: 500,
modal: true,
closable: true,
resizable: false,
layout: 'fit',
initComponent: function() {
var me = this;
me.callParent(arguments);
me.store = Ext.create('Ext.data.ArrayStore', {
data: [],
fields: [
{name: "dataIndex1", type: "string"},
{name: "dataIndex2", type: "string"}
]
});
me.grid = Ext.create('Ext.grid.Panel', {
autoScroll: true,
stripeRows: true,
width: 420,
height: 200,
store: me.store,
columnLines: false,
columns : [
{header : 'Data Index 1', width: 100, dataIndex : 'dataIndex1'},
{header : 'Data Index 2', width: 100, dataIndex : 'dataIndex2'}
]
});
me.add(me.grid);
}
});
Ext.onReady(function(){
var win = Ext.create('Test.TestWindow', {
});
Ext.Ajax.request({
url: 'grid_json_load.json',
method: 'POST',
timeout: 1200000,
params: {
},
success: function (response, opts) {
var win = new Test.TestWindow({
});
var r = Ext.JSON.decode(response.responseText);
if (r.success == true) {
win.show();
win.store.loadData(r.data);
} else {
Ext.Msg.alert('Attention', 'Error');
};
}
});
});
</script>
<title>Test</title>
</head>
<body>
</body>
</html>
注意:
经过ExtJS 4.2和ExtJS 6.6的测试.
Tested with ExtJS 4.2 and ExtJS 6.6.
这篇关于如何在Ajax成功上使用JSON数据加载网格数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
