Extjs4.0 Ajax异步取值 动态创建Chart

注意使用的环境：

页面显示一个tab，tab中加载chart,

调用Ext.onReady(function(){});的时候要装载tab

由于chart中的数据都是从数据库中获得，这里必须要使用AJax异步请求，但是请求具体什么时候返回数据，不知道，所以不能直接在装载tab的时候就装载chart（我试验的结果就是，哈哈，什么数据都没有，如果你运气好的话，请求的数据比较快，那么就可以看到一下一下喽~）

基于上面的原因，我改用另一种方式来实现，步骤：

1).Ext.onReady(function(){});的时候要装载tab，代码如下：

Ext.onReady(function(){
Ext.create('Ext.container.Viewport',{
layout:'border',
defaults:{
border:0
},
style:{
background:'#d7d7d7',
margin:'0'
},
items:[{
region:"center",
layout:'fit',
cls:'rmain bd999',
margin:'0 5 0 2',
id: 'center',
border:0,
items:leftItems5
}]
});

2). 现在给tab增加一个监听，在active调用AJAX异步请求的方法（其实就是给tab画上chart）

var leftItems5 = {

xtype: 'tabpanel',
layout: 'fit',
items: [{
title: '显示数据',
items: [],
listeners: {
activate: function(tab){
orderTotalCount(tab);
}
}

3).AJax请求

varorderTotalCount= function(tab){

var dataArray = []; //创建接受数据的数组，存放{name:month,PG_EMALL:10,.....} 类型的对象

Ext.Ajax.request({ //发送AJAX请求，商店和数据都是动态的
url:path('/**************************.json'),//请求的路径
success:function(response,option){
if(response.responseText==""){ //如果请求结果为空 直接返回
return;
}
//response.responseText 请求返回的结果 String 格式
var res = Ext.JSON.decode(response.responseText).result; //将返回的结果，转成json数组
var storeId = "";
var isExits = false; //判断商店是否重复

/***生成动态的storeFields start ***/
for(var i=0;i<res.length;i++){
storeId = res[i].storeId;
for(var j=0;j<dataFields.length;j++){
if(dataFields[j]==storeId){
isExits = true;
break;
}
}
if(!isExits){ //不存在则添加
dataFields.push(res[i].storeId);
store1_fields.push(res[i].storeId);
}
isExits = false;
}
/***生成动态的storeFields end ***/

/***创建一个model用来存储OrderChart对象 start ***/
Ext.define('OrderChart',{
extend: 'Ext.data.Model',
fields: store1_fields
});
/***创建一个model用来存储OrderChart对象 end ***/

/***数据的处理 start ***/
for(var mon=0;mon<12;mon++){ //循环12个月
var orderChart = Ext.ModelManager.create({},'OrderChart'); //创建OrderChart自定义的对象
orderChart.set('name',Ext.Date.monthNames[mon]);

for(var i=0;i<store1_fields.length;i++){ //循环所有的商店

orderChart.set(store1_fields[i],0); //只要商店进来，所有的默认赋值为 0

var currentStore = store1_fields[i]; //当前的商店（用做动态数据的比较）
var storeName = ""; //动态商店的名称
var monthName = ""; //动态月份的名称
var total = ""; //动态商店总额的名称
for(var j=0;j<res.length;j++){
storeName = res[j].storeId;
monthName = res[j].month;
total = res[j].final_total;
if(currentStore==storeName&mon==monthName){
orderChart.set(store1_fields[i],total);
}
}
}
dataArray.push(orderChart);
}
/***数据的处理 start ***/


/*** 测试数据 ***/
// for(var mon=0;mon<12;mon++){ //循环12个月
// dataArray.push({
// 'name':Ext.Date.monthNames[mon],
// 'aa':12,
// 'bb':2323
// });
// }
/*** 测试数据 ***/


/***创建一个store start***/
var store_data = Ext.create('Ext.data.JsonStore',{
fields :　dataFields,
data :　dataArray
});
/***创建一个store end***/

console.info(store1_fields);

var lineChart = Ext.create('Ext.chart.Chart',{
xtype: 'chart',
style: 'background:#fff',
animate: true,
store: store_data,
shadow: true,
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
minimum: 0,
position: 'left',
fields: store1_fields, //动态生成
title: 'Number of Orders',
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
},{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Month of the Year'
}],
series:
[
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'name',
yField: 'aa',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
}
,
{
type: 'line',
yField: 'bb',
markerConfig: {
type: 'circle',
'stroke-width': 0
}
}
]
});

tab.add(lineChart); //这里将chart画上去了哦~
}
});

}