projects / extjs.git / blame
| Commit | Line | Data |
|---|---|---|
| 6527f429 DM |
1 | <!DOCTYPE html>\r |
| 2 | <html>\r | |
| 3 | <head>\r | |
| 4 | <meta http-equiv="X-UA-Compatible" content="IE=edge">\r | |
| 5 | <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">\r | |
| 6 | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">\r | |
| 7 | <title>Test meta config and metachange event support</title>\r | |
| 8 | <link rel="stylesheet" type="text/css" href="../shared/examples.css" />\r | |
| 9 | \r | |
| 10 | <!-- GC -->\r | |
| 11 | \r | |
| 12 | <script type="text/javascript" src="../shared/include-ext.js"></script>\r | |
| 13 | <script type="text/javascript" src="../shared/options-toolbar.js"></script>\r | |
| 14 | \r | |
| 15 | <script type="text/javascript" charset="utf-8">\r | |
| 16 | \r | |
| 17 | Ext.Loader.setConfig({enabled: true});\r | |
| 18 | Ext.require([\r | |
| 19 | 'Ext.grid.*',\r | |
| 20 | 'Ext.data.*',\r | |
| 21 | 'Ext.util.*',\r | |
| 22 | 'Ext.form.field.*'\r | |
| 23 | ]);\r | |
| 24 | \r | |
| 25 | Ext.define('MetaModel', {\r | |
| 26 | extend: 'Ext.data.Model'\r | |
| 27 | });\r | |
| 28 | \r | |
| 29 | Ext.onReady(function(){\r | |
| 30 | \r | |
| 31 | var metaStore = Ext.create('Ext.data.Store', {\r | |
| 32 | model: 'MetaModel',\r | |
| 33 | autoLoad: true,\r | |
| 34 | proxy: {\r | |
| 35 | type: 'ajax',\r | |
| 36 | url: 'meta-config-basic.php',\r | |
| 37 | reader: {\r | |
| 38 | type: 'json',\r | |
| 39 | root: 'data'\r | |
| 40 | }\r | |
| 41 | },\r | |
| 42 | listeners: {\r | |
| 43 | 'metachange': function(store, meta) {\r | |
| 44 | grid.reconfigure(store, meta.columns);\r | |
| 45 | }\r | |
| 46 | }\r | |
| 47 | });\r | |
| 48 | \r | |
| 49 | var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {\r | |
| 50 | clicksToMoveEditor: 1,\r | |
| 51 | autoCancel: false\r | |
| 52 | });\r | |
| 53 | \r | |
| 54 | var grid = Ext.create('Ext.grid.Panel', {\r | |
| 55 | width: 800,\r | |
| 56 | height: 300,\r | |
| 57 | title: 'Meta Grid',\r | |
| 58 | store: metaStore,\r | |
| 59 | columns: [],\r | |
| 60 | renderTo: 'grid-ct',\r | |
| 61 | tbar: [{\r | |
| 62 | text: 'Reload Metadata',\r | |
| 63 | handler: function() {\r | |
| 64 | metaStore.load();\r | |
| 65 | }\r | |
| 66 | }],\r | |
| 67 | plugins: rowEditing\r | |
| 68 | });\r | |
| 69 | });\r | |
| 70 | </script>\r | |
| 71 | </head>\r | |
| 72 | <body>\r | |
| 73 | <h1>Basic Meta Configuration</h1>\r | |
| 74 | <p>This example demonstrates reconfiguring a grid dynamically based on the metadata returned by the server<br>\r | |
| 75 | (requires PHP). Click the "Reload Metadata" button to see a new randomized column set and data in the grid.</p>\r | |
| 76 | <p>Note also that the grid is editable on double-click, and that the editors automatically update as well. See below for additional details.</p>\r | |
| 77 | \r | |
| 78 | <div id="grid-ct" style="width:800px;height:300px;"></div>\r | |
| 79 | \r | |
| 80 | <p style="margin-top:30px;">The server response is in this format:</p>\r | |
| 81 | <pre><code>{\r | |
| 82 | data: [{ ... }],\r | |
| 83 | msg: "...",\r | |
| 84 | total: 99,\r | |
| 85 | metaData: {\r | |
| 86 | fields: [{ ... }],\r | |
| 87 | columns: [{ ... }],\r | |
| 88 | idProperty: "id",\r | |
| 89 | messageProperty: "msg",\r | |
| 90 | root: "data"\r | |
| 91 | }\r | |
| 92 | }\r | |
| 93 | </code></pre>\r | |
| 94 | <p>The store/model automatically read the <code>fields</code> config to reconfigure the data model, but you can add any\r | |
| 95 | additional custom data into the <code>metaData</code> that you need. In this example we've added a <code>columns</code>\r | |
| 96 | config that contains a grid-specific column configuration that can be passed to the <code>grid.reconfigure()</code> method\r | |
| 97 | in the store's load event handler. You could easily add other widget-specific configurations into the response as well.</p>\r | |
| 98 | </body>\r | |
| 99 | </html>\r |