docs/source/binding.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(){
   9
  10     // create the Data Store
  11     var store = new Ext.data.Store({
  12         // load using HTTP
  13         url: 'sheldon.xml',
  14
  15         // the return will be XML, so lets set up a reader
  16         reader: new Ext.data.XmlReader({
  17                // records will have an "Item" tag
  18                record: 'Item',
  19                id: 'ASIN',
  20                totalRecords: '@total'
  21            }, [
  22                // set up the fields mapping into the xml doc
  23                // The first needs mapping, the others are very basic
  24                {name: 'Author', mapping: 'ItemAttributes > Author'},
  25                'Title',
  26                            'Manufacturer',
  27                            'ProductGroup',
  28                            // Detail URL is not part of the column model of the grid
  29                            'DetailPageURL'
  30            ])
  31     });
  32
  33     // create the grid
  34     var grid = new Ext.grid.GridPanel({
  35         store: store,
  36         columns: [
  37             {header: "Author", width: 120, dataIndex: 'Author', sortable: true},
  38             {header: "Title", width: 180, dataIndex: 'Title', sortable: true},
  39             {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
  40             {header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
  41         ],
  42                 sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
  43                 viewConfig: {
  44                         forceFit: true
  45                 },
  46         height:210,
  47                 split: true,
  48                 region: 'north'
  49     });
  50
  51         // define a template to use for the detail view
  52         var bookTplMarkup = [
  53                 'Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>',
  54                 'Author: {Author}<br/>',
  55                 'Manufacturer: {Manufacturer}<br/>',
  56                 'Product Group: {ProductGroup}<br/>'
  57         ];
  58         var bookTpl = new Ext.Template(bookTplMarkup);
  59
  60         var ct = new Ext.Panel({
  61                 renderTo: 'binding-example',
  62                 frame: true,
  63                 title: 'Book List',
  64                 width: 540,
  65                 height: 400,
  66                 layout: 'border',
  67                 items: [
  68                         grid,
  69                         {
  70                                 id: 'detailPanel',
  71                                 region: 'center',
  72                                 bodyStyle: {
  73                                         background: '#ffffff',
  74                                         padding: '7px'
  75                                 },
  76                                 html: 'Please select a book to see additional details.'
  77                         }
  78                 ]
  79         })
  80         grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
  81                 var detailPanel = Ext.getCmp('detailPanel');
  82                 bookTpl.overwrite(detailPanel.body, r.data);
  83         });
  84     store.load();
  85 });</pre>    \r
  86 </body>\r
  87 </html>