/ext-4.1.0_b3/docs/source/TransformGrid.html
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 "Animal" 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 */
31Ext.define('Ext.ux.grid.TransformGrid', {
32 extend: 'Ext.grid.Panel',
33
34 constructor: function(table, config) {
35 config = Ext.apply({}, config);
36 table = this.table = Ext.get(table);
37
38 var configFields = config.fields || [],
39 configColumns = config.columns || [],
40 fields = [],
41 cols = [],
42 headers = table.query("thead th"),
43 i = 0,
44 len = headers.length,
45 data = table.dom,
46 width,
47 height,
48 store,
49 col,
50 text,
51 name;
52
53 for (; i < len; ++i) {
54 col = headers[i];
55
56 text = col.innerHTML;
57 name = 'tcol-' + i;
58
59 fields.push(Ext.applyIf(configFields[i] || {}, {
60 name: name,
61 mapping: 'td:nth(' + (i + 1) + ')/@innerHTML'
62 }));
63
64 cols.push(Ext.applyIf(configColumns[i] || {}, {
65 text: text,
66 dataIndex: name,
67 width: col.offsetWidth,
68 tooltip: col.title,
69 sortable: true
70 }));
71 }
72
73 if (config.width) {
74 width = config.width;
75 } else {
76 width = table.getWidth() + 1;
77 }
78
79 if (config.height) {
80 height = config.height;
81 }
82
83 Ext.applyIf(config, {
84 store: {
85 data: data,
86 fields: fields,
87 proxy: {
88 type: 'memory',
89 reader: {
90 record: 'tbody tr',
91 type: 'xml'
92 }
93 }
94 },
95 columns: cols,
96 width: width,
97 height: height
98 });
99 this.callParent([config]);
100
101 if (config.remove !== false) {
102 // Don't use table.remove() as that destroys the row/cell data in the table in
103 // IE6-7 so it cannot be read by the data reader.
104 data.parentNode.removeChild(data);
105 }
106 },
107
108 onDestroy: function() {
109 this.callParent();
110 this.table.remove();
111 delete this.table;
112 }
113});</pre>
114</body>
115</html>