添加项目到窗口Extjs 4 [英] adding item to window Extjs 4

问题描述

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

  Ext.define（'Metrics.view.ChartWin'，{
 extend：['Ext.window.Window']，
 alias：'widget.chartwin'，
要求：['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（'确认下载'，'你想以图像形式下载图表'，function（choice）{
 if（choice =='yes'）{ 
 chart.save（{
 type：'image / png'
 }）; 
} 
}）; 
} 
}]，
 items：[{
 //我猜这个问题来自这里？ 
 xtype：'drawchart'
}] 
}）; 
  

我的图表：

  Ext.define（'Metrics.view.DrawChart'，{
 extends：'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：[
 {
标题：'Week'，
 type：'Numeric'，
 position：'left'，
 fields：['Week']，
 grid：true 
 
}，
 {
 title：'In Out Backlog'，
 type：'Numeric'，
 position：'bottom'，
 fields ：['BL1 Alt'] 
 
} 
]，
 
主题：'红'，
 
 
系列： [
 {
 // BLA BLA BLA 
}] 
}）; 
  

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

 无法读取属性'isInstance'未定义
  / pre> 
 
 
谢谢。
解决方案
删除
  renderTo：Ext.getBody（）
  
从您的图表定义。图表应该在窗口中呈现。 
然后实例化一个窗口并将图表设置为一个项目：
  Ext.create（'Ext.window。窗口'，{
 ... 
项目：[{
 xtype：'drawchart'
}] 
 ... 
  
查看代码： http://jsfiddle.net/AMx6r/1282/  
 
I've been digging my mind all this morning to find the solution to this, I have an Extjs window where I want to put a chart as an item. I'm using Extjs 4, here's my window : 
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'
    }]
    });
My chart : 
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    
 }]
 }); 
My chart works fine. Now please tell me, how do I add this chart to my window ? I get this error message : 
 Cannot read property 'isInstance' of undefined 
Thank you.
解决方案
Remove 
renderTo: Ext.getBody()
from your chart definition. The Chart should be rendered in the window.
Then instantiate a window and set the chart as an item there:
Ext.create('Ext.window.Window', {
...
items: [{
    xtype: 'drawchart'
}]
...
Look at the code here: http://jsfiddle.net/AMx6r/1282/

                        
这篇关于添加项目到窗口Extjs 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！