- Replaced color picker form control with a more robust version.

www/extras/extjs/examples/grid/from-markup.js

@@ -0,0 +1,90 @@
+/*
+ * Ext JS Library 1.0.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+Ext.onReady(function() {
+    var btn = Ext.get("create-grid");
+    btn.on("click", function(){
+        btn.dom.disabled = true;
+
+        // create the grid
+        var grid = new Ext.grid.TableGrid("the-table");
+        grid.render();
+
+    }, false, {single:true}); // run once
+});
+
+/**
+ * @class Ext.grid.TableGrid
+ * @extends Ext.grid.Grid
+ * A Grid which creates itself from an existing HTML table element.
+ * @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.
+ * @history
+ * 2007-03-01 Original version by Nige "Animal" White
+ * 2007-03-10 jvs Slightly refactored to reuse existing classes
+ */
+Ext.grid.TableGrid = function(table, config) {
+    config = config || {};
+    var cf = config.fields || [], ch = config.columns || [];
+    table = Ext.get(table);
+
+    var ct = table.insertSibling();
+
+    var fields = [], cols = [];
+    var headers = table.query("thead th");
+	for (var i = 0, h; h = headers[i]; i++) {
+		var text = h.innerHTML;
+		var name = 'tcol-'+i;
+
+        fields.push(Ext.applyIf(cf[i] || {}, {
+            name: name,
+            mapping: 'td:nth('+(i+1)+')/@innerHTML'
+        }));
+
+		cols.push(Ext.applyIf(ch[i] || {}, {
+			'header': text,
+			'dataIndex': name,
+			'width': h.offsetWidth,
+			'tooltip': h.title,
+            'sortable': true
+        }));
+	}
+
+    var ds  = new Ext.data.Store({
+        reader: new Ext.data.XmlReader({
+            record:'tbody tr'
+        }, fields)
+    });
+
+	ds.loadData(table.dom);
+
+    var cm = new Ext.grid.ColumnModel(cols);
+
+    if(config.width || config.height){
+        ct.setSize(config.width || 'auto', config.height || 'auto');
+    }
+    if(config.remove !== false){
+        table.remove();
+    }
+
+    Ext.grid.TableGrid.superclass.constructor.call(this, ct,
+        Ext.applyIf(config, {
+            'ds': ds,
+            'cm': cm,
+            'sm': new Ext.grid.RowSelectionModel(),
+            autoHeight:true,
+            autoWidth:true
+        }
+    ));
+};
+
+Ext.extend(Ext.grid.TableGrid, Ext.grid.Grid);