这块内容，是点击左侧栏目列表中的栏目后，加载到中间内容区域（Tab选项卡）的的内容。

这个，在整个系统中，是相对简单的功能。

一个Panel，上边是Chart，下边是详细数据。

唯一值得说一下的就是图表类型切换，也就是：饼状图和柱状图的切换。

实现过程

我原本是希望只切换Chart组件的axes和series属性，但简单尝试了一下，没成功，由于时间关系，便放弃了。

转而采用最简单的方式：就是把现有Chart销毁，然后再重新创建新的Chart。

切换按钮代码：

this.turnAction = Ext.create('Ext.Action', {            text: '切换为柱状图',            iconCls: 'icon_chartbar',            scope: this,            handler: function () {                this.chartType = !this.chartType;                this.buildChart(true);            }        });

具体实现代码：

buildChart: function (isRemove) {        var me = this;        if (isRemove) {            this.chartBox.removeAll(true);        }        if (this.chartType) {            var strTitle = "";            var areaType = this.areaTypeField.getValue();            if (areaType == '1') {                strTitle = '省份';            }            else if (areaType == '2') {                strTitle = '大区';            }            //--修改切换按钮的图标及标题            this.turnAction.setIconCls('icon_chart_pie');            this.turnAction.setText('切换为饼状图');            this.areaChart = Ext.create('Ext.chart.Chart', {                shadow: true,                theme: 'Base:gradients',                animate: true,                store: this.dataStore,                axes: [{                    type: 'Numeric',                    position: 'left',                    fields: ['PV'],                    title: 'PV',                    grid: true                }, {                    type: 'Category',                    position: 'bottom',                    fields: ['Name'],                    title: strTitle                }],                series: [{                    type: 'column',                    axis: 'left',                    highlight: true,                    tips: {                        trackMouse: true,                        width: 140,                        height: 28,                        renderer: function (storeItem, item) {                            this.setTitle(storeItem.get('Name') + ' PV: ' + storeItem.get('PV') + ' ');                        }                    },                    xField: 'Name',                    yField: 'PV'                }]            });        }        else {            //--修改切换按钮的图标及标题            this.turnAction.setIconCls('icon_chartbar');            this.turnAction.setText('切换为柱状图');            this.areaChart = Ext.create('Ext.chart.Chart', {                shadow: true,                legend: {                    position: 'right'                },                animate: true,                //insetPadding: 60,                theme: 'Base:gradients',                store: me.dataStore,                series: [{                    type: 'pie',                    angleField: 'PV',                    showInLegend: true,                    highlight: {                        segment: {                            margin: 20                        }                    },                    tips: {                        trackMouse: true,                        renderer: function (storeItem, item) {                            if (me.totalPV <= 0) {                                me.dataStore.each(function (rec) {                                    me.totalPV += storeItem.get('PV');                                });                            }                            var strMsg = storeItem.get('Name') + '： ' + storeItem.get('PV') + '（' + Math.round(storeItem.get('PV') / me.totalPV * 100) + '%）';                            this.update(strMsg);                        }                    },                    label: {                        field: 'Name',                        display: 'rotate',                        contrast: true,                        font: '18px Arial'                    }                }]            });        }        if (isRemove) {            this.chartBox.add(this.areaChart);        }    }

当然，Chart图表和下边的详细，所绑定的数据是一样的。。。

=========================分隔线====================================

其他的数据展示功能，都差不多，只是数据不一样，再就是图表类型不一样，就不一一介绍了。

下一篇，说说权限控制及实现吧。