這塊內容,是點擊左側欄目列表中的欄目後,加載到中間內容區域(Tab選項卡)的的內容。ui
這個,在整個系統中,是相對簡單的功能。this
一個Panel,上邊是Chart,下邊是詳細數據。spa
惟一值得說一下的就是圖表類型切換,也就是:餅狀圖和柱狀圖的切換。code
我本來是但願只切換Chart組件的axes和series屬性,但簡單嘗試了一下,沒成功,因爲時間關係,便放棄了。blog
轉而採用最簡單的方式:就是把現有Chart銷燬,而後再從新建立新的Chart。ip
切換按鈕代碼:rem
this.turnAction = Ext.create('Ext.Action', { text: '切換爲柱狀圖', iconCls: 'icon_chartbar', scope: this, handler: function () { this.chartType = !this.chartType; this.buildChart(true); } });
具體實現代碼:get
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圖表和下邊的詳細,所綁定的數據是同樣的。。。權限控制
=========================分隔線====================================it
其餘的數據展現功能,都差很少,只是數據不同,再就是圖表類型不同,就不一一介紹了。
下一篇,說說權限控制及實現吧。