| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 | <!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);        }    },    onDestroy: function() {        this.callParent();        this.table.remove();        delete this.table;    }});</pre></body></html>
 |