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 DescriptionsTableLayout
 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.DescriptionsTableLayout = Ext.extend(Ext.Panel, {
 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: 'descriptionsTableLayoutStyle',
 28     /** 
 29      * See: http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.Container-cfg-layout
 30      * It's used to specify the table layout type.
 31      * @private
 32      * @type String
 33      */
 34     layout:'table',
 35     /** 
 36      * See: http://http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.Panel-cfg-layoutConfig
 37      * This is a config object containing properties specific to the chosen table layout: the columns number.
 38      * @private
 39      * @type Object
 40      */
 41     layoutConfig: {columns:3},
 42     /** 
 43      * See: http://http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.Panel-cfg-defaults
 44      * This option is a means of applying default settings to all added items
 45      * @private
 46      * @type Object
 47      */
 48     defaults: { frame:false, width:175, height:30 },
 49     /** 
 50      * Array of strings that represent the descriptions
 51      * @private
 52      * @type Array
 53      */
 54     descriptions: [],
 55     /** 
 56      * Array of strings that represent the titles of the correspondinng descriptions
 57      * @private
 58      * @type Array
 59      */
 60     titles: [],
 61     /** 
 62      * Width of the component in pixel
 63      * @public
 64      * @type Number
 65      */
 66     appBoxWidth: 557,
 67     /** 
 68      * Height of the component in pixel
 69      * @public
 70      * @type Number
 71      */
 72     appBoxHeight: 150,
 73     /** 
 74      * Value in pixels of the space that separates the elements of the table horizontally 
 75      * @public
 76      * @type Number
 77      */
 78     paddingHorizontal: 16,
 79     /** 
 80      * Value in pixels of the space that separates the elements of the table vertically 
 81      * @public
 82      * @type Number
 83      */
 84     paddingVertical: 16,
 85 
 86     initComponent: function() {
 87         var itemWidth = (this.appBoxWidth - (this.layoutConfig.columns * (this.paddingHorizontal - 1))) / this.layoutConfig.columns;
 88         var itemHeight = (this.appBoxHeight - (this.layoutConfig.columns * (this.paddingHorizontal - 1))) / this.layoutConfig.columns;
 89 
 90         var items = []; 
 91         var lTitle = null;
 92         var lDescr = null;
 93         for (var i = 0; i < this.descriptions.length; i=i+this.layoutConfig.columns) {
 94             for (var j = 0; j < this.layoutConfig.columns; j++) {
 95                 if ((i+j) < this.descriptions.length) {
 96                     lDescr = new Ext.form.Label({
 97                         cls: 'x-form-item dtItemDescr',
 98                         text: this.descriptions[i+j],
 99                         width: itemWidth,
100                         height: itemHeight
101                     });
102                     items.push(lDescr);
103                 }
104             }
105             for (var j = 0; (j < this.layoutConfig.columns); j++) {
106                 if ((i+j) < this.titles.length) {
107                     lTitle = new Ext.form.Label({
108                         cls: 'x-form-item dtItemTitle',
109                         text: this.titles[i+j],
110                         width: itemWidth,
111                         height: itemHeight
112                     });
113                     items.push(lTitle);
114                 }
115             }
116         }    
117         
118         this.items = items;
119 
120         var objReturn = framework.widgets.DescriptionsTableLayout.superclass.initComponent.apply(this, arguments);
121         return objReturn;
122     }
123     
124 });
125         
126 /** api: xtype = framework_descs_table */
127 Ext.reg("framework_descs_table", framework.widgets.DescriptionsTableLayout);
128 
129