3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
7 Ext.onReady(function(){
9 // create the Data Store
10 var store = new Ext.data.Store({
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
19 totalRecords: '@total'
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'},
27 // Detail URL is not part of the column model of the grid
33 var grid = new Ext.grid.GridPanel({
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}
41 sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
50 // define a template to use for the detail view
52 'Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>',
53 'Author: {Author}<br/>',
54 'Manufacturer: {Manufacturer}<br/>',
55 'Product Group: {ProductGroup}<br/>'
57 var bookTpl = new Ext.Template(bookTplMarkup);
59 var ct = new Ext.Panel({
60 renderTo: 'binding-example',
72 background: '#ffffff',
75 html: 'Please select a book to see additional details.'
79 grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
80 var detailPanel = Ext.getCmp('detailPanel');
81 bookTpl.overwrite(detailPanel.body, r.data);