//显示图表 function displayInnerChart(renderId) { innerChart = Ext.create('Ext.chart.Chart', { renderTo: renderId, width: 800, height: 300, animate: true, store: 'com.huawei.drp.jmr.YysInfectStore', axes: [ { type: 'Numeric', position: 'left', fields: ['infectNum'], label: { renderer: Ext.util.Format.numberRenderer('0,0') }, title: '感染主机数', grid: true, minimum: 0 }, { type: 'Category', position: 'bottom', fields: ['date'], title: '全部运营商感染主机数趋势' } ], series: [ { type: 'line', highlight: { size: 7, radius: 5 }, axis: 'left', xField: 'date', yField: 'infectNum', markerConfig: { type: 'circle', size: 4, radius: 3, 'stroke-width': 0 } } ] }); innerChart.getEl().swallowEvent([ 'mousedown', 'mouseup', 'click', 'contextmenu', 'mouseover', 'mouseout', 'dblclick', 'mousemove' ]); } //销毁图表 function destroyInnerChart(record) { var parent = document.getElementById(record.get('pkid')); var child = parent.firstChild; while (child) { child.parentNode.removeChild(child); child = child.nextSibling; } } Ext.define('App.view.com.huawei.drp.jmr.YysInfectView', { extend: 'Ext.form.Panel', alias: 'widget.YysInfectView', border: false, autoScroll: true, bodyPadding : 5, //与边界的距离 items: [{ title: '过滤条件', xtype: 'fieldset', layout: { type: 'table', //table布局 columns: 4 }, defaultType: 'textfield', items: [{ fieldLabel: '时间粒度', xtype: 'combobox', name: 'time', store: Ext.create('Ext.data.ArrayStore', { fields: ['timeId', 'time'], data : [ [ 1, '天' ], [ 2, '月' ] ] }), valueField: 'timeId', displayField: 'time', typeAhead: true, queryMode: 'local', value : 1, margin: '0, 100%, 10, 10' }, { fieldLabel: '开始时间', name: 'startTime', xtype: 'datefield', format : 'Y-m-d', margin: '0, 100%, 10, 10' }, { fieldLabel: '结束时间', name: 'endTime', xtype: 'datefield', format : 'Y-m-d', margin: '0, 100%, 10, 10' }, { xtype : 'component', border: false }, { fieldLabel: '恶意代码类型', xtype: 'combobox', name: 'virisType', store: Ext.create('Ext.data.ArrayStore', { fields: ['typeId', 'typeName'], data : [ [ 0, '全部' ], [ 1, '僵尸' ], [ 2, '木马' ], [ 3, '蠕虫' ] ] }), valueField: 'typeId', displayField: 'typeName', typeAhead: true, queryMode: 'local', value: 0, margin: '0, 100%, 10, 10' }, { fieldLabel: '分析对象', xtype: 'combobox', name: 'analyze', store: Ext.create('Ext.data.ArrayStore', { fields: ['analyzeId', 'analyzeName'], data : [ [ 0, '全部' ], [ 1, '中国移动' ], [ 2, '中国电信' ], [ 3, '中国铁通' ], [ 4, '中国联通' ] ] }), valueField: 'analyzeId', displayField: 'analyzeName', typeAhead: true, queryMode: 'local', value: 0, margin: '0, 100%, 10, 10' }, { xtype : 'component', border: false }, { xtype : 'button', width : 100, text : '查询', margin: '0, 100%, 10, 0' }] }, { xtype: 'grid', border: true, title: '感染主机分布', store: 'com.huawei.drp.jmr.YysInfectStore', columns: [ {text: '运营商', dataIndex: 'carriers', flex: 1}, {text: '感染主机数(台)', dataIndex: 'infectNum', flex: 1}, {text: '环比上一周期情况', dataIndex: 'compPer', flex: 1}, {text: '占比', dataIndex: 'percent', flex: 1} ], plugins: [{ ptype: 'rowexpander', rowBodyTpl: new Ext.XTemplate( '<div id="{pkid}"></div>' ) }], // 另一种实现展开表格行,显示图表的方式 // viewConfig : { // listeners : { // expandbody : function( rowNode, record, expandRow, eOpts ){ // alert('expandbody1'); // displayInnerChart('divId'); // }, // collapsebody: function( rowNode, record, expandRow, eOpts ){ // alert('collapsebody2'); // destroyInnerChart(record); // } // } // }, bbar: { xtype: 'pagingtoolbar', store: 'com.huawei.drp.jmr.YysInfectStore', dock: 'bottom', displayInfo: true } }] });
还要再control里面加事件进行调用
Ext.define('App.controller.com.huawei.drp.jmr.YysInfectCtrl', { extend : 'Ext.app.Controller', views : ['com.huawei.drp.jmr.YysInfectView'], stores : ['com.huawei.drp.jmr.YysInfectStore'], init : function() { this.control({ 'YysInfectView > grid tableview' : { expandbody : function( rowNode, record, expandRow, eOpts ){ displayInnerChart(record.get('pkid')); }, collapsebody: function( rowNode, record, expandRow, eOpts ){ destroyInnerChart(record); } } }); } });
或者这样写
Ext.define('App.controller.com.huawei.drp.jmr.WholeProfileController', { extend : 'Ext.app.Controller', views : ['com.huawei.drp.jmr.WholeProfileView'], stores : ['com.huawei.drp.jmr.JmrWholeMain','com.huawei.drp.jmr.JmrWholeProfileStore'], init : function() { this.control({ 'wholeProfileView grid#areaGrid tableview': { expandbody : this.displayTabChart, collapsebody : this.destroyTabChart } }); }, displayTabChart : function( rowNode, record, expandRow, eOpts ){
...