docs/source/xml-grid.html

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   8     <pre class="prettyprint lang-js">Ext.onReady(function(){\r
   9 \r
  10     // create the Data Store\r
  11     var store = new Ext.data.Store({\r
  12         // load using HTTP\r
  13         url: 'sheldon.xml',\r
  14 \r
  15         // the return will be XML, so lets set up a reader\r
  16         reader: new Ext.data.XmlReader({\r
  17                // records will have an "Item" tag\r
  18                record: 'Item',\r
  19                id: 'ASIN',\r
  20                totalRecords: '@total'\r
  21            }, [\r
  22                // set up the fields mapping into the xml doc\r
  23                // The first needs mapping, the others are very basic\r
  24                {name: 'Author', mapping: 'ItemAttributes > Author'},\r
  25                'Title', 'Manufacturer', 'ProductGroup'\r
  26            ])\r
  27     });\r
  28 \r
  29     // create the grid\r
  30     var grid = new Ext.grid.GridPanel({\r
  31         store: store,\r
  32         columns: [\r
  33             {header: "Author", width: 120, dataIndex: 'Author', sortable: true},\r
  34             {header: "Title", width: 180, dataIndex: 'Title', sortable: true},\r
  35             {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},\r
  36             {header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}\r
  37         ],\r
  38         renderTo:'example-grid',\r
  39         width:540,\r
  40         height:200\r
  41     });\r
  42 \r
  43     store.load();\r
  44 });\r
  45 </pre>    \r
  46 </body>\r
  47 </html>