RowWrap.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-grid-feature-RowWrap'>/**
  19. </span> * @private
  20. */
  21. Ext.define('Ext.grid.feature.RowWrap', {
  22. extend: 'Ext.grid.feature.Feature',
  23. alias: 'feature.rowwrap',
  24. // turn off feature events.
  25. hasFeatureEvent: false,
  26. init: function() {
  27. if (!this.disabled) {
  28. this.enable();
  29. }
  30. },
  31. getRowSelector: function(){
  32. return 'tr:has(&gt; ' + this.view.cellSelector + ')';
  33. },
  34. enable: function(){
  35. var me = this,
  36. view = me.view;
  37. me.callParent();
  38. // we need to mutate the rowSelector since the template changes the ordering
  39. me.savedRowSelector = view.rowSelector;
  40. view.rowSelector = me.getRowSelector();
  41. // Extra functionality needed on header resize when row is wrapped:
  42. // Every individual cell in a column needs its width syncing.
  43. // So we produce a different column selector which includes al TDs in a column
  44. view.getComponentLayout().getColumnSelector = me.getColumnSelector;
  45. },
  46. disable: function(){
  47. var me = this,
  48. view = me.view,
  49. saved = me.savedRowSelector;
  50. me.callParent();
  51. if (saved) {
  52. view.rowSelector = saved;
  53. }
  54. delete me.savedRowSelector;
  55. },
  56. mutateMetaRowTpl: function(metaRowTpl) {
  57. var prefix = Ext.baseCSSPrefix;
  58. // Remove &quot;x-grid-row&quot; from the first row, note this could be wrong
  59. // if some other feature unshifted things in front.
  60. metaRowTpl[0] = metaRowTpl[0].replace(prefix + 'grid-row', '');
  61. metaRowTpl[0] = metaRowTpl[0].replace(&quot;{[this.embedRowCls()]}&quot;, &quot;&quot;);
  62. // 2
  63. metaRowTpl.unshift('&lt;table class=&quot;' + prefix + 'grid-table ' + prefix + 'grid-table-resizer&quot; style=&quot;width: {[this.embedFullWidth()]}px;&quot;&gt;');
  64. // 1
  65. metaRowTpl.unshift('&lt;tr class=&quot;' + prefix + 'grid-row {[this.embedRowCls()]}&quot;&gt;&lt;td colspan=&quot;{[this.embedColSpan()]}&quot;&gt;&lt;div class=&quot;' + prefix + 'grid-rowwrap-div&quot;&gt;');
  66. // 3
  67. metaRowTpl.push('&lt;/table&gt;');
  68. // 4
  69. metaRowTpl.push('&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;');
  70. },
  71. embedColSpan: function() {
  72. return '{colspan}';
  73. },
  74. embedFullWidth: function() {
  75. return '{fullWidth}';
  76. },
  77. getAdditionalData: function(data, idx, record, orig) {
  78. var headerCt = this.view.headerCt,
  79. colspan = headerCt.getColumnCount(),
  80. fullWidth = headerCt.getFullWidth(),
  81. items = headerCt.query('gridcolumn'),
  82. itemsLn = items.length,
  83. i = 0,
  84. o = {
  85. colspan: colspan,
  86. fullWidth: fullWidth
  87. },
  88. id,
  89. tdClsKey,
  90. colResizerCls;
  91. for (; i &lt; itemsLn; i++) {
  92. id = items[i].id;
  93. tdClsKey = id + '-tdCls';
  94. colResizerCls = Ext.baseCSSPrefix + 'grid-col-resizer-'+id;
  95. // give the inner td's the resizer class
  96. // while maintaining anything a user may have injected via a custom
  97. // renderer
  98. o[tdClsKey] = colResizerCls + &quot; &quot; + (orig[tdClsKey] ? orig[tdClsKey] : '');
  99. // TODO: Unhackify the initial rendering width's
  100. o[id+'-tdAttr'] = &quot; style=\&quot;width: &quot; + (items[i].hidden ? 0 : items[i].getDesiredWidth()) + &quot;px;\&quot; &quot;/* + (i === 0 ? &quot; rowspan=\&quot;2\&quot;&quot; : &quot;&quot;)*/;
  101. if (orig[id+'-tdAttr']) {
  102. o[id+'-tdAttr'] += orig[id+'-tdAttr'];
  103. }
  104. }
  105. return o;
  106. },
  107. getMetaRowTplFragments: function() {
  108. return {
  109. embedFullWidth: this.embedFullWidth,
  110. embedColSpan: this.embedColSpan
  111. };
  112. },
  113. getColumnSelector: function(header) {
  114. var s = Ext.baseCSSPrefix + 'grid-col-resizer-' + header.id;
  115. return 'th.' + s + ',td.' + s;
  116. }
  117. });</pre>
  118. </body>
  119. </html>