/javascripts/lib/src/widgets/layout/TableLayout.js

https://bitbucket.org/ksokmesa/sina-asian · JavaScript · 205 lines · 89 code · 16 blank · 100 comment · 22 complexity · cd46f2d3d8143555f95e2eefc641ec7e MD5 · raw file

  1. /*!
  2. * Ext JS Library 3.2.1
  3. * Copyright(c) 2006-2010 Ext JS, Inc.
  4. * licensing@extjs.com
  5. * http://www.extjs.com/license
  6. */
  7. /**
  8. * @class Ext.layout.TableLayout
  9. * @extends Ext.layout.ContainerLayout
  10. * <p>This layout allows you to easily render content into an HTML table. The total number of columns can be
  11. * specified, and rowspan and colspan can be used to create complex layouts within the table.
  12. * This class is intended to be extended or created via the layout:'table' {@link Ext.Container#layout} config,
  13. * and should generally not need to be created directly via the new keyword.</p>
  14. * <p>Note that when creating a layout via config, the layout-specific config properties must be passed in via
  15. * the {@link Ext.Container#layoutConfig} object which will then be applied internally to the layout. In the
  16. * case of TableLayout, the only valid layout config property is {@link #columns}. However, the items added to a
  17. * TableLayout can supply the following table-specific config properties:</p>
  18. * <ul>
  19. * <li><b>rowspan</b> Applied to the table cell containing the item.</li>
  20. * <li><b>colspan</b> Applied to the table cell containing the item.</li>
  21. * <li><b>cellId</b> An id applied to the table cell containing the item.</li>
  22. * <li><b>cellCls</b> A CSS class name added to the table cell containing the item.</li>
  23. * </ul>
  24. * <p>The basic concept of building up a TableLayout is conceptually very similar to building up a standard
  25. * HTML table. You simply add each panel (or "cell") that you want to include along with any span attributes
  26. * specified as the special config properties of rowspan and colspan which work exactly like their HTML counterparts.
  27. * Rather than explicitly creating and nesting rows and columns as you would in HTML, you simply specify the
  28. * total column count in the layoutConfig and start adding panels in their natural order from left to right,
  29. * top to bottom. The layout will automatically figure out, based on the column count, rowspans and colspans,
  30. * how to position each panel within the table. Just like with HTML tables, your rowspans and colspans must add
  31. * up correctly in your overall layout or you'll end up with missing and/or extra cells! Example usage:</p>
  32. * <pre><code>
  33. // This code will generate a layout table that is 3 columns by 2 rows
  34. // with some spanning included. The basic layout will be:
  35. // +--------+-----------------+
  36. // | A | B |
  37. // | |--------+--------|
  38. // | | C | D |
  39. // +--------+--------+--------+
  40. var table = new Ext.Panel({
  41. title: 'Table Layout',
  42. layout:'table',
  43. defaults: {
  44. // applied to each contained panel
  45. bodyStyle:'padding:20px'
  46. },
  47. layoutConfig: {
  48. // The total column count must be specified here
  49. columns: 3
  50. },
  51. items: [{
  52. html: '&lt;p&gt;Cell A content&lt;/p&gt;',
  53. rowspan: 2
  54. },{
  55. html: '&lt;p&gt;Cell B content&lt;/p&gt;',
  56. colspan: 2
  57. },{
  58. html: '&lt;p&gt;Cell C content&lt;/p&gt;',
  59. cellCls: 'highlight'
  60. },{
  61. html: '&lt;p&gt;Cell D content&lt;/p&gt;'
  62. }]
  63. });
  64. </code></pre>
  65. */
  66. Ext.layout.TableLayout = Ext.extend(Ext.layout.ContainerLayout, {
  67. /**
  68. * @cfg {Number} columns
  69. * The total number of columns to create in the table for this layout. If not specified, all Components added to
  70. * this layout will be rendered into a single row using one column per Component.
  71. */
  72. // private
  73. monitorResize:false,
  74. type: 'table',
  75. targetCls: 'x-table-layout-ct',
  76. /**
  77. * @cfg {Object} tableAttrs
  78. * <p>An object containing properties which are added to the {@link Ext.DomHelper DomHelper} specification
  79. * used to create the layout's <tt>&lt;table&gt;</tt> element. Example:</p><pre><code>
  80. {
  81. xtype: 'panel',
  82. layout: 'table',
  83. layoutConfig: {
  84. tableAttrs: {
  85. style: {
  86. width: '100%'
  87. }
  88. },
  89. columns: 3
  90. }
  91. }</code></pre>
  92. */
  93. tableAttrs:null,
  94. // private
  95. setContainer : function(ct){
  96. Ext.layout.TableLayout.superclass.setContainer.call(this, ct);
  97. this.currentRow = 0;
  98. this.currentColumn = 0;
  99. this.cells = [];
  100. },
  101. // private
  102. onLayout : function(ct, target){
  103. var cs = ct.items.items, len = cs.length, c, i;
  104. if(!this.table){
  105. target.addClass('x-table-layout-ct');
  106. this.table = target.createChild(
  107. Ext.apply({tag:'table', cls:'x-table-layout', cellspacing: 0, cn: {tag: 'tbody'}}, this.tableAttrs), null, true);
  108. }
  109. this.renderAll(ct, target);
  110. },
  111. // private
  112. getRow : function(index){
  113. var row = this.table.tBodies[0].childNodes[index];
  114. if(!row){
  115. row = document.createElement('tr');
  116. this.table.tBodies[0].appendChild(row);
  117. }
  118. return row;
  119. },
  120. // private
  121. getNextCell : function(c){
  122. var cell = this.getNextNonSpan(this.currentColumn, this.currentRow);
  123. var curCol = this.currentColumn = cell[0], curRow = this.currentRow = cell[1];
  124. for(var rowIndex = curRow; rowIndex < curRow + (c.rowspan || 1); rowIndex++){
  125. if(!this.cells[rowIndex]){
  126. this.cells[rowIndex] = [];
  127. }
  128. for(var colIndex = curCol; colIndex < curCol + (c.colspan || 1); colIndex++){
  129. this.cells[rowIndex][colIndex] = true;
  130. }
  131. }
  132. var td = document.createElement('td');
  133. if(c.cellId){
  134. td.id = c.cellId;
  135. }
  136. var cls = 'x-table-layout-cell';
  137. if(c.cellCls){
  138. cls += ' ' + c.cellCls;
  139. }
  140. td.className = cls;
  141. if(c.colspan){
  142. td.colSpan = c.colspan;
  143. }
  144. if(c.rowspan){
  145. td.rowSpan = c.rowspan;
  146. }
  147. this.getRow(curRow).appendChild(td);
  148. return td;
  149. },
  150. // private
  151. getNextNonSpan: function(colIndex, rowIndex){
  152. var cols = this.columns;
  153. while((cols && colIndex >= cols) || (this.cells[rowIndex] && this.cells[rowIndex][colIndex])) {
  154. if(cols && colIndex >= cols){
  155. rowIndex++;
  156. colIndex = 0;
  157. }else{
  158. colIndex++;
  159. }
  160. }
  161. return [colIndex, rowIndex];
  162. },
  163. // private
  164. renderItem : function(c, position, target){
  165. // Ensure we have our inner table to get cells to render into.
  166. if(!this.table){
  167. this.table = target.createChild(
  168. Ext.apply({tag:'table', cls:'x-table-layout', cellspacing: 0, cn: {tag: 'tbody'}}, this.tableAttrs), null, true);
  169. }
  170. if(c && !c.rendered){
  171. c.render(this.getNextCell(c));
  172. this.configureItem(c, position);
  173. }else if(c && !this.isValidParent(c, target)){
  174. var container = this.getNextCell(c);
  175. container.insertBefore(c.getPositionEl().dom, null);
  176. c.container = Ext.get(container);
  177. this.configureItem(c, position);
  178. }
  179. },
  180. // private
  181. isValidParent : function(c, target){
  182. return c.getPositionEl().up('table', 5).dom.parentNode === (target.dom || target);
  183. }
  184. /**
  185. * @property activeItem
  186. * @hide
  187. */
  188. });
  189. Ext.Container.LAYOUTS['table'] = Ext.layout.TableLayout;