+ 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 = Ext.create('Ext.Template', bookTplMarkup);
+
+ Ext.create('Ext.Panel', {
+ renderTo: 'binding-example',
+ frame: true,
+ title: 'Book List',
+ width: 540,
+ height: 400,
+ layout: 'border',
+ items: [
+ grid, {
+ id: 'detailPanel',
+ region: 'center',
+ bodyPadding: 7,
+ bodyStyle: "background: #ffffff;",
+ html: 'Please select a book to see additional details.'
+ }]
+ });
+
+ // update panel body on selection change
+ grid.getSelectionModel().on('selectionchange', function(sm, selectedRecord) {
+ if (selectedRecord.length) {
+ var detailPanel = Ext.getCmp('detailPanel');
+ bookTpl.overwrite(detailPanel.body, selectedRecord[0].data);
+ }