ExtJS AJAX returned JSON object - json

Question

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'}
]
}),

Answer 1

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.