examples/grid/property.html

   1 <html>
   2 <head>
   3 <title>Property Grid</title>
   4 <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
   5 <link rel="stylesheet" type="text/css" href="../shared/example.css" />
   6 <script type="text/javascript" src="../../bootstrap.js"></script>
   7 <script type="text/javascript">
   8     Ext.require(['*']);
   9
  10     Ext.onReady(function() {
  11         // simulate updating the grid data via a button click
  12         new Ext.Button({
  13             renderTo: 'button-container',
  14             text: 'Update source',
  15             handler: function(){
  16                 propsGrid.setSource({
  17                     '(name)': 'Property Grid',
  18                     grouping: false,
  19                     autoFitColumns: true,
  20                     productionQuality: true,
  21                     created: new Date(),
  22                     tested: false,
  23                     version: 0.8,
  24                     borderWidth: 2
  25                 });
  26             }
  27         });
  28
  29         var propsGrid = Ext.create('Ext.grid.property.Grid', {
  30             width: 300,
  31             renderTo: 'grid-container',
  32             propertyNames: {
  33                 tested: 'QA',
  34                 borderWidth: 'Border Width'
  35             },
  36             source: {
  37                 "(name)": "Properties Grid",
  38                 "grouping": false,
  39                 "autoFitColumns": true,
  40                 "productionQuality": false,
  41                 "created": Ext.Date.parse('10/15/2006', 'm/d/Y'),
  42                 "tested": false,
  43                 "version": 0.01,
  44                 "borderWidth": 1
  45             }
  46         });
  47     });
  48 </script>
  49 </head>
  50 <body>
  51     <h1>Property Grid Example</h1>
  52     <p>This example shows how to create a property grid from an object.</p>
  53     <p>Note that the js is not minified so it is readable. View the source of this page to see it.</p>
  54 </body>
  55 <div id="button-container"></div>
  56 <p></p>
  57 <div id="grid-container"></div>
  58 </html>