/ext-4.1.0_b3/docs/source/TransformGrid.html

https://bitbucket.org/srogerf/javascript · HTML · 115 lines · 104 code · 11 blank · 0 comment · 0 complexity · 5a59f67a48b506d92632d668f92b1803 MD5 · raw file 

    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. 

  5.   <title>The source code</title>
    6. 

  6.   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
    7. 

  7.   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
    8. 

  8.   <style type="text/css">
    9. 

  9.     .highlight { display: block; background-color: #ddd; }
    10. 

  10.   </style>
    11. 

  11.   <script type="text/javascript">
    12. 

  12.     function highlight() {
    13. 

  13.       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    14. 

  14.     }
    15. 

  15.   </script>
    16. 

  16. </head>
    17. 

  17. <body onload="prettyPrint(); highlight();">
    18. 

  18.   <pre class="prettyprint lang-js"><span id='Ext-ux-grid-TransformGrid-method-constructor'><span id='Ext-ux-grid-TransformGrid'>/**
    19. 

  19. </span></span> * @class Ext.ux.grid.TransformGrid
    20. 

  20.  * @extends Ext.grid.Panel
    21. 

  21.  * A Grid which creates itself from an existing HTML table element.
    22. 

  22.  * @history
    23. 

  23.  * 2007-03-01 Original version by Nige &quot;Animal&quot; White
    24. 

  24.  * 2007-03-10 jvs Slightly refactored to reuse existing classes * @constructor
    25. 

  25.  * @param {String/HTMLElement/Ext.Element} table The table element from which this grid will be created -
    26. 

  26.  * The table MUST have some type of size defined for the grid to fill. The container will be
    27. 

  27.  * automatically set to position relative if it isn't already.
    28. 

  28.  * @param {Object} config A config object that sets properties on this grid and has two additional (optional)
    29. 

  29.  * properties: fields and columns which allow for customizing data fields and columns for this grid.
    30. 

  30.  */
    31. 

  31. Ext.define('Ext.ux.grid.TransformGrid', {
    32. 

  32.     extend: 'Ext.grid.Panel',
    33. 

  33. 

  34.     constructor: function(table, config) {
    35. 

  35.         config = Ext.apply({}, config);
    36. 

  36.         table = this.table = Ext.get(table);
    37. 

  37. 

  38.         var configFields = config.fields || [],
    39. 

  39.             configColumns = config.columns || [],
    40. 

  40.             fields = [],
    41. 

  41.             cols = [],
    42. 

  42.             headers = table.query(&quot;thead th&quot;),
    43. 

  43.             i = 0,
    44. 

  44.             len = headers.length,
    45. 

  45.             data = table.dom,
    46. 

  46.             width,
    47. 

  47.             height,
    48. 

  48.             store,
    49. 

  49.             col,
    50. 

  50.             text,
    51. 

  51.             name;
    52. 

  52. 

  53.         for (; i &lt; len; ++i) {
    54. 

  54.             col = headers[i];
    55. 

  55. 

  56.             text = col.innerHTML;
    57. 

  57.             name = 'tcol-' + i;
    58. 

  58. 

  59.             fields.push(Ext.applyIf(configFields[i] || {}, {
    60. 

  60.                 name: name,
    61. 

  61.                 mapping: 'td:nth(' + (i + 1) + ')/@innerHTML'
    62. 

  62.             }));
    63. 

  63. 

  64.             cols.push(Ext.applyIf(configColumns[i] || {}, {
    65. 

  65.                 text: text,
    66. 

  66.                 dataIndex: name,
    67. 

  67.                 width: col.offsetWidth,
    68. 

  68.                 tooltip: col.title,
    69. 

  69.                 sortable: true
    70. 

  70.             }));
    71. 

  71.         }
    72. 

  72. 

  73.         if (config.width) {
    74. 

  74.             width = config.width;
    75. 

  75.         } else {
    76. 

  76.             width = table.getWidth() + 1;
    77. 

  77.         }
    78. 

  78. 

  79.         if (config.height) {
    80. 

  80.             height = config.height;
    81. 

  81.         }
    82. 

  82. 

  83.         Ext.applyIf(config, {
    84. 

  84.             store: {
    85. 

  85.                 data: data,
    86. 

  86.                 fields: fields,
    87. 

  87.                 proxy: {
    88. 

  88.                     type: 'memory',
    89. 

  89.                     reader: {
    90. 

  90.                         record: 'tbody tr',
    91. 

  91.                         type: 'xml'
    92. 

  92.                     }
    93. 

  93.                 }
    94. 

  94.             },
    95. 

  95.             columns: cols,
    96. 

  96.             width: width,
    97. 

  97.             height: height
    98. 

  98.         });
    99. 

  99.         this.callParent([config]);
    100. 

  100.         
    101. 

  101.         if (config.remove !== false) {
    102. 

  102.             // Don't use table.remove() as that destroys the row/cell data in the table in
    103. 

  103.             // IE6-7 so it cannot be read by the data reader.
    104. 

  104.             data.parentNode.removeChild(data);
    105. 

  105.         }
    106. 

  106.     },
    107. 

  107. 

  108.     onDestroy: function() {
    109. 

  109.         this.callParent();
    110. 

  110.         this.table.remove();
    111. 

  111.         delete this.table;
    112. 

  112.     }
    113. 

  113. });</pre>
    114. 

  114. </body>
    115. 

  115. </html>
    116.