Question

我今天早上一直在挖掘我的想法以找到解决方案，我有一个Extjs窗口，我想把图表作为项目。我正在使用Extjs 4，这是我的窗口：

Ext.define('Metrics.view.ChartWin', {   
extend: ['Ext.window.Window'],  
alias: 'widget.chartwin',   
requires :['Ext.chart.*','Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox', 'Metrics.view.DrawChart'],
    width: 800,
    height: 600,
    minHeight: 400,
    minWidth: 550,
    hidden: false,
    shadow: false,
    maximizable: true,
    title: 'Area Chart',
    renderTo: Ext.getBody(),
    layout: 'fit',
    tbar: [{
        text: 'Save Chart',
        handler: function() {
            Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
                if(choice == 'yes'){
                    chart.save({
                        type: 'image/png'
                    });
                }
            });
        }
    }],
    items:[{
                    //I guess the problem comes from here??
        xtype : 'drawchart'
    }]
    });

我的图表：

Ext.define('Metrics.view.DrawChart', {   
extend: 'Ext.chart.Chart',  
alias: 'widget.drawchart',   
requires: ['Ext.chart.*'],
renderTo: Ext.getBody(),
width: 700,
height: 600,
animate: true,
store:  'GraphData',
shadow : true,
legend: {
            position: 'right'
        },
axes: [
    {
        title: 'Week',
        type: 'Numeric',
        position: 'left',
        fields: ['Week'],
    grid : true

    },
    {
        title: 'In Out Backlog',
        type: 'Numeric',
        position: 'bottom',
        fields: ['BL1 Alt']

    }
],

theme: 'Red',


series: [
 {
 //BLA BLA BLA    
 }]
 });

我的图表工作正常。现在请告诉我，如何将此图表添加到我的窗口？我收到此错误消息：

 Cannot read property 'isInstance' of undefined

谢谢。

Answer 1

删除

renderTo: Ext.getBody()

从图表定义中。图表应该在窗口中呈现。然后实例化一个窗口并将图表设置为那里的项目：

Ext.create('Ext.window.Window', {
...
items: [{
    xtype: 'drawchart'
}]
...

请查看此处的代码：http://jsfiddle.net/AMx6r/1282/

将项添加到窗口Extjs 4

1 个答案: