在ExtJS 3应用程序中使用ExtJS 4图表 [英] Using ExtJS 4 charts in ExtJS 3 application

问题描述

我试图使用ext-all-sandbox.js将Ext4图表添加到现有的Ext3应用程序中。我有基本的工作，但下面的代码给出 axis.processView不是一个函数。它工作正常，没有轴定义（但没有轴明显）。

I'm trying to add Ext4 charting to an existing Ext3 application, using ext-all-sandbox.js. I've got the basics working, but the code below gives axis.processView is not a function. It works fine without the axes defined (but with no axes obviously).

看起来配置对象正在直接使用，而不是用于创建实际轴实例。任何解决方案，让这个工作？

It appears that the config objects are being used directly instead of being used to create actual axis instances. Any solutions to get this working?

TestGraphPanel = Ext.extend(Ext.Panel, {
    initComponent: function() {
        TestGraphPanel.superclass.initComponent.call(this);

        Ext4.define('DataPoint', {
            extend: 'Ext.data.Model',
            fields: ['xValue', 'yValue']
        });

        this.store = Ext4.create('Ext.data.Store', {
            model: 'DataPoint',
            data: [
                {xValue: 0, yValue: 2},
                {xValue: 1, yValue: 4},
                {xValue: 2, yValue: 7},
                {xValue: 3, yValue: 5},
                {xValue: 4, yValue: 8},
                {xValue: 5, yValue: 9}
            ]
        });
    },

    afterRender: function() {
        Ext4.create('Ext.chart.Chart', {
            renderTo: this.body.dom,
            width: this.ownerCt.getWidth(),
            height: this.ownerCt.getHeight(),
            store: this.store,
            axes: [
                {
                    title: 'x',
                    type: 'Numeric',
                    postition: 'bottom',
                    fields: ['xValue']
                },
                {
                    title: 'y',
                    type: 'Numeric',
                    position: 'left',
                    fields: ['yValue']
                }
            ],
            series: [
                {
                    type: 'line',
                    xField: 'xValue',
                    yField: 'yValue'
                }
            ]
        });
    }
});

推荐答案

问题可能来自于您在afterRender中创建图表的事实。

After a quick look at the source, I think your problem might come from the fact that you're creating your chart in the afterRender.

我在考虑这些线条

//process all views (aggregated data etc) on stores
//before rendering.
me.axes.each(function(axis) {
    axis.processView();
});

配置对象刚刚解析。否则尝试在那里设置一个断点并检查对象。

The config objects are parsed just before. Otherwise try to set a breakpoint in there and check the objects.

这篇关于在ExtJS 3应用程序中使用ExtJS 4图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！