Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / examples / grid / property.html
diff --git a/examples/grid/property.html b/examples/grid/property.html

new file mode 100644 (file)

index 0000000..12cf563
--- /dev/null
+++ b/examples/grid/property.html
@@ -0,0 +1,58 @@
+<html>
+<head>
+<title>Property Grid</title>
+<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+<link rel="stylesheet" type="text/css" href="../shared/example.css" />
+<script type="text/javascript" src="../../bootstrap.js"></script>
+<script type="text/javascript">
+    Ext.require(['*']);
+
+    Ext.onReady(function() {
+        // simulate updating the grid data via a button click
+        new Ext.Button({
+            renderTo: 'button-container',
+            text: 'Update source',
+            handler: function(){
+                propsGrid.setSource({
+                    '(name)': 'Property Grid',
+                    grouping: false,
+                    autoFitColumns: true,
+                    productionQuality: true,
+                    created: new Date(),
+                    tested: false,
+                    version: 0.8,
+                    borderWidth: 2
+                });
+            }
+        });
+
+        var propsGrid = Ext.create('Ext.grid.property.Grid', {
+            width: 300,
+            renderTo: 'grid-container',
+            propertyNames: {
+                tested: 'QA',
+                borderWidth: 'Border Width'
+            },
+            source: {
+                "(name)": "Properties Grid",
+                "grouping": false,
+                "autoFitColumns": true,
+                "productionQuality": false,
+                "created": Ext.Date.parse('10/15/2006', 'm/d/Y'),
+                "tested": false,
+                "version": 0.01,
+                "borderWidth": 1
+            }
+        });
+    });
+</script>
+</head>
+<body>
+    <h1>Property Grid Example</h1>
+    <p>This example shows how to create a property grid from an object.</p>
+    <p>Note that the js is not minified so it is readable. View the source of this page to see it.</p>
+</body>
+<div id="button-container"></div>
+<p></p>
+<div id="grid-container"></div>
+</html>
+\ No newline at end of file