View Full Version : How define theme dinamically

5 Mar 2012, 1:35 AM
Hi all,
I'm using ExtJS4.1.0 beta and I'm trying to define dinamically a theme for my charts.
I'd like create a theme with colors, font, size,... defined by a user into a document template.

To do this, I create a js that defines a theme with the input configuration specified (by the user template):

Ext.define('Ext.chart.theme.ExtJSChartTheme', {
extend: 'Ext.chart.theme.Base',
requires: ['Ext.chart.theme.Base','Ext.chart.theme.Theme'],

constructor: function(config) {
Ext.apply(this, config);

return this;

And then, I'd make a js that creates the chart :

Ext.define('Sbi.extjs.chart.ExtJSChartPanel', {
alias: 'widget.ExtJSChartPanel',
extend: 'Ext.panel.Panel',
chart: null,
, createChart: function(){
var config = Ext.apply(this.template || {});
config.renderTo = config.divId;
config.store = this.chartStore;
config.animate = (!config.animate)?true:config.animate;
config.width = (!config.width)?500:parseInt(config.width);
config.height = ((!config.height)?500:parseInt(config.height))+150;
//updating theme --> it defines a new theme properties
var colors = ['#b1da5a', '#4ce0e7', '#e84b67', '#da5abd', '#4d7fe6', '#fec935'];
var baseColor = '#6D869F';

var themeConfig = {
axis: {
fill: baseColor,
stroke: baseColor
axisLabelLeft: {
fill: baseColor
axisLabelBottom: {
fill: baseColor
axisTitleLeft: {
fill: baseColor
axisTitleBottom: {
fill: baseColor
colors: colors
themeConfig.colors = colors;
themeConfig.baseColor = baseColor;

var theme = Ext.create('Ext.chart.theme.ExtJSChartTheme', themeConfig); --> call the creation of a new theme

config.theme = 'ExtJSChartTheme'; --> sets the new theme name
this.chart = Ext.create('Ext.chart.Chart',config); --> create the chart

BUT, it doesn't works... it give not errors but the new colors aren't applied... where I'm wrong? Could you help me???

Thank you in advance,


7 Mar 2012, 4:02 AM
Someone could help me???!???

Thank you.