<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js"><span id='Ext-ux-grid-TransformGrid'>/**
|
</span> * A Grid which creates itself from an existing HTML table element.
|
*/
|
Ext.define('Ext.ux.grid.TransformGrid', {
|
extend: 'Ext.grid.Panel',
|
|
<span id='Ext-ux-grid-TransformGrid-method-constructor'> /**
|
</span> * Creates the grid from HTML table element.
|
* @param {String/HTMLElement/Ext.Element} table The table element from which this grid will be created -
|
* The table MUST have some type of size defined for the grid to fill. The container will be
|
* automatically set to position relative if it isn't already.
|
* @param {Object} [config] A config object that sets properties on this grid and has two additional (optional)
|
* properties: fields and columns which allow for customizing data fields and columns for this grid.
|
*/
|
constructor: function(table, config) {
|
config = Ext.apply({}, config);
|
table = this.table = Ext.get(table);
|
|
var configFields = config.fields || [],
|
configColumns = config.columns || [],
|
fields = [],
|
cols = [],
|
headers = table.query("thead th"),
|
i = 0,
|
len = headers.length,
|
data = table.dom,
|
width,
|
height,
|
store,
|
col,
|
text,
|
name;
|
|
for (; i < len; ++i) {
|
col = headers[i];
|
|
text = col.innerHTML;
|
name = 'tcol-' + i;
|
|
fields.push(Ext.applyIf(configFields[i] || {}, {
|
name: name,
|
mapping: 'td:nth(' + (i + 1) + ')/@innerHTML'
|
}));
|
|
cols.push(Ext.applyIf(configColumns[i] || {}, {
|
text: text,
|
dataIndex: name,
|
width: col.offsetWidth,
|
tooltip: col.title,
|
sortable: true
|
}));
|
}
|
|
if (config.width) {
|
width = config.width;
|
} else {
|
width = table.getWidth() + 1;
|
}
|
|
if (config.height) {
|
height = config.height;
|
}
|
|
Ext.applyIf(config, {
|
store: {
|
data: data,
|
fields: fields,
|
proxy: {
|
type: 'memory',
|
reader: {
|
record: 'tbody tr',
|
type: 'xml'
|
}
|
}
|
},
|
columns: cols,
|
width: width,
|
height: height
|
});
|
this.callParent([config]);
|
|
if (config.remove !== false) {
|
// Don't use table.remove() as that destroys the row/cell data in the table in
|
// IE6-7 so it cannot be read by the data reader.
|
data.parentNode.removeChild(data);
|
}
|
},
|
|
<span id='Ext-ux-grid-TransformGrid-method-onDestroy'> onDestroy: function() {
|
</span> this.callParent();
|
this.table.remove();
|
delete this.table;
|
}
|
});</pre>
|
</body>
|
</html>
|
