    /**
     * A Grid which creates itself from an existing HTML table element.
     */
    Ext.define('Ext.ux.grid.TransformGrid', {
        extend: 'Ext.grid.Panel',

        /**
         * 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;
        }
    });