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

 

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: '显示数据',
            layout: 'fit',
            items: [],
            listeners: {
                activate: function(tab){
                    orderTotalCount(tab);
                }
            }

3).AJax请求

var orderTotalCount = 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',
                        highlight: {
                            size: 7,
                            radius: 7
                        },
                        axis: 'left',
                        xField: 'name',
                        yField: 'bb',
                        markerConfig: {
                            type: 'circle',
                            size: 4,
                            radius: 4,
                            'stroke-width': 0
                        }
                    }
                    ]
                });
                
                 tab.add(lineChart);   //这里将chart画上去了哦~
            }
        });

    }