1 /**
  2 * @fileOverview  
  3 * Copyright (c) 2013 Regione Autonoma della Sardegna
  4 * Published under the GPL license.<br>
  5 * See <a href="https://sardegnageoportale.it/webgis/license.txt">https://sardegnageoportale.it/webgis/license.txt</a>
  6 * for the full text of the license.
  7 * @version 0.1
  8 */
  9 
 10 /**
 11  * @namespace framework.widgets
 12  */
 13 Ext.namespace("framework.widgets"),
 14 
 15 /** 
 16  *  ...
 17  *  @class AppBox
 18  *  @extends <a target="_blank" href="http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.panel.Panel">Ext.Panel</a>
 19  */
 20 framework.widgets.AppBox = Ext.extend(Ext.Container, {
 21     /** 
 22      * See: http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.Component-cfg-cls
 23      * An optional extra CSS class that will be added to this component's Element.
 24      * @public
 25      * @type String
 26      */
 27     cls: 'appBoxStyle',
 28     /** 
 29      * See: http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.Container-cfg-layout
 30      * It's used to specify the vertical box layout type.
 31      * @private
 32      * @type String
 33      */
 34     layout: {
 35         type: 'vbox',
 36         align: 'stretch'  // Child items are stretched to full width if you are using VBox, full height with HBox
 37     },
 38     /** 
 39      * See: http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.Container-cfg-defaults
 40      * It's used to specify the vertical box layout type.
 41      * @private
 42      * @type String
 43      */
 44     defaults: {
 45         xtype: 'box'
 46     },
 47     /** 
 48      * [Optional] Store that hold the data used to populate the optional pie chart. 
 49      * If it's null or not specified the pie chart is not rendered. 
 50      * @public
 51      * @type Store
 52      */
 53     store: null,
 54     /** 
 55      * Width of the component in pixel
 56      * @public
 57      * @type Number
 58      */
 59     appBoxWidth: 175,
 60     /** 
 61      * Height of the component in pixel
 62      * @public
 63      * @type Number
 64      */
 65     appBoxHeight: 303,
 66     /** 
 67      * Height of the box iten taht contains the chart in pixel
 68      * @public
 69      * @type Number
 70      */
 71     chartHeight: 120,
 72     /** 
 73      * xtype of the chart type
 74      * @public
 75      * @type String
 76      */
 77     chartType: 'piechart',
 78     /** 
 79      * Name of the field in the store that contains the labels of the data used in the chart
 80      * @public
 81      * @type String
 82      */
 83     chartCategoryField: 'label',        
 84     /** 
 85      * Name of the field in the store that contains the extended value of the labels of the data used in the chart
 86      * @public
 87      * @type String
 88      */
 89     chartTipField: null,        
 90     /** 
 91      * Name of the field in the store that contains the values of the data used in the chart
 92      * @public
 93      * @type String
 94      */
 95     chartDataField: 'count',        
 96     /** 
 97      * Position of the legend respect to the chart
 98      * @public
 99      * @type String
100      */
101     chartLegendPosition: 'left',
102     /** 
103      * Padding space around the chart item of this component.
104      * @public
105      * @type Number
106      */
107     chartPadding: 0,
108     
109     
110     chartDisplay: true,
111     chartLegendFontSize: 9,
112     chartLegendFontColor: '#000000',
113     
114     
115     /** 
116      * Height in pixel of the banner (fisrt item of this component) that contains an image link.
117      * @public
118      * @type Number
119      */
120     bannerHeight: 65,
121     /** 
122      * Path of the image to insert in the banner. If null or empty the banner is not rendered.
123      * @public
124      * @type String
125      */
126     bannerImgSrc: null,
127     /** 
128      * URL of the link to associate to the banner. If null or empty the banner is not a link.
129      * @public
130      * @type String
131      */
132     bannerHref: null,
133     /** 
134      * Height in pixel of the title (second item of this component).
135      * @public
136      * @type Number
137      */
138     titleHeight: 20,
139     /** 
140      * Text, in HTML, to populate the title. If null or empty the title is not rendered.
141      * @public
142      * @type String
143      */
144     titleText: null,
145     /** 
146      * URL of the link to associate to the title. If null or empty the title is not a link.
147      * @public
148      * @type String
149      */
150     titleHref: null,
151     /** 
152      * Name(s) of the CSS class(es) to give a additional style to the title.
153      * @public
154      * @type String
155      */
156     titleCls: 'titColonna',
157     /** 
158      * Text, in HTML, to populate the description (third item of this component). If null or empty the title is not rendered.
159      * @public
160      * @type String
161      */
162     descriptionText: '',
163     /** 
164      * Name(s) of the CSS class(es) to give a additional style to the description.
165      * @public
166      * @type String
167      */
168     descriptionCls: 'textColonna',
169     /** 
170      * Height in pixel of the summary (fifth item of this component).
171      * @public
172      * @type Number
173      */
174     summaryHeight: 16,
175     /** 
176      * Text, in HTML, to populate the left part of the summary.
177      * @public
178      * @type String
179      */
180     summaryTextLeft: '',
181     /** 
182      * Text, in HTML, to populate the right part of the summary.
183      * @public
184      * @type String
185      */
186     summaryTextRight: '',
187     /** 
188      * Series of exadecimal values that represent the colors to use in the rendering of the chart.
189      * @public
190      * @type Array of exadecimal values
191      */
192     chartSeriesColors: [0x445e1c, 0xd4d4d3, 0xf3a300, 0xd54e13, 0x667f3e, 0xf6f6f5, 0xf5c522, 0xf78f35],
193     
194     initComponent: function() {
195         var chart = null;
196         if ((this.store !== null) && (this.chartDisplay)) {
197             chart = {
198                 height: this.chartHeight,
199                 store: this.store,
200                 url: 'src/ext/resources/charts.swf',
201                 xtype: this.chartType,
202                 tipField: this.chartTipField,
203                 dataField: this.chartDataField,
204                 categoryField: this.chartCategoryField,
205                 style: { padding: '4px 0px 4px 0px'},
206                 // Use follwing row to customize the colors of the charts
207                 series:[{style: {colors: this.chartSeriesColors}}],
208                 tipRenderer : function(chart, record, index, series){
209                     var c = (record.data[this.tipField]?record.data[this.tipField]:record.data[this.categoryField]) + '\n' + 
210                             record.data[this.dataField] + '\n' + 
211                             Ext.util.Format.number(((record.data[this.dataField] * 100) / chart.store.sum), '0.00') + '%';
212                     return c;
213                 },
214                 // extra styles get applied to the chart defaults
215                 extraStyle: {
216                     padding: this.chartPadding,
217                     legend: {
218                         display: this.chartLegendPosition,
219                         padding: 0,
220                         font: {
221                             family: 'Verdana,Arial, Geneva, Helvetica,sans-serif',
222                             size: this.chartLegendFontSize,
223                             color: this.chartLegendFontColor
224                         }
225                     },
226                     dataTip: {
227                         font: {
228                             bold: true
229                         }
230                     }
231                 }
232             };
233         }
234         var banner = null;
235         if ((this.bannerImgSrc !== null) && (this.bannerImgSrc !== '')) {
236             banner = {
237                 height: this.bannerHeight,
238                 autoEl: {
239                     tag: 'div',
240                     html: '<img src="' + this.bannerImgSrc + '">'
241                 }
242             };
243             if ((this.bannerHref !== null) && (this.bannerHref !== '')) {
244                 banner.autoEl.tag = 'a';
245                 banner.autoEl.href = this.bannerHref;
246             }
247         }
248         var title = null;
249         if ((this.titleText !== null) && (this.titleText !== '')) {
250             title = {
251                     height: this.titleHeight,
252                     autoEl: {
253                         tag: 'div',
254                         html: '<span style="position:absolute; left:0">' + this.titleText + '</span>',
255                         cls: this.titleCls
256                     }
257                 };
258             if ((this.titleHref !== null) && (this.titleHref !== '')) {
259                 title.autoEl.tag = 'a';
260                 title.autoEl.href = this.titleHref;
261             }
262         }
263         var description = null;
264         if ((this.descriptionText !== null) && (this.descriptionText !== '')) {
265             description = {
266                     flex: 1,
267                     autoEl: {
268                         tag: 'div',
269                         html: this.descriptionText,
270                         cls: this.descriptionCls
271                     }
272             }
273         }
274         var summary = null;
275         if ((this.summaryTextLeft !== null) && (this.summaryTextLeft !== '')) {
276             var value = '-';
277             if ((this.summaryTextRight !== null) && (this.summaryTextRight !== '')) {
278                 value = this.summaryTextRight;
279             } else {
280                 if ((this.store !== null) && (this.store.sum !== null)) {
281                     value = this.store.sum;
282                 }
283             }
284             summary = {
285                     xtype: 'container',
286                     baseCls: 'x-plain',
287                     cls: 'background-green',
288                     height: this.summaryHeight,
289                     layout: {
290                         type: 'hbox',
291                         pack: 'start',
292                         align: 'stretch'
293                     },
294                     defaults: {
295                         xtype: 'box'
296                     },
297                     items: [
298                         {
299                             autoEl: {
300                                 tag: 'label',
301                                 html: this.summaryTextLeft,
302                                 cls: 'piedeColonnaSX'
303                             }
304                         }, {
305                             autoEl: {
306                                 id:this.id + '_summaryTextRight',
307                                 tag: 'label',
308                                 html: value,
309                                 cls: 'piedeColonnaDX'
310                             }
311                         }]
312             }
313         }
314         var items = []; 
315         if (banner !== null) {
316             items.push(banner);
317         }
318         if (title !== null) {
319             items.push(title);
320         }
321         if (description !== null) {
322             items.push(description);
323         }
324         if ((this.store !== null) && (this.chartDisplay)) {
325             items.push(chart);
326         }
327         if (summary !== null) {
328             items.push(summary);
329         }
330         this.items = items;
331 
332         var objReturn = framework.widgets.AppBox.superclass.initComponent.apply(this, arguments);
333         return objReturn;
334     },
335     
336     updateSummaryTextRight: function(val) {
337         document.getElementById(this.id+'_summaryTextRight').innerHTML = val;
338     },
339     
340     updateData: function(store) {
341         this.store = store;
342         this.removeAll();
343         this.initComponent();
344         this.doLayout();
345     }
346 
347 
348 });
349         
350 /** api: xtype = framework_appbox */
351 Ext.reg("framework_appbox", framework.widgets.AppBox);
352 
353