ExtJS AJAX返回了JSON对象(ExtJS AJAX returned JSON object)

我在ExtJS脚本中有一个AJAX调用，但我不知道如何获取返回的JSON对象并将其分配给变量以在页面上使用。我基本上采用硬编码的extJS脚本并从数据库中放入JSON。这是我需要做的

从这个AJAX调用中获取一个变量：

Ext.onReady(function () { Ext.Ajax.request({ url: '/xxx/clienttool/components/Client-Tool.cfc?method=getResources&returnformat=json', params: { accountID: 463 }, success: function(response){ var text = response.responseText; // process server response here }

}）;

并指定它，以便这些值不是硬编码的：

// Store holding all the resources resourceStore : Ext.create("Sch.data.ResourceStore", { model : 'Sch.model.Resource', data : [ {Id : 'MadMike', Name : 'Mike'}, {Id : 'JakeTheSnake', Name : 'Jake'}, {Id : 'KingFu', Name : 'King'}, {Id : 'BeerBrian', Name : 'Brian'}, {Id : 'LindaAnderson', Name : 'Linda'}, {Id : 'DonJohnson', Name : 'Don'}, {Id : 'KarenJohnson', Name : 'Karen'}, {Id : 'DougHendricks', Name : 'Doug'}, {Id : 'PeterPan', Name : 'Peter'} ] }),

这是整个事情：

Ext.onReady(function () { App.SchedulerDemo.init(); }); App.SchedulerDemo = { // Initialize application init : function () { Ext.define('Event', { extend : 'Sch.model.Event', fields : [ {name : 'Title'}, {name : 'Type'} ] }); //ajax call to get resources for this accountID Ext.Ajax.request({ url: '/xxxx/clienttool/components/Client-Tool.cfc?method=getResources&returnformat=json', params: { accountID: 463 }, success: function(response){ getResources = response.responseText; // process server response here } }); //alert(getResources); var zoneStore = Ext.create('Ext.data.JsonStore', { model : 'Sch.model.Range', data : [ { // Nice 2 hour lunch StartDate : new Date(2011, 11, 9, 12), EndDate : new Date(2011, 11, 9, 14), Cls : 'lunch-style' } ] }); var sched = Ext.create("Sch.panel.SchedulerGrid", { height : ExampleDefaults.height, width : ExampleDefaults.width, rowHeight : 40, eventBarTextField : 'Title', viewPreset : 'hourAndDay', startDate : new Date(2011, 11, 9, 7), endDate : new Date(2011, 11, 9, 20), orientation : 'vertical', constrainDragToResource : false, eventBarIconClsField : 'Type', snapToIncrement : true, //constrainDragToResource : true, eventResizeHandles : 'end', viewConfig : { // Experimental for CSS3 enabled browsers only eventAnimations : true }, // Store holding all the resources resourceStore : Ext.create("Sch.data.ResourceStore", { model : 'Sch.model.Resource', data : [ {Id : 'MadMike', Name : 'Mike'}, {Id : 'JakeTheSnake', Name : 'Jake'}, {Id : 'KingFu', Name : 'King'}, {Id : 'BeerBrian', Name : 'Brian'}, {Id : 'LindaAnderson', Name : 'Linda'}, {Id : 'DonJohnson', Name : 'Don'}, {Id : 'KarenJohnson', Name : 'Karen'}, {Id : 'DougHendricks', Name : 'Doug'}, {Id : 'PeterPan', Name : 'Peter'} ] }),

I have an AJAX call inside an ExtJS script, but I'm not sure how to take the returned JSON object and assign it to a variable for use on the page. I'm basically taking a hardcoded extJS script and puting in JSON from database. Here is what I need to do

Get a variable from this AJAX call:

Ext.onReady(function () { Ext.Ajax.request({ url: '/xxx/clienttool/components/Client-Tool.cfc?method=getResources&returnformat=json', params: { accountID: 463 }, success: function(response){ var text = response.responseText; // process server response here }

});

and assign it so these values aren't hardcoded:

// Store holding all the resources resourceStore : Ext.create("Sch.data.ResourceStore", { model : 'Sch.model.Resource', data : [ {Id : 'MadMike', Name : 'Mike'}, {Id : 'JakeTheSnake', Name : 'Jake'}, {Id : 'KingFu', Name : 'King'}, {Id : 'BeerBrian', Name : 'Brian'}, {Id : 'LindaAnderson', Name : 'Linda'}, {Id : 'DonJohnson', Name : 'Don'}, {Id : 'KarenJohnson', Name : 'Karen'}, {Id : 'DougHendricks', Name : 'Doug'}, {Id : 'PeterPan', Name : 'Peter'} ] }),

Here's the whole thing:

Ext.onReady(function () { App.SchedulerDemo.init(); }); App.SchedulerDemo = { // Initialize application init : function () { Ext.define('Event', { extend : 'Sch.model.Event', fields : [ {name : 'Title'}, {name : 'Type'} ] }); //ajax call to get resources for this accountID Ext.Ajax.request({ url: '/xxxx/clienttool/components/Client-Tool.cfc?method=getResources&returnformat=json', params: { accountID: 463 }, success: function(response){ getResources = response.responseText; // process server response here } }); //alert(getResources); var zoneStore = Ext.create('Ext.data.JsonStore', { model : 'Sch.model.Range', data : [ { // Nice 2 hour lunch StartDate : new Date(2011, 11, 9, 12), EndDate : new Date(2011, 11, 9, 14), Cls : 'lunch-style' } ] }); var sched = Ext.create("Sch.panel.SchedulerGrid", { height : ExampleDefaults.height, width : ExampleDefaults.width, rowHeight : 40, eventBarTextField : 'Title', viewPreset : 'hourAndDay', startDate : new Date(2011, 11, 9, 7), endDate : new Date(2011, 11, 9, 20), orientation : 'vertical', constrainDragToResource : false, eventBarIconClsField : 'Type', snapToIncrement : true, //constrainDragToResource : true, eventResizeHandles : 'end', viewConfig : { // Experimental for CSS3 enabled browsers only eventAnimations : true }, // Store holding all the resources resourceStore : Ext.create("Sch.data.ResourceStore", { model : 'Sch.model.Resource', data : [ {Id : 'MadMike', Name : 'Mike'}, {Id : 'JakeTheSnake', Name : 'Jake'}, {Id : 'KingFu', Name : 'King'}, {Id : 'BeerBrian', Name : 'Brian'}, {Id : 'LindaAnderson', Name : 'Linda'}, {Id : 'DonJohnson', Name : 'Don'}, {Id : 'KarenJohnson', Name : 'Karen'}, {Id : 'DougHendricks', Name : 'Doug'}, {Id : 'PeterPan', Name : 'Peter'} ] }),

最满意答案

如果AJAX请求的唯一目的是检索网格存储的数据，我会完全抛弃它，只需在您的商店中定义一个AJAX代理。它不仅可以实现相同的初始目标（例如，为您的商店获取数据），还可以处理创建数据的模型实例并将商店绑定到网格。

我建议查看商店的文档，以及文档中的网格示例。

If the only purpose of the AJAX request is to retrieve data for your grid's store, I would ditch it altogether and simply define an AJAX proxy on your store. It will not only accomplish the same initial objective (e.g., getting data for your store), but will also handle creating model instances of your data and binding the store to your grid.

I would suggest checking out the docs for the Store, as well as the grid examples in the documentation.

更多推荐