ExtJS14：GoogleChart渲染的性能优化

如果使用《 Ext汇总整理（三）Google Chart应用 》中的应用方案，如果后台的统计数据需要等待很长时间，而发送的请求是同步方式的，必须等待请求回来之后才会继续往下执行，这样整个界面就会被阻塞，很可能造成界面死掉。

思考：所以画图渲染界面的过程必须使用异步方式进行渲染，这样可以先将图那一块的控件设为空，这样就不会阻塞其他组件的渲染，在渲染其他的组件的过程中，如果异步请求的统计数据返回成功了，即可将返回的统计数据渲染到原来为空的饼图控件位置。

优化方案：

// 初始化组件

initUIComponents : function(_cfg) {

//1.定义异步请求，渲染控件。

//   之所以要在渲染界面之前就异步发送请求，是因为从后台调用统计数据的时间远比界面渲染的时间要长得多，

//   所以先异步发送请求从后台读取数据，在取到数据之后，此时id:'piechart'控件的位置已经渲染出来，便可以

//   将GoogleChart控件渲染到该盒子位置。

    Ext.Ajax.request({

url : __ctxPath + '/outb/listCountsObSaletask.do?comId=' + _cfg.comId,

method : 'post',

success : function(responsea) {

var result = Ext.util.JSON.decode(responsea.responseText);//解析数据

var data = [result.LAY_UP,result.PLAN,result.FLOWING,result.FAIL_CASE,result.SUCC_CASE,

                                            result.NO_EXEC,result.CANCELED];

pieLabel = ["未执行,"+result.NO_EXEC,"预约,"+result.PLAN,"已取消,"+result.CANCELED,

                                            "已失败结案,"+result.FAIL_CASE,"已成功结案,"+result.SUCC_CASE,"待追踪,"+result.FLOWING,

                                            "搁置,"+result.LAY_UP];

var pieChartPic = new Ext.ux.GoogleChart({

    chartType:"pie3d"

    , id : 'pieChartPicID'

    , width : 300

    , dataType:"extended"

                           ,  chartColors:["ff2400", "94660e", "9B30FF","D3D3D3","FFFF00","ADFF2F","8E388E"]

//       ,   title:""

//       ,labels:["未执行","预约","已取消","已失败结案","已成功结案","待追踪","搁置"]

                        });

pieChartPic.addData("data", data);//加载数据

pieChartPic.labels = pieLabel;//定义标签

pieChartPic.render('piechart');//渲染GoogleChart组件

                  },

failure : function() {

Ext.ux.Toast.msg('操作信息', '统计数据读取延时，请联系管理员！');

}

    });

......

//2.声明一个空控件。

{

columnWidth : .5,

border : false,

style : 'text-align:center',

id:'piechart',//控件ID，异步请求需要调用的渲染的标识

items:[]//初始化为空

}

//开始渲染界面

},// end of the initComponents()