Data Binding Example and Ext.data.XmlReader

  

<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

</head>

<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.onReady(function(){
  
    // create the Data Store
    var store = new Ext.data.Store({
        // load using HTTP
        url: 'ext-3.0.0/examples/grid/sheldon.xml',

        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have an "Item" tag
               record: 'Item',
               id: 'ASIN',
               totalRecords: '@total'
           }, [
               // set up the fields mapping into the xml doc
               // The first needs mapping, the others are very basic
               {name: 'Author', mapping: 'ItemAttributes > Author'},
               'Title',
         'Manufacturer',
         'ProductGroup',
         // Detail URL is not part of the column model of the grid
         'DetailPageURL'
           ])
    });

    // create the grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: "Author", width: 120, dataIndex: 'Author', sortable: true},
            {header: "Title", width: 180, dataIndex: 'Title', sortable: true},
            {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
            {header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
        ],
    sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
    viewConfig: {
      forceFit: true
    },
        height:210,
    split: true,
    region: 'north'
    });
  
  // define a template to use for the detail view
  var bookTplMarkup = [
    'Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>',
    'Author: {Author}<br/>',
    'Manufacturer: {Manufacturer}<br/>',
    'Product Group: {ProductGroup}<br/>'
  ];
  var bookTpl = new Ext.Template(bookTplMarkup);

  var ct = new Ext.Panel({
    renderTo: 'binding-example',
    frame: true,
    title: 'Book List',
    width: 540,
    height: 400,
    layout: 'border',
    items: [
      grid,
      {
        id: 'detailPanel',
        region: 'center',
        bodyStyle: {
          background: '#ffffff',
          padding: '7px'
        },
        html: 'Please select a book to see additional details.'
      }
    ]
  })
  grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
    var detailPanel = Ext.getCmp('detailPanel');
    bookTpl.overwrite(detailPanel.body, r.data);
  });
    store.load();
});
</script> 

<div id="binding-example"></div>
</body>
</html>
Related examples in the same category

1.	Use Ext.data.XmlReader to load data from xml file
2.	Define XML reader for read data from xml file
Data Binding Example and Ext.data.XmlReader : XmlReader « Ext JS « JavaScript DHTML

Related examples in the same category
