/*
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
*/
// setup an App namespace
// This is done to prevent collisions in the global namespace
Ext.ns('App');

/**
 * App.BookStore
 * @extends Ext.data.Store
 * @cfg {String} url This will be a url of a location to load the BookStore
 * This is a specialized Store which maintains books.
 * It already knows about Amazon's XML definition and will expose the following
 * Record defintion:
 *  - Author
 *  - Manufacturer
 *  - ProductGroup
 *  - DetailPageURL
 */
App.BookStore = function(config) {
	var config = config || {};
	Ext.applyIf(config, {
		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'
       ])
	});
	// call the superclass's constructor
	App.BookStore.superclass.constructor.call(this, config);
};
Ext.extend(App.BookStore, Ext.data.Store);



/**
 * App.BookGrid
 * @extends Ext.grid.GridPanel
 * This is a custom grid which will display book information. It is tied to
 * a specific record definition by the dataIndex properties.
 *
 * It follows a very custom pattern used only when extending Ext.Components
 * in which you can omit the constructor.
 *
 * It also registers the class with the Component Manager with an xtype of
 * bookgrid. This allows the application to take care of the lazy-instatiation
 * facilities provided in Ext's Component Model.
 */
App.BookGrid = Ext.extend(Ext.grid.GridPanel, {
	// override
	initComponent : function() {
		Ext.apply(this, {
			// Pass in a column model definition
			// Note that the DetailPageURL was defined in the record definition but is not used
			// here. That is okay.
	        columns: [
	            {header: "Author", width: 120, dataIndex: 'Author', sortable: true},
	            {header: "Title", dataIndex: 'Title', sortable: true},
	            {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
	            {header: "Product Group", dataIndex: 'ProductGroup', sortable: true}
	        ],
			sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
			// Note the use of a storeId, this will register thisStore
			// with the StoreMgr and allow us to retrieve it very easily.
			store: new App.BookStore({
				storeId: 'gridBookStore',
				url: 'sheldon.xml'
			}),
			// force the grid to fit the space which is available
			viewConfig: {
				forceFit: true
			}
		});
		// finally call the superclasses implementation
		App.BookGrid.superclass.initComponent.call(this);
	}
});
// This will associate an string representation of a class
// (called an xtype) with the Component Manager
// It allows you to support lazy instantiation of your components
Ext.reg('bookgrid', App.BookGrid);


/**
 * App.BookDetail
 * @extends Ext.Panel
 * This is a specialized Panel which is used to show information about
 * a book.
 *
 * This demonstrates adding 2 custom properties (tplMarkup and
 * startingMarkup) to the class. It also overrides the initComponent
 * method and adds a new method called updateDetail.
 *
 * The class will be registered with an xtype of 'bookdetail'
 */
App.BookDetail = Ext.extend(Ext.Panel, {
	// add tplMarkup as a new property
	tplMarkup: [
		'Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>',
		'Author: {Author}<br/>',
		'Manufacturer: {Manufacturer}<br/>',
		'Product Group: {ProductGroup}<br/>'
	],
	// startingMarup as a new property
	startingMarkup: 'Please select a book to see additional details',
	// override initComponent to create and compile the template
	// apply styles to the body of the panel and initialize
	// html to startingMarkup
	initComponent: function() {
		this.tpl = new Ext.Template(this.tplMarkup);
		Ext.apply(this, {
			bodyStyle: {
				background: '#ffffff',
				padding: '7px'
			},
			html: this.startingMarkup
		});
		// call the superclass's initComponent implementation
		App.BookDetail.superclass.initComponent.call(this);
	},
	// add a method which updates the details
	updateDetail: function(data) {
		this.tpl.overwrite(this.body, data);
	}
});
// register the App.BookDetail class with an xtype of bookdetail
Ext.reg('bookdetail', App.BookDetail);


/**
 * App.BookMasterDetail
 * @extends Ext.Panel
 *
 * This is a specialized panel which is composed of both a bookgrid
 * and a bookdetail panel. It provides the glue between the two
 * components to allow them to communicate. You could consider this
 * the actual application.
 *
 */
App.BookMasterDetail = Ext.extend(Ext.Panel, {
	// override initComponent
	initComponent: function() {
		// used applyIf rather than apply so user could
		// override the defaults
		Ext.applyIf(this, {
			frame: true,
			title: 'Book List',
			width: 540,
			height: 400,
			layout: 'border',
			items: [{
				xtype: 'bookgrid',
				itemId: 'gridPanel',
				region: 'north',
				height: 210,
				split: true
			},{
				xtype: 'bookdetail',
				itemId: 'detailPanel',
				region: 'center'
			}]
		})
		// call the superclass's initComponent implementation
		App.BookMasterDetail.superclass.initComponent.call(this);
	},
	// override initEvents
	initEvents: function() {
		// call the superclass's initEvents implementation
		App.BookMasterDetail.superclass.initEvents.call(this);

		// now add application specific events
		// notice we use the selectionmodel's rowselect event rather
		// than a click event from the grid to provide key navigation
		// as well as mouse navigation
		var bookGridSm = this.getComponent('gridPanel').getSelectionModel();
		bookGridSm.on('rowselect', this.onRowSelect, this);
	},
	// add a method called onRowSelect
	// This matches the method signature as defined by the 'rowselect'
	// event defined in Ext.grid.RowSelectionModel
	onRowSelect: function(sm, rowIdx, r) {
		// getComponent will retrieve itemId's or id's. Note that itemId's
		// are scoped locally to this instance of a component to avoid
		// conflicts with the ComponentMgr
		var detailPanel = this.getComponent('detailPanel');
		detailPanel.updateDetail(r.data);
	}
});
// register an xtype with this class
Ext.reg('bookmasterdetail', App.BookMasterDetail);


// Finally now that we've defined all of our classes we can instantiate
// an instance of the app and renderTo an existing div called 'binding-example'
// Note now that classes have encapsulated this behavior we can easily create
// an instance of this app to be used in many different contexts, you could
// easily place this application in an Ext.Window for example
Ext.onReady(function() {
	// create an instance of the app
	var bookApp = new App.BookMasterDetail({
		renderTo: 'binding-example'
	});
	// We can retrieve a reference to the data store
	// via the StoreMgr by its storeId
	Ext.StoreMgr.get('gridBookStore').load();
});