Example of an ExtJS mix-in to render a chart title on the top of a chart.

MyApp.ChartTitleMixin.js

Ext.define("MyApp.ChartTitleMixin", {
    createTitleItem: function() {
        this.chartTitle = new Ext4.draw.Sprite({
            type: "text",
            "text-anchor": "middle",
            fill: "black",
            "font-size": "12px",
            "font-weight": "bold",
            "font-family": "Arial",
            text: this.title
        });
     
        this.on("resize", function (cmp, width) {
            this.chartTitle.setAttributes({
                translate: {
                    x: (width/2) - 80,
                    y: 10
                }
            }, true);
        });
     
        this.items = this.items || [];
     
        this.items.push(this.chartTitle);
    },
    updateTitle: function(newTitle) {
        this.chartTitle.setAttributes({
            text: newTitle
        }, true);
    },
    initComponent: function () {
        this.createTitleItem();
    }
});

/* used as a mixin */

Ext.define("MyApp.MyChart", {
    extend: "Ext.chart.Chart",
    mixins: {
        chartTitle: "MyApp.ChartTitleMixin"
    },
    initComponent: function () {
        this.mixins.chartTitle.initComponent.call(this);
        this.callParent(arguments);
    }
});