Using ExtJS 4 charts in ExtJS 3 application

Question

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

Answer 1

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.

I'm thinking of those lines in particular

//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.