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