Skip to content

Instantly share code, notes, and snippets.

@bittercoder
Created February 20, 2013 03:56
Show Gist options
  • Save bittercoder/4992746 to your computer and use it in GitHub Desktop.
Save bittercoder/4992746 to your computer and use it in GitHub Desktop.
Example of an ExtJS mix-in to render a chart title on the top of a chart.
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);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment