3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
7 // setup an App namespace
8 // This is done to prevent collisions in the global namespace
13 * @extends Ext.data.Store
14 * @cfg {String} url This will be a url of a location to load the BookStore
15 * This is a specialized Store which maintains books.
16 * It already knows about Amazon's XML definition and will expose the following
23 App.BookStore = function(config) {
24 var config = config || {};
26 reader: new Ext.data.XmlReader({
27 // records will have an "Item" tag
30 totalRecords: '@total'
32 // set up the fields mapping into the xml doc
33 // The first needs mapping, the others are very basic
34 {name: 'Author', mapping: 'ItemAttributes > Author'},
38 // Detail URL is not part of the column model of the grid
42 // call the superclass's constructor
43 App.BookStore.superclass.constructor.call(this, config);
45 Ext.extend(App.BookStore, Ext.data.Store);
51 * @extends Ext.grid.GridPanel
52 * This is a custom grid which will display book information. It is tied to
53 * a specific record definition by the dataIndex properties.
55 * It follows a very custom pattern used only when extending Ext.Components
56 * in which you can omit the constructor.
58 * It also registers the class with the Component Manager with an xtype of
59 * bookgrid. This allows the application to take care of the lazy-instatiation
60 * facilities provided in Ext's Component Model.
62 App.BookGrid = Ext.extend(Ext.grid.GridPanel, {
64 initComponent : function() {
66 // Pass in a column model definition
67 // Note that the DetailPageURL was defined in the record definition but is not used
68 // here. That is okay.
70 {header: "Author", width: 120, dataIndex: 'Author', sortable: true},
71 {header: "Title", dataIndex: 'Title', sortable: true},
72 {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
73 {header: "Product Group", dataIndex: 'ProductGroup', sortable: true}
75 sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
76 // Note the use of a storeId, this will register thisStore
77 // with the StoreMgr and allow us to retrieve it very easily.
78 store: new App.BookStore({
79 storeId: 'gridBookStore',
82 // force the grid to fit the space which is available
87 // finally call the superclasses implementation
88 App.BookGrid.superclass.initComponent.call(this);
91 // This will associate an string representation of a class
92 // (called an xtype) with the Component Manager
93 // It allows you to support lazy instantiation of your components
94 Ext.reg('bookgrid', App.BookGrid);
100 * This is a specialized Panel which is used to show information about
103 * This demonstrates adding 2 custom properties (tplMarkup and
104 * startingMarkup) to the class. It also overrides the initComponent
105 * method and adds a new method called updateDetail.
107 * The class will be registered with an xtype of 'bookdetail'
109 App.BookDetail = Ext.extend(Ext.Panel, {
110 // add tplMarkup as a new property
112 'Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>',
113 'Author: {Author}<br/>',
114 'Manufacturer: {Manufacturer}<br/>',
115 'Product Group: {ProductGroup}<br/>'
117 // startingMarup as a new property
118 startingMarkup: 'Please select a book to see additional details',
119 // override initComponent to create and compile the template
120 // apply styles to the body of the panel and initialize
121 // html to startingMarkup
122 initComponent: function() {
123 this.tpl = new Ext.Template(this.tplMarkup);
126 background: '#ffffff',
129 html: this.startingMarkup
131 // call the superclass's initComponent implementation
132 App.BookDetail.superclass.initComponent.call(this);
134 // add a method which updates the details
135 updateDetail: function(data) {
136 this.tpl.overwrite(this.body, data);
139 // register the App.BookDetail class with an xtype of bookdetail
140 Ext.reg('bookdetail', App.BookDetail);
144 * App.BookMasterDetail
147 * This is a specialized panel which is composed of both a bookgrid
148 * and a bookdetail panel. It provides the glue between the two
149 * components to allow them to communicate. You could consider this
150 * the actual application.
153 App.BookMasterDetail = Ext.extend(Ext.Panel, {
154 // override initComponent
155 initComponent: function() {
156 // used applyIf rather than apply so user could
157 // override the defaults
172 itemId: 'detailPanel',
176 // call the superclass's initComponent implementation
177 App.BookMasterDetail.superclass.initComponent.call(this);
179 // override initEvents
180 initEvents: function() {
181 // call the superclass's initEvents implementation
182 App.BookMasterDetail.superclass.initEvents.call(this);
184 // now add application specific events
185 // notice we use the selectionmodel's rowselect event rather
186 // than a click event from the grid to provide key navigation
187 // as well as mouse navigation
188 var bookGridSm = this.getComponent('gridPanel').getSelectionModel();
189 bookGridSm.on('rowselect', this.onRowSelect, this);
191 // add a method called onRowSelect
192 // This matches the method signature as defined by the 'rowselect'
193 // event defined in Ext.grid.RowSelectionModel
194 onRowSelect: function(sm, rowIdx, r) {
195 // getComponent will retrieve itemId's or id's. Note that itemId's
196 // are scoped locally to this instance of a component to avoid
197 // conflicts with the ComponentMgr
198 var detailPanel = this.getComponent('detailPanel');
199 detailPanel.updateDetail(r.data);
202 // register an xtype with this class
203 Ext.reg('bookmasterdetail', App.BookMasterDetail);
206 // Finally now that we've defined all of our classes we can instantiate
207 // an instance of the app and renderTo an existing div called 'binding-example'
208 // Note now that classes have encapsulated this behavior we can easily create
209 // an instance of this app to be used in many different contexts, you could
210 // easily place this application in an Ext.Window for example
211 Ext.onReady(function() {
212 // create an instance of the app
213 var bookApp = new App.BookMasterDetail({
214 renderTo: 'binding-example'
216 // We can retrieve a reference to the data store
217 // via the StoreMgr by its storeId
218 Ext.StoreMgr.get('gridBookStore').load();