examples/grid/binding-with-classes.js

   1 /*!
   2  * Ext JS Library 3.2.2
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 // setup an App namespace
   8 // This is done to prevent collisions in the global namespace
   9 Ext.ns('App');
  10
  11 /**
  12  * App.BookStore
  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
  17  * Record defintion:
  18  *  - Author
  19  *  - Manufacturer
  20  *  - ProductGroup
  21  *  - DetailPageURL
  22  */
  23 App.BookStore = function(config) {
  24         var config = config || {};
  25         Ext.applyIf(config, {
  26                 reader: new Ext.data.XmlReader({
  27            // records will have an "Item" tag
  28            record: 'Item',
  29            id: 'ASIN',
  30            totalRecords: '@total'
  31        }, [
  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'},
  35            'Title',
  36                    'Manufacturer',
  37                    'ProductGroup',
  38                    // Detail URL is not part of the column model of the grid
  39                    'DetailPageURL'
  40        ])
  41         });
  42         // call the superclass's constructor
  43         App.BookStore.superclass.constructor.call(this, config);
  44 };
  45 Ext.extend(App.BookStore, Ext.data.Store);
  46
  47
  48
  49 /**
  50  * App.BookGrid
  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.
  54  *
  55  * It follows a very custom pattern used only when extending Ext.Components
  56  * in which you can omit the constructor.
  57  *
  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.
  61  */
  62 App.BookGrid = Ext.extend(Ext.grid.GridPanel, {
  63         // override
  64         initComponent : function() {
  65                 Ext.apply(this, {
  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.
  69                 columns: [
  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}
  74                 ],
  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',
  80                                 url: 'sheldon.xml'
  81                         }),
  82                         // force the grid to fit the space which is available
  83                         viewConfig: {
  84                                 forceFit: true
  85                         }
  86                 });
  87                 // finally call the superclasses implementation
  88                 App.BookGrid.superclass.initComponent.call(this);
  89         }
  90 });
  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);
  95
  96
  97 /**
  98  * App.BookDetail
  99  * @extends Ext.Panel
 100  * This is a specialized Panel which is used to show information about
 101  * a book.
 102  *
 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.
 106  *
 107  * The class will be registered with an xtype of 'bookdetail'
 108  */
 109 App.BookDetail = Ext.extend(Ext.Panel, {
 110         // add tplMarkup as a new property
 111         tplMarkup: [
 112                 'Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>',
 113                 'Author: {Author}<br/>',
 114                 'Manufacturer: {Manufacturer}<br/>',
 115                 'Product Group: {ProductGroup}<br/>'
 116         ],
 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);
 124                 Ext.apply(this, {
 125                         bodyStyle: {
 126                                 background: '#ffffff',
 127                                 padding: '7px'
 128                         },
 129                         html: this.startingMarkup
 130                 });
 131                 // call the superclass's initComponent implementation
 132                 App.BookDetail.superclass.initComponent.call(this);
 133         },
 134         // add a method which updates the details
 135         updateDetail: function(data) {
 136                 this.tpl.overwrite(this.body, data);
 137         }
 138 });
 139 // register the App.BookDetail class with an xtype of bookdetail
 140 Ext.reg('bookdetail', App.BookDetail);
 141
 142
 143 /**
 144  * App.BookMasterDetail
 145  * @extends Ext.Panel
 146  *
 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.
 151  *
 152  */
 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
 158                 Ext.applyIf(this, {
 159                         frame: true,
 160                         title: 'Book List',
 161                         width: 540,
 162                         height: 400,
 163                         layout: 'border',
 164                         items: [{
 165                                 xtype: 'bookgrid',
 166                                 itemId: 'gridPanel',
 167                                 region: 'north',
 168                                 height: 210,
 169                                 split: true
 170                         },{
 171                                 xtype: 'bookdetail',
 172                                 itemId: 'detailPanel',
 173                                 region: 'center'
 174                         }]
 175                 })
 176                 // call the superclass's initComponent implementation
 177                 App.BookMasterDetail.superclass.initComponent.call(this);
 178         },
 179         // override initEvents
 180         initEvents: function() {
 181                 // call the superclass's initEvents implementation
 182                 App.BookMasterDetail.superclass.initEvents.call(this);
 183
 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);
 190         },
 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);
 200         }
 201 });
 202 // register an xtype with this class
 203 Ext.reg('bookmasterdetail', App.BookMasterDetail);
 204
 205
 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'
 215         });
 216         // We can retrieve a reference to the data store
 217         // via the StoreMgr by its storeId
 218         Ext.StoreMgr.get('gridBookStore').load();
 219 });