I am doing a EXTJS4 grid. I need to change some information from my JSON object then return it to store11 so it can load into my EXTJS grid. My issue is below my employeeData function I am getting null values. It appears that the getJson is getting called after my function renders. If I alert items (see below) I am getting values there so I know it is working. I just can't get any values in my EXT grid to populate.
data = {"head":["exec_name","exec_id","P","R","O","M","I","S","E"],
"data":[["Jack Black","4618",".8",".15","1.25",".99",".11",".14",".13"],
["Jack Johnson","7020",".64",".27","2.64","2.73",".32",".09",".09"],
["Jack Daniels","1511","2.25","1.25","5","3.5","1.25","1.25",".75"],
["Jack Miller","4500","0",".4","1.6","1.8","0","0",".4"],
["Mayor Quinby","9624","0","0","1","3","0","0","0"],
["Bart Simpson","0613","1.05",".35","1.35","2.65",".35",".3",".2"],
["Homer Simpson","8470","1",".61","5.17","3.61","1.11","0",".33"],
["Marge Simpson","0718","1.11",".03","1.87","1.76",".45",".55",".16"],
["Lisa Simpson","6291","3.11",".64","2.79","3.21",".57",".43",".43"],
["Maggie Simpson","0298","4.12","1.53","3.74","5.59","2.03","1.03","1"],
["Abu","3392",".3",".17",".57","1.53",".03",".13",".07"],
["Mr Burns","8276","1.56",".46","2.73","2.87",".67",".23",".13"],
["Santas Helper","1005",".37",".08",".75",".77",".12",".03",".05"]]}}
Ext.onReady(function(){
employeeData = function(){
$.getJSON('/eval.rpt_promise', function(data) {
var items = [];
$.each(data.data, function(key, val) {
theJson=[];
$.each(val, function(k, v) {
if(k == 0){k = "exec_name";}
if(k == 1){k = "exec_id";}
if(k == 2){k = "p";}
if(k == 3){k = "r";}
if(k == 4){k = "o";}
if(k == 5){k = "m";}
if(k == 6){k = "i";}
if(k == 7){k = "s";}
if(k == 8){k = "e";}
theJson.push(k+":"+'"'+v+'"');
});
items.push("{"+theJson+"}");
});
alert(items);
});
return items;
};
store11 = Ext.create('Ext.data.JsonStore', {
fields:['exec_name', 'exec_id', 'p', 'r', 'o', 'm', 'i', 's', 'e'],
data: employeeData()
});
store11.loadData(employeeData());
});
When I alert items I get
items = [{exec_name:"Jack Black",exec_id:"4618",p:".8",r:".15",o:"1.25",m:".99",i:".11",s:".14",e:".13"},
{exec_name:"Jack Johnson",exec_id:"7020",p:".64",r:".27",o:"2.64",m:"2.73",i:".32",s:".09",e:".09"},
{exec_name:"Jack Daniels",exec_id:"1511",p:"2.25",r:"1.25",o:"5",m:"3.5",i:"1.25",s:"1.25",e:".75"},
{exec_name:"Jack Miller",exec_id:"5500",p:"0",r:".4",o:"1.6",m:"1.8",i:"0",s:"0",e:".4"},
{exec_name:"Mayor Quinby",exec_id:"9624",p:"0",r:"0",o:"1",m:"3",i:"0",s:"0",e:"0"},
{exec_name:"Bart Simpson",exec_id:"0613",p:"1.05",r:".35",o:"1.35",m:"2.65",i:".35",s:".3",e:".2"},
{exec_name:"Homer Simpson",exec_id:"8470",p:"1",r:".61",o:"5.17",m:"3.61",i:"1.11",s:"0",e:".33"},
{exec_name:"Marge Simpson",exec_id:"0718",p:"1.11",r:".03",o:"1.87",m:"1.76",i:".45",s:".55",e:".16"},
{exec_name:"Lisa Simpson",exec_id:"6291",p:"3.11",r:".64",o:"2.79",m:"3.21",i:".57",s:".43",e:".43"},
{exec_name:"Maggie Simpson",exec_id:"0298",p:"4.12",r:"1.53",o:"3.74",m:"5.59",i:"2.03",s:"1.03",e:"1"},
{exec_name:"Abu",exec_id:"3392",p:".3",r:".17",o:".57",m:"1.53",i:".03",s:".13",e:".07"},
{exec_name:"Mr Burns",exec_id:"8276",p:"1.56",r:".46",o:"2.73",m:"2.87",i:".67",s:".23",e:".13"},
{exec_name:"Santas Helper",exec_id:"1005",p:".37",r:".08",o:".75",m:".77",i:".12",s:".03",e:".05"}]
Why Ext.data.JsonStore ? It should be Ext.data.ArrayStore.
store11 = Ext.create('Ext.data.ArrayStore', {
fields:['exec_name', 'exec_id', 'p', 'r', 'o', 'm', 'i', 's', 'e'],
data: employeeData()
});
The second issue (and main) is employeeData() has asynchronous request and you cannot use result, you should rewrite code to create store in json callback.