Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / examples / ux / grid / TransformGrid.js

diff --git a/examples/ux/grid/TransformGrid.js b/examples/ux/grid/TransformGrid.js
new file mode 100644 (file)
index 0000000..722d103
--- /dev/null
+++ b/examples/ux/grid/TransformGrid.js
@@ -0,0 +1,100 @@
+/**
+ * @class Ext.ux.grid.TransformGrid
+ * @extends Ext.grid.Panel
+ * A Grid which creates itself from an existing HTML table element.
+ * @history
+ * 2007-03-01 Original version by Nige "Animal" White
+ * 2007-03-10 jvs Slightly refactored to reuse existing classes * @constructor
+ * @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.
+ */
+Ext.define('Ext.ux.grid.TransformGrid', {
+    extend: 'Ext.grid.Panel',
+    
+    constructor: function(table, config) {
+        config = Ext.apply({}, config);
+        table = this.table = Ext.get(table);
+    
+        var configFields = config.fields || [], 
+            configColumns = config.columns || [],
+            fields = [],
+            cols = [],
+            ct = table.insertSibling(),
+            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();
+        }
+        
+        if (config.height) {
+            height = config.height;
+        }
+    
+        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);
+        }
+        
+    
+        Ext.applyIf(config, {
+            store: {
+                data: data,
+                fields: fields,
+                proxy: {
+                    type: 'memory',
+                    reader: {
+                        record: 'tbody tr',
+                        type: 'xml'
+                    }
+                }    
+            },
+            columns: cols,
+            width: width,
+            autoHeight: height ? false : true,
+            height: height,
+            el: ct
+        });
+        this.callParent([config]);    
+    },
+
+    onDestroy: function() {
+        this.callParent();
+        this.table.remove();
+        delete this.table;
+    }
+});
\ No newline at end of file