在 ExtJS 3 应用程序中使用 ExtJS 4 图表

Question

我正在尝试使用 ext-all-sandbox.js 将 Ext4 图表添加到现有的 Ext3 应用程序。我已经掌握了基础知识，但下面的代码给出了 axis.processView 不是函数。在没有定义轴的情况下它工作得很好（但显然没有轴）。

看来配置对象是直接使用的，而不是用于创建实际的轴实例。有什么解决方案可以让它发挥作用吗？

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'
                }
            ]
        });
    }
});

Answer 1

快速查看源代码后，我认为您的问题可能来自于您在 afterRender 中创建图表这一事实。

我特别想到这些行

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

配置对象是在之前解析的。否则尝试在那里设置断点并检查对象。