Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Theme.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5   <title>The source code</title>
6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
8   <style type="text/css">
9     .highlight { display: block; background-color: #ddd; }
10   </style>
11   <script type="text/javascript">
12     function highlight() {
13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
14     }
15   </script>
16 </head>
17 <body onload="prettyPrint(); highlight();">
18   <pre class="prettyprint lang-js"><span id='Ext-chart-theme-Theme'>/**
19 </span> * @class Ext.chart.theme.Theme
20  * 
21  * Provides chart theming.
22  * 
23  * Used as mixins by Ext.chart.Chart.
24  */
25 Ext.define('Ext.chart.theme.Theme', {
26
27     /* Begin Definitions */
28
29     requires: ['Ext.draw.Color'],
30
31     /* End Definitions */
32
33     theme: 'Base',
34     themeAttrs: false,
35     
36     initTheme: function(theme) {
37         var me = this,
38             themes = Ext.chart.theme,
39             key, gradients;
40         if (theme) {
41             theme = theme.split(':');
42             for (key in themes) {
43                 if (key == theme[0]) {
44                     gradients = theme[1] == 'gradients';
45                     me.themeAttrs = new themes[key]({
46                         useGradients: gradients
47                     });
48                     if (gradients) {
49                         me.gradients = me.themeAttrs.gradients;
50                     }
51                     if (me.themeAttrs.background) {
52                         me.background = me.themeAttrs.background;
53                     }
54                     return;
55                 }
56             }
57             //&lt;debug&gt;
58             Ext.Error.raise('No theme found named &quot;' + theme + '&quot;');
59             //&lt;/debug&gt;
60         }
61     }
62 }, 
63 // This callback is executed right after when the class is created. This scope refers to the newly created class itself
64 function() {
65    /* Theme constructor: takes either a complex object with styles like:
66   
67    {
68         axis: {
69             fill: '#000',
70             'stroke-width': 1
71         },
72         axisLabelTop: {
73             fill: '#000',
74             font: '11px Arial'
75         },
76         axisLabelLeft: {
77             fill: '#000',
78             font: '11px Arial'
79         },
80         axisLabelRight: {
81             fill: '#000',
82             font: '11px Arial'
83         },
84         axisLabelBottom: {
85             fill: '#000',
86             font: '11px Arial'
87         },
88         axisTitleTop: {
89             fill: '#000',
90             font: '11px Arial'
91         },
92         axisTitleLeft: {
93             fill: '#000',
94             font: '11px Arial'
95         },
96         axisTitleRight: {
97             fill: '#000',
98             font: '11px Arial'
99         },
100         axisTitleBottom: {
101             fill: '#000',
102             font: '11px Arial'
103         },
104         series: {
105             'stroke-width': 1
106         },
107         seriesLabel: {
108             font: '12px Arial',
109             fill: '#333'
110         },
111         marker: {
112             stroke: '#555',
113             fill: '#000',
114             radius: 3,
115             size: 3
116         },
117         seriesThemes: [{
118             fill: '#C6DBEF'
119         }, {
120             fill: '#9ECAE1'
121         }, {
122             fill: '#6BAED6'
123         }, {
124             fill: '#4292C6'
125         }, {
126             fill: '#2171B5'
127         }, {
128             fill: '#084594'
129         }],
130         markerThemes: [{
131             fill: '#084594',
132             type: 'circle' 
133         }, {
134             fill: '#2171B5',
135             type: 'cross'
136         }, {
137             fill: '#4292C6',
138             type: 'plus'
139         }]
140     }
141   
142   ...or also takes just an array of colors and creates the complex object:
143   
144   {
145       colors: ['#aaa', '#bcd', '#eee']
146   }
147   
148   ...or takes just a base color and makes a theme from it
149   
150   {
151       baseColor: '#bce'
152   }
153   
154   To create a new theme you may add it to the Themes object:
155   
156   Ext.chart.theme.MyNewTheme = Ext.extend(Object, {
157       constructor: function(config) {
158           Ext.chart.theme.call(this, config, {
159               baseColor: '#mybasecolor'
160           });
161       }
162   });
163   
164   //Proposal:
165   Ext.chart.theme.MyNewTheme = Ext.chart.createTheme('#basecolor');
166   
167   ...and then to use it provide the name of the theme (as a lower case string) in the chart config.
168   
169   {
170       theme: 'mynewtheme'
171   }
172  */
173
174 (function() {
175     Ext.chart.theme = function(config, base) {
176         config = config || {};
177         var i = 0, l, colors, color,
178             seriesThemes, markerThemes,
179             seriesTheme, markerTheme, 
180             key, gradients = [],
181             midColor, midL;
182         
183         if (config.baseColor) {
184             midColor = Ext.draw.Color.fromString(config.baseColor);
185             midL = midColor.getHSL()[2];
186             if (midL &lt; 0.15) {
187                 midColor = midColor.getLighter(0.3);
188             } else if (midL &lt; 0.3) {
189                 midColor = midColor.getLighter(0.15);
190             } else if (midL &gt; 0.85) {
191                 midColor = midColor.getDarker(0.3);
192             } else if (midL &gt; 0.7) {
193                 midColor = midColor.getDarker(0.15);
194             }
195             config.colors = [ midColor.getDarker(0.3).toString(),
196                               midColor.getDarker(0.15).toString(),
197                               midColor.toString(),
198                               midColor.getLighter(0.15).toString(),
199                               midColor.getLighter(0.3).toString()];
200
201             delete config.baseColor;
202         }
203         if (config.colors) {
204             colors = config.colors.slice();
205             markerThemes = base.markerThemes;
206             seriesThemes = base.seriesThemes;
207             l = colors.length;
208             base.colors = colors;
209             for (; i &lt; l; i++) {
210                 color = colors[i];
211                 markerTheme = markerThemes[i] || {};
212                 seriesTheme = seriesThemes[i] || {};
213                 markerTheme.fill = seriesTheme.fill = markerTheme.stroke = seriesTheme.stroke = color;
214                 markerThemes[i] = markerTheme;
215                 seriesThemes[i] = seriesTheme;
216             }
217             base.markerThemes = markerThemes.slice(0, l);
218             base.seriesThemes = seriesThemes.slice(0, l);
219         //the user is configuring something in particular (either markers, series or pie slices)
220         }
221         for (key in base) {
222             if (key in config) {
223                 if (Ext.isObject(config[key]) &amp;&amp; Ext.isObject(base[key])) {
224                     Ext.apply(base[key], config[key]);
225                 } else {
226                     base[key] = config[key];
227                 }
228             }
229         }
230         if (config.useGradients) {
231             colors = base.colors || (function () {
232                 var ans = [];
233                 for (i = 0, seriesThemes = base.seriesThemes, l = seriesThemes.length; i &lt; l; i++) {
234                     ans.push(seriesThemes[i].fill || seriesThemes[i].stroke);
235                 }
236                 return ans;
237             })();
238             for (i = 0, l = colors.length; i &lt; l; i++) {
239                 midColor = Ext.draw.Color.fromString(colors[i]);
240                 if (midColor) {
241                     color = midColor.getDarker(0.1).toString();
242                     midColor = midColor.toString();
243                     key = 'theme-' + midColor.substr(1) + '-' + color.substr(1);
244                     gradients.push({
245                         id: key,
246                         angle: 45,
247                         stops: {
248                             0: {
249                                 color: midColor.toString()
250                             },
251                             100: {
252                                 color: color.toString()
253                             }
254                         }
255                     });
256                     colors[i] = 'url(#' + key + ')'; 
257                 }
258             }
259             base.gradients = gradients;
260             base.colors = colors;
261         }
262         /*
263         base.axis = Ext.apply(base.axis || {}, config.axis || {});
264         base.axisLabel = Ext.apply(base.axisLabel || {}, config.axisLabel || {});
265         base.axisTitle = Ext.apply(base.axisTitle || {}, config.axisTitle || {});
266         */
267         Ext.apply(this, base);
268     };
269 })();
270 });
271 </pre>
272 </body>
273 </html>