examples/grid/xml-grid.js

   1 Ext.require([
   2     'Ext.data.*',
   3     'Ext.grid.*'
   4 ]);
   5
   6 Ext.onReady(function(){
   7     Ext.define('Book',{
   8         extend: 'Ext.data.Model',
   9         fields: [
  10             // set up the fields mapping into the xml doc
  11             // The first needs mapping, the others are very basic
  12             {name: 'Author', mapping: 'ItemAttributes > Author'},
  13             'Title', 'Manufacturer', 'ProductGroup'
  14         ]
  15     });
  16
  17     // create the Data Store
  18     var store = Ext.create('Ext.data.Store', {
  19         model: 'Book',
  20         autoLoad: true,
  21         proxy: {
  22             // load using HTTP
  23             type: 'ajax',
  24             url: 'sheldon.xml',
  25             // the return will be XML, so lets set up a reader
  26             reader: {
  27                 type: 'xml',
  28                 // records will have an "Item" tag
  29                 record: 'Item',
  30                 idProperty: 'ASIN',
  31                 totalRecords: '@total'
  32             }
  33         }
  34     });
  35
  36     // create the grid
  37     var grid = Ext.create('Ext.grid.Panel', {
  38         store: store,
  39         columns: [
  40             {text: "Author", flex: 1, dataIndex: 'Author', sortable: true},
  41             {text: "Title", width: 180, dataIndex: 'Title', sortable: true},
  42             {text: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
  43             {text: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
  44         ],
  45         renderTo:'example-grid',
  46         width: 540,
  47         height: 200
  48     });
  49 });