-/*!
- * Ext JS Library 3.0.0
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
+Ext.require([
+ 'Ext.grid.*',
+ 'Ext.data.*',
+ 'Ext.panel.*',
+ 'Ext.layout.container.Border'
+]);
+
Ext.onReady(function(){
-
- // create the Data Store
- var store = new Ext.data.Store({
- // load using HTTP
- url: 'sheldon.xml',
+ Ext.define('Book',{
+ extend: 'Ext.data.Model',
+ fields: [
+ // 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',
+ 'DetailPageURL'
+ ]
+ });
- // 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 Data Store
+ var store = Ext.create('Ext.data.Store', {
+ model: 'Book',
+ proxy: {
+ // load using HTTP
+ type: 'ajax',
+ url: 'sheldon.xml',
+ // the return will be XML, so lets set up a reader
+ reader: {
+ type: 'xml',
+ record: 'Item',
+ totalProperty : 'total'
+ }
+ }
});
// create the grid
- var grid = new Ext.grid.GridPanel({
+ var grid = Ext.create('Ext.grid.Panel', {
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}
+ {text: "Author", width: 120, dataIndex: 'Author', sortable: true},
+ {text: "Title", flex: 1, dataIndex: 'Title', sortable: true},
+ {text: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
+ {text: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
],
- sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
- viewConfig: {
- forceFit: true
- },
+ viewConfig: {
+ forceFit: true
+ },
height:210,
- split: true,
- region: 'north'
+ 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);
+ }
});
-
- // 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();
});
\ No newline at end of file