Upgrade to ExtJS 4.0.1 - Released 05/18/2011
[extjs.git] / docs / source / Base2.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="../prettify/prettify.css" type="text/css" rel="stylesheet" />
7   <script type="text/javascript" src="../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-Base'>/**
19 </span> * @class Ext.chart.theme.Base
20  * Provides default colors for non-specified things. Should be sub-classed when creating new themes.
21  * @ignore
22  */
23 Ext.define('Ext.chart.theme.Base', {
24
25     /* Begin Definitions */
26
27     requires: ['Ext.chart.theme.Theme'],
28
29     /* End Definitions */
30
31     constructor: function(config) {
32         Ext.chart.theme.call(this, config, {
33             background: false,
34             axis: {
35                 stroke: '#444',
36                 'stroke-width': 1
37             },
38             axisLabelTop: {
39                 fill: '#444',
40                 font: '12px Arial, Helvetica, sans-serif',
41                 spacing: 2,
42                 padding: 5,
43                 renderer: function(v) { return v; }
44             },
45             axisLabelRight: {
46                 fill: '#444',
47                 font: '12px Arial, Helvetica, sans-serif',
48                 spacing: 2,
49                 padding: 5,
50                 renderer: function(v) { return v; }
51             },
52             axisLabelBottom: {
53                 fill: '#444',
54                 font: '12px Arial, Helvetica, sans-serif',
55                 spacing: 2,
56                 padding: 5,
57                 renderer: function(v) { return v; }
58             },
59             axisLabelLeft: {
60                 fill: '#444',
61                 font: '12px Arial, Helvetica, sans-serif',
62                 spacing: 2,
63                 padding: 5,
64                 renderer: function(v) { return v; }
65             },
66             axisTitleTop: {
67                 font: 'bold 18px Arial',
68                 fill: '#444'
69             },
70             axisTitleRight: {
71                 font: 'bold 18px Arial',
72                 fill: '#444',
73                 rotate: {
74                     x:0, y:0,
75                     degrees: 270
76                 }
77             },
78             axisTitleBottom: {
79                 font: 'bold 18px Arial',
80                 fill: '#444'
81             },
82             axisTitleLeft: {
83                 font: 'bold 18px Arial',
84                 fill: '#444',
85                 rotate: {
86                     x:0, y:0,
87                     degrees: 270
88                 }
89             },
90             series: {
91                 'stroke-width': 0
92             },
93             seriesLabel: {
94                 font: '12px Arial',
95                 fill: '#333'
96             },
97             marker: {
98                 stroke: '#555',
99                 fill: '#000',
100                 radius: 3,
101                 size: 3
102             },
103             colors: [ &quot;#94ae0a&quot;, &quot;#115fa6&quot;,&quot;#a61120&quot;, &quot;#ff8809&quot;, &quot;#ffd13e&quot;, &quot;#a61187&quot;, &quot;#24ad9a&quot;, &quot;#7c7474&quot;, &quot;#a66111&quot;],
104             seriesThemes: [{
105                 fill: &quot;#115fa6&quot;
106             }, {
107                 fill: &quot;#94ae0a&quot;
108             }, {
109                 fill: &quot;#a61120&quot;
110             }, {
111                 fill: &quot;#ff8809&quot;
112             }, {
113                 fill: &quot;#ffd13e&quot;
114             }, {
115                 fill: &quot;#a61187&quot;
116             }, {
117                 fill: &quot;#24ad9a&quot;
118             }, {
119                 fill: &quot;#7c7474&quot;
120             }, {
121                 fill: &quot;#a66111&quot;
122             }],
123             markerThemes: [{
124                 fill: &quot;#115fa6&quot;,
125                 type: 'circle' 
126             }, {
127                 fill: &quot;#94ae0a&quot;,
128                 type: 'cross'
129             }, {
130                 fill: &quot;#a61120&quot;,
131                 type: 'plus'
132             }]
133         });
134     }
135 }, function() {
136     var palette = ['#b1da5a', '#4ce0e7', '#e84b67', '#da5abd', '#4d7fe6', '#fec935'],
137         names = ['Green', 'Sky', 'Red', 'Purple', 'Blue', 'Yellow'],
138         i = 0, j = 0, l = palette.length, themes = Ext.chart.theme,
139         categories = [['#f0a50a', '#c20024', '#2044ba', '#810065', '#7eae29'],
140                       ['#6d9824', '#87146e', '#2a9196', '#d39006', '#1e40ac'],
141                       ['#fbbc29', '#ce2e4e', '#7e0062', '#158b90', '#57880e'],
142                       ['#ef5773', '#fcbd2a', '#4f770d', '#1d3eaa', '#9b001f'],
143                       ['#7eae29', '#fdbe2a', '#910019', '#27b4bc', '#d74dbc'],
144                       ['#44dce1', '#0b2592', '#996e05', '#7fb325', '#b821a1']],
145         cats = categories.length;
146     
147     //Create themes from base colors
148     for (; i &lt; l; i++) {
149         themes[names[i]] = (function(color) {
150             return Ext.extend(themes.Base, {
151                 constructor: function(config) {
152                     themes.Base.prototype.constructor.call(this, Ext.apply({
153                         baseColor: color
154                     }, config));
155                 }
156             });
157         })(palette[i]);
158     }
159     
160     //Create theme from color array
161     for (i = 0; i &lt; cats; i++) {
162         themes['Category' + (i + 1)] = (function(category) {
163             return Ext.extend(themes.Base, {
164                 constructor: function(config) {
165                     themes.Base.prototype.constructor.call(this, Ext.apply({
166                         colors: category
167                     }, config));
168                 }
169             });
170         })(categories[i]);
171     }
172 });
173 </pre>
174 </body>
175 </html>