2 * Ext JS Library 2.2.1
\r
3 * Copyright(c) 2006-2009, Ext JS, LLC.
\r
4 * licensing@extjs.com
\r
6 * http://extjs.com/license
\r
9 Ext.onReady(function(){
\r
11 // create the Data Store
\r
12 var store = new Ext.data.Store({
\r
16 // the return will be XML, so lets set up a reader
\r
17 reader: new Ext.data.XmlReader({
\r
18 // records will have an "Item" tag
\r
21 totalRecords: '@total'
\r
23 // set up the fields mapping into the xml doc
\r
24 // The first needs mapping, the others are very basic
\r
25 {name: 'Author', mapping: 'ItemAttributes > Author'},
\r
29 // Detail URL is not part of the column model of the grid
\r
35 var grid = new Ext.grid.GridPanel({
\r
38 {header: "Author", width: 120, dataIndex: 'Author', sortable: true},
\r
39 {header: "Title", width: 180, dataIndex: 'Title', sortable: true},
\r
40 {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
\r
41 {header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
\r
43 sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
\r
52 // define a template to use for the detail view
\r
53 var bookTplMarkup = [
\r
54 'Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>',
\r
55 'Author: {Author}<br/>',
\r
56 'Manufacturer: {Manufacturer}<br/>',
\r
57 'Product Group: {ProductGroup}<br/>'
\r
59 var bookTpl = new Ext.Template(bookTplMarkup);
\r
61 var ct = new Ext.Panel({
\r
62 renderTo: 'binding-example',
\r
74 background: '#ffffff',
\r
77 html: 'Please select a book to see additional details.'
\r
81 grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
\r
82 var detailPanel = Ext.getCmp('detailPanel');
\r
83 bookTpl.overwrite(detailPanel.body, r.data);
\r