关于EXTJS panel中chart 图表动态替换时面板关闭再打开问题 TypeError: el is null

查阅了很多资料，网上大多数都是初始化initComponent的方法，但我没成功。谈一下个人见解,本人也是菜鸟。图表替换大致思路就是对面板中item替换，使用add()的方法，

重点部分用红色标注，解决方法就是destory()之后要重建，否则就会报错。部分源码如下：

//待替换的chart
function createHistroyChart(){
    historyChart = Ext.create('Ext.chart.Chart', {
        renderTo: Ext.getBody(),
        id : 'historyChart',
        width: 500,
        height: 300,
        animate: true,
        closeAction :true,
        store: storeHistory,
        axes: [
            {
                type: 'Numeric',
                adjustMaximumByMajorUnit : true,
                adjustMinimumByMajorUnit : true,
                position: 'left',
                fields: ['upSpeed', 'downSpeed'],
                title: '流量值（KB）',
                grid : {
                    odd : {
                        fill : 'black',
                        stroke : 'black',
                        'stroke-width' : 1
                    },
                    even : {
                        fill : 'black',
                        stroke : 'black',
                        'stroke-width' : 1
                    }
                },
                minimum: 0
            },
            {
                type: 'Category',
                position: 'bottom',
                fields: ['date'],
                title: '时间'
            }
        ],
        series: [
            {
                type: 'line',
                title : '上行',
                smooth : true,
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                xField: 'date',
                yField: 'upSpeed',
                markerConfig: {
                    type: 'cross',
                    size: 4,
                    radius: 4,
                    'stroke-width': 0
                }
            },
            {
                type: 'line',
                title : '下行',
                smooth : true,
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                xField: 'date',
                yField: 'downSpeed',
                markerConfig: {
                    type: 'circle',
                    size: 4,
                    radius: 4,
                    'stroke-width': 0
                }
            }
        ]
    }).show();
}

    var win = Ext.create('Ext.window.Window', {
        id : 'speed_win',
        width : 800,
        height : 600,
        iconCls : 'flowMonitor',
        minHeight : 400,
        minWidth : 1000,
        maximizable : true,
        autoShow: true,
        plain : true,
        modal : true,
        title : '流量',
        layout : 'fit',
        items : [{
            xtype : 'chart',
            id : 'old_chart',
            style : 'background:#fff',
            legend : {
                position : 'right'
            },
            store : store,
            itemId : 'chartCmp',
            animate : false,
            shadow: true,
            fixed : true,
            axes : [{
                        type : 'Numeric',
                        adjustMaximumByMajorUnit : true,
                        adjustMinimumByMajorUnit : true,
                        position : 'left',
                        fields : ['upSpeed', 'downSpeed'],
                        title : '流量值（KB）',
                        grid : {
                            odd : {
                                fill : 'black',
                                stroke : 'black',
                                'stroke-width' : 1
                            },
                            even : {
                                fill : 'black',
                                stroke : 'black',
                                'stroke-width' : 1
                            }
                        }
                    }, {
                        type : 'Time',
                        position : 'bottom',
                        fields : 'date',
                        title : '时间',
                        dateFormat : 'h:i:s',
                        step : [Ext.Date.SECOND, 5],
                        aggregateOp : 'sum',
                        constrain : true,
//                        grid: true,
                        fromDate : Ext.Date.add(startDate_remoteSpeed,
                                Ext.Date.SECOND, 5),
                        toDate : Ext.Date.add(startDate_remoteSpeed,
                                Ext.Date.SECOND, 65)
                    }],
            series : [{
                        type : 'line',
                        title : '上行',
                        smooth : true,
                        highlight : {
                            size : 7,
                            radius : 7
                        },
                        axis : ['left', 'bottom'],
                        xField : 'date',
                        yField : 'upSpeed',
                        label : {
                            display : 'none',
                            field : 'upSpeed',
                            renderer : function(v) {
                                return v >> 0;
                            },
                            'text-anchor' : 'middle'
                        },
                        tips : {
                            trackMouse : true,
                            renderer : function(storeItem, item) {
                                if (storeItem.get('upSpeed') != 0) {// 不然0无法显示
                                    this.update(storeItem.get('upSpeed')
                                            + 'KB/S');
                                } else {
                                    this.update('0' + 'KB/S');

                                }
                            },
                            height : 25,
                            width : 80
                        },
                        markerConfig : {
                            type : 'circle',
                            radius : 4,
                            size : 4,
                            'stroke-width' : 0
                        }
                    }, {
                        type : 'line',
                        title : '下行',
                        smooth : true,
                        highlight : {
                            size : 7,
                            radius : 7
                        },
                        axis : ['left', 'bottom'],
                        xField : 'date',
                        yField : 'downSpeed',
                        label : {
                            display : 'none',
                            field : 'downSpeed',
                            renderer : function(v) {
                                return v >> 0;
                            },
                            'text-anchor' : 'middle'
                        },
                        tips : {
                            trackMouse : true,
                            renderer : function(storeItem, item) {
                                if (storeItem.get('downSpeed') != 0) {// 不然0无法显示
                                    this.update(storeItem.get('downSpeed')
                                            + 'KB/S');
                                } else {
                                    this.update('0' + 'KB/S');
                                }

                            },
                            height : 25,
                            width : 80
                        },
                        markerConfig : {
                            type : 'circle',
                            radius : 4,
                            size : 4,
                            'stroke-width' : 0
                        }
                    }]
        }],
        dockedItems : [{
                                hidden : false,
                                xtype : 'checkbox',
                                inputValue : '1',
                                boxLabel : '历史',
                                listeners : {
                                    'dirtychange' :function(th, dirty, eOpts){
                                        if(dirty){
                                            win.getComponent('toolbarid')
                                            .getComponent('historyButton').setDisabled(false);
                                            win.getComponent('toolbarid')
                                            .getComponent('selectTime').setDisabled(true);
                                        }else{
                                            win.getComponent('toolbarid')
                                            .getComponent('historyButton').setDisabled(true);
                                            win.getComponent('toolbarid')
                                            .getComponent('selectTime').setDisabled(false);
                                        }
                                    }
                                }
                            },{
                                itemId : 'historyButton',
                                xtype : 'button',
                                text : '选择时间',
                                disabled : true,
                                handler : function() {
                                    selectTimeWindow();
                                }
                            },{
                                xtype : 'text',
                                padding : '0 0 0 65',
                                text : '时长:00:00:00',
                                itemId : 'durationValue'
                            }, {
                                xtype : 'text',
                                text : '上速率:0KB/S',
                                itemId : 'upSpeedValue'
                            }, {
                                xtype : 'text',
                                text : '下速率:0KB/S',
                                itemId : 'downSpeedValue'
                            }]
                }]
    }).show();
    chart = win.child('#chartCmp');
    win.on("close", function() {
                speedStop = false;
                selectTimeDateForm.destroy();//销毁时间选择面板
                var message = 'closeRemoteSpeed';
                websocket.send(message);
                clearInterval(intr);// 关闭页面刷新定时器
            });
}

