examples/grid/binding.js

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