examples/grid/binding.js

   1 Ext.require([
   2     'Ext.grid.*',
   3     'Ext.data.*',
   4     'Ext.panel.*',
   5     'Ext.layout.container.Border'
   6 ]);
   7
   8 Ext.onReady(function(){
   9     Ext.define('Book',{
  10         extend: 'Ext.data.Model',
  11         fields: [
  12             // set up the fields mapping into the xml doc
  13             // The first needs mapping, the others are very basic
  14             {name: 'Author', mapping: 'ItemAttributes > Author'},
  15             'Title',
  16             'Manufacturer',
  17             'ProductGroup',
  18             'DetailPageURL'
  19         ]
  20     });
  21
  22     // create the Data Store
  23     var store = Ext.create('Ext.data.Store', {
  24         model: 'Book',
  25         proxy: {
  26             // load using HTTP
  27             type: 'ajax',
  28             url: 'sheldon.xml',
  29             // the return will be XML, so lets set up a reader
  30             reader: {
  31                 type: 'xml',
  32                 record: 'Item',
  33                 totalProperty  : 'total'
  34             }
  35         }
  36     });
  37
  38     // create the grid
  39     var grid = Ext.create('Ext.grid.Panel', {
  40         store: store,
  41         columns: [
  42             {text: "Author", width: 120, dataIndex: 'Author', sortable: true},
  43             {text: "Title", flex: 1, dataIndex: 'Title', sortable: true},
  44             {text: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
  45             {text: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
  46         ],
  47         viewConfig: {
  48             forceFit: true
  49         },
  50         height:210,
  51         split: true,
  52         region: 'north'
  53     });
  54
  55     // define a template to use for the detail view
  56     var bookTplMarkup = [
  57         'Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>',
  58         'Author: {Author}<br/>',
  59         'Manufacturer: {Manufacturer}<br/>',
  60         'Product Group: {ProductGroup}<br/>'
  61     ];
  62     var bookTpl = Ext.create('Ext.Template', bookTplMarkup);
  63
  64     Ext.create('Ext.Panel', {
  65         renderTo: 'binding-example',
  66         frame: true,
  67         title: 'Book List',
  68         width: 540,
  69         height: 400,
  70         layout: 'border',
  71         items: [
  72             grid, {
  73                 id: 'detailPanel',
  74                 region: 'center',
  75                 bodyPadding: 7,
  76                 bodyStyle: "background: #ffffff;",
  77                 html: 'Please select a book to see additional details.'
  78         }]
  79     });
  80
  81     // update panel body on selection change
  82     grid.getSelectionModel().on('selectionchange', function(sm, selectedRecord) {
  83         if (selectedRecord.length) {
  84             var detailPanel = Ext.getCmp('detailPanel');
  85             bookTpl.overwrite(detailPanel.body, selectedRecord[0].data);
  86         }
  87     });
  88
  89     store.load();
  90 });