Question

I have a predefined pie chart like this:

Ext.create('Ext.chart.Chart', {
        width : 450,
        height : 300,
        animate : true,
        store : store,
        theme : 'Base:gradients',
        series : [{
            type : 'pie',
            field : 'data1',
            showInLegend : true,
            tips : {
                trackMouse : true,
                width : 140,
                height : 28,
                renderer : function(storeItem, item) {
                    // calculate and display percentage on hover
                    var total = 0;
                    store.each(function(rec) {
                        total += rec.get('data1');
                    });
                    this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
                }
            },
            highlight : {
                segment : {
                    margin : 20
                }
            },
            label : {
                field : 'name',
                display : 'rotate',
                contrast : true,
                font : '18px Arial'
            }
        }]
    });

Then I created a Container/Panel, here I am using Container.

I am looking for a way to put my pre-defined chart into the Container. I saw some examples they actually define the chart in the Container field, but that’s not what I want. Is there any way that I can put my pre-specified chart in the items field below so that the chart can be rendered?

Ext.create('Ext.container.Container', {
        layout: 'fit',
        width: 600,
        height: 600,
        renderTo: Ext.getBody(),
        border: 1,
        style: {boderColor: '#000000', borderStyle: 'solid', borderWidth: '1px'},
        items: [{

        }]
    });

Thanks

Answer 1

Yes, it’s as simple as:

var chart = Ext.create('Ext.chart.Chart', {
    animate: true,
    store: store,
    theme: 'Base:gradients',
    series: [{
        type: 'pie',
        field: 'data1',
        showInLegend: true,
        tips: {
            trackMouse: true,
            width: 140,
            height: 28,
            renderer: function(storeItem, item) {
                // calculate and display percentage on hover
                var total = 0;
                store.each(function(rec) {
                    total += rec.get('data1');
                });
                this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
            }
        },
        highlight: {
            segment: {
                margin: 20
            }
        },
        label: {
            field: 'name',
            display: 'rotate',
            contrast: true,
            font: '18px Arial'
        }
    }]
});

Ext.create('Ext.container.Container', {
    layout: 'fit',
    width: 600,
    height: 600,
    renderTo: Ext.getBody(),
    border: 1,
    style: {
        boderColor: '#000000',
        borderStyle: 'solid',
        borderWidth: '1px'
    },
    items: chart
}); 

Also note there’s no use specifying dimensions on the chart since it’s being used in a fit layout.