function resetRemoteSpeedRecord() {
    remoteSpeedRecord = {
        speed : 0,
        upSpeed : 0,
        downSpeed : 0
    }
}

var selectTimeFormWindows;
function selectTimeWindow(){
    selectTimeForm();
    selectTimeFormWindows = new Ext.Window({
        title : '选择时间',
        layout : 'fit',
        closeAction : 'hide',
        plain : true,
        modal : true,
        resizable : false,
        iconCls : 'logexp',
        items : [selectTimeDateForm]
    }).show();
}

var selectTimeDateForm;
function selectTimeForm(){
    selectTimeDateForm = Ext.create('Ext.form.Panel', {
                bodyPadding : 5,
                bodyCls : 'formBackground',// 背景色CSS
                width : 300,
                height : 120,
                fieldDefaults : {
                    autoFitErrors : false
                },
                defaults : {
                    width : 280,
                    labelWidth : 60
                    // 标签宽度
                },
                defaultType : 'datefield',
                items : [{
                            fieldLabel : '开始时间',
                            name : 'startdt',
                            id : 'startdt_speed',
                            xtype : 'datetimefield',
                            emptyText : '请选择开始时间',
                            editable : false,
                            format : 'Y-m-d',
                            endDateField : 'enddt', // id of the end date field
                            allowBlank : false
                                // 是否允许为空
                            }, {
                            fieldLabel : '结束时间',
                            name : 'enddt',
                            id : 'enddt_speed',
                            xtype : 'datetimefield',
                            emptyText : '请选择结束时间',
                            format : 'Y-m-d',
                            editable : false,
                            startDateField : 'startdt',// id of the start date
                            allowBlank : false
                                // 是否允许为空
                            },{
                                xtype : 'button',
                                text : '确定',
                                width : 50,
                                formBind : true,
                                handler : function() {
                                    speedStop = true;
                                    var oldwin = Ext.getCmp('speed_win');
                                    var oldchart = oldwin.child('#chartCmp');
                                    var select_startTime = Ext.getCmp('startdt_speed')
                                            .getValue();
                                    var select_endTime = Ext.getCmp('enddt_speed').getValue();
                                    storeHistory.load({
                                        params : {
                                            sdate : select_startTime,
                                            edate : select_endTime
                                        },
                                        callback : function(records, operation, success) {
                                            if (!success) {
                                                Ext.example.msg('提示', "您无查看权限");
                                            } else {
                                                selectTimeFormWindows.close();
                                                startDate_remoteHistorySpeed = select_startTime;
                                                endDate_remoteHistorySpeed = select_endTime;
                                                //更换win中的item
                                                if(oldchart){
                                                    oldchart.destroy();
                                                    //要重新创建histroyChart，否则关闭面板再打开无图像
                                                    createHistroyChart();
                                                    //替换win中的Item
                                                    oldwin.add(historyChart).show();
                                                    oldwin.doLayout();
                                                }else{
                                                    historyChart.redraw();
                                                }
                                                selectTimeDateForm.destroy();//时间面板直接关闭后再打开出现显示问题，所以必须每次重建
                                            }
                                            
                                        }
                                    });
                                }
                            }]
            });    
}