98 lines
No EOL
2.9 KiB
JavaScript
98 lines
No EOL
2.9 KiB
JavaScript
/*
|
|
This file is part of Ext JS 3.4
|
|
|
|
Copyright (c) 2011-2013 Sencha Inc
|
|
|
|
Contact: http://www.sencha.com/contact
|
|
|
|
GNU General Public License Usage
|
|
This file may be used under the terms of the GNU General Public License version 3.0 as
|
|
published by the Free Software Foundation and appearing in the file LICENSE included in the
|
|
packaging of this file.
|
|
|
|
Please review the following information to ensure the GNU General Public License version 3.0
|
|
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
|
|
|
|
If you are unsure which license is appropriate for your use, please contact the sales department
|
|
at http://www.sencha.com/contact.
|
|
|
|
Build date: 2013-04-03 15:07:25
|
|
*/
|
|
Ext.onReady(function(){
|
|
|
|
// create the Data Store
|
|
var store = new Ext.data.Store({
|
|
// load using HTTP
|
|
url: '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();
|
|
}); |