/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. <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-ux-grid-TransformGrid-method-constructor'><span id='Ext-ux-grid-TransformGrid'>/**
  19. </span></span> * @class Ext.ux.grid.TransformGrid
  20. * @extends Ext.grid.Panel
  21. * A Grid which creates itself from an existing HTML table element.
  22. * @history
  23. * 2007-03-01 Original version by Nige &quot;Animal&quot; White
  24. * 2007-03-10 jvs Slightly refactored to reuse existing classes * @constructor
  25. * @param {String/HTMLElement/Ext.Element} table The table element from which this grid will be created -
  26. * The table MUST have some type of size defined for the grid to fill. The container will be
  27. * automatically set to position relative if it isn't already.
  28. * @param {Object} config A config object that sets properties on this grid and has two additional (optional)
  29. * properties: fields and columns which allow for customizing data fields and columns for this grid.
  30. */
  31. Ext.define('Ext.ux.grid.TransformGrid', {
  32. extend: 'Ext.grid.Panel',
  33. constructor: function(table, config) {
  34. config = Ext.apply({}, config);
  35. table = this.table = Ext.get(table);
  36. var configFields = config.fields || [],
  37. configColumns = config.columns || [],
  38. fields = [],
  39. cols = [],
  40. headers = table.query(&quot;thead th&quot;),
  41. i = 0,
  42. len = headers.length,
  43. data = table.dom,
  44. width,
  45. height,
  46. store,
  47. col,
  48. text,
  49. name;
  50. for (; i &lt; len; ++i) {
  51. col = headers[i];
  52. text = col.innerHTML;
  53. name = 'tcol-' + i;
  54. fields.push(Ext.applyIf(configFields[i] || {}, {
  55. name: name,
  56. mapping: 'td:nth(' + (i + 1) + ')/@innerHTML'
  57. }));
  58. cols.push(Ext.applyIf(configColumns[i] || {}, {
  59. text: text,
  60. dataIndex: name,
  61. width: col.offsetWidth,
  62. tooltip: col.title,
  63. sortable: true
  64. }));
  65. }
  66. if (config.width) {
  67. width = config.width;
  68. } else {
  69. width = table.getWidth() + 1;
  70. }
  71. if (config.height) {
  72. height = config.height;
  73. }
  74. Ext.applyIf(config, {
  75. store: {
  76. data: data,
  77. fields: fields,
  78. proxy: {
  79. type: 'memory',
  80. reader: {
  81. record: 'tbody tr',
  82. type: 'xml'
  83. }
  84. }
  85. },
  86. columns: cols,
  87. width: width,
  88. height: height
  89. });
  90. this.callParent([config]);
  91. if (config.remove !== false) {
  92. // Don't use table.remove() as that destroys the row/cell data in the table in
  93. // IE6-7 so it cannot be read by the data reader.
  94. data.parentNode.removeChild(data);
  95. }
  96. },
  97. onDestroy: function() {
  98. this.callParent();
  99. this.table.remove();
  100. delete this.table;
  101. }
  102. });</pre>
  103. </body>
  104. </html>