1 // ========================================================================== 2 // Project: The M-Project - Mobile HTML5 Application Framework 3 // Copyright: (c) 2010 M-Way Solutions GmbH. All rights reserved. 4 // (c) 2011 panacoda GmbH. All rights reserved. 5 // Creator: Dominik 6 // Date: 04.11.2010 7 // License: Dual licensed under the MIT or GPL Version 2 licenses. 8 // http://github.com/mwaylabs/The-M-Project/blob/master/MIT-LICENSE 9 // http://github.com/mwaylabs/The-M-Project/blob/master/GPL-LICENSE 10 // ========================================================================== 11 12 /** 13 * A constant value for a two column layout of a grid view. 14 * 15 * @type String 16 */ 17 M.TWO_COLUMNS = { 18 cssClass: 'ui-grid-a', 19 columns: { 20 0: 'ui-block-a', 21 1: 'ui-block-b' 22 } 23 }; 24 25 /** 26 * A constant value for a three column layout of a grid view. 27 * 28 * @type String 29 */ 30 M.THREE_COLUMNS = { 31 cssClass: 'ui-grid-b', 32 columns: { 33 0: 'ui-block-a', 34 1: 'ui-block-b', 35 2: 'ui-block-c' 36 } 37 }; 38 39 /** 40 * A constant value for a four column layout of a grid view. 41 * 42 * @type String 43 */ 44 M.FOUR_COLUMNS = { 45 cssClass: 'ui-grid-c', 46 columns: { 47 0: 'ui-block-a', 48 1: 'ui-block-b', 49 2: 'ui-block-c', 50 3: 'ui-block-d' 51 } 52 }; 53 54 /** 55 * @class 56 * 57 * M.GridView defines a prototype of a grid view, that allows you to display several 58 * views horizontally aligned. Therefore you can either use a predefined layout or you 59 * can provide a custom layout. 60 * 61 * @extends M.View 62 */ 63 M.GridView = M.View.extend( 64 /** @scope M.GridView.prototype */ { 65 66 /** 67 * The type of this object. 68 * 69 * @type String 70 */ 71 type: 'M.GridView', 72 73 /** 74 * The layout for the grid view. There are two predefined layouts available: 75 * 76 * - M.TWO_COLUMNS: a two column layout, width: 50% / 50% 77 * - M.THREE_COLUMNS: a three column layout, width: 33% / 33% / 33% 78 * - M.FOUR_COLUMNS: a four column layout, width: 25% / 25% / 25% 79 * 80 * To specify your own layout, you will have to implement some css classes and 81 * then define your layout like: 82 * 83 * cssClass: 'cssClassForWholeGrid', 84 * columns: { 85 * 0: 'cssClassForColumn1', 86 * 1: 'cssClassForColumn2', 87 * 2: 'cssClassForColumn3', 88 * 3: 'cssClassForColumn4', 89 * //........ 90 * } 91 * 92 * @type Object 93 */ 94 layout: null, 95 96 /** 97 * Renders a grid view based on the specified layout. 98 * 99 * @private 100 * @returns {String} The grid view's html representation. 101 */ 102 render: function() { 103 this.html += '<div id="' + this.id + '" ' + this.style() + '>'; 104 105 this.renderChildViews(); 106 107 this.html += '</div>'; 108 109 return this.html; 110 }, 111 112 /** 113 * Triggers render() on all children and includes some special grid view logic 114 * concerning the rendering of these child views. 115 * 116 * @private 117 */ 118 renderChildViews: function() { 119 if(this.childViews) { 120 if(this.layout) { 121 var arr = this.childViews.split(' '); 122 for(var i in this.layout.columns) { 123 if(this[arr[i]]) { 124 this.html += '<div class="' + this.layout.columns[i] + '">'; 125 126 this[arr[i]]._name = arr[i]; 127 this.html += this[arr[i]].render(); 128 129 this.html += '</div>'; 130 } 131 } 132 } else { 133 M.Logger.log('No layout specified for GridView (' + this.id + ')!', M.WARN); 134 } 135 } 136 }, 137 138 /** 139 * This method themes the grid view, respectively its child views. 140 * 141 * @private 142 */ 143 theme: function() { 144 this.themeChildViews(); 145 }, 146 147 /** 148 * Applies some style-attributes to the grid view. 149 * 150 * @private 151 * @returns {String} The grid view's styling as html representation. 152 */ 153 style: function() { 154 if(this.layout) { 155 var html = 'class="' + this.layout.cssClass + '"'; 156 return html; 157 } 158 } 159 160 });