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