examples/grid/binding-with-classes.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 // setup an App namespace\r
  10 // This is done to prevent collisions in the global namespace\r
  11 Ext.ns('App');\r
  12 \r
  13 /**\r
  14  * App.BookStore\r
  15  * @extends Ext.data.Store\r
  16  * @cfg {String} url This will be a url of a location to load the BookStore\r
  17  * This is a specialized Store which maintains books.\r
  18  * It already knows about Amazon's XML definition and will expose the following \r
  19  * Record defintion:\r
  20  *  - Author\r
  21  *  - Manufacturer\r
  22  *  - ProductGroup\r
  23  *  - DetailPageURL\r
  24  */\r
  25 App.BookStore = function(config) {\r
  26         var config = config || {};\r
  27         Ext.applyIf(config, {\r
  28                 reader: new Ext.data.XmlReader({\r
  29            // records will have an "Item" tag\r
  30            record: 'Item',\r
  31            id: 'ASIN',\r
  32            totalRecords: '@total'\r
  33        }, [\r
  34            // set up the fields mapping into the xml doc\r
  35            // The first needs mapping, the others are very basic\r
  36            {name: 'Author', mapping: 'ItemAttributes > Author'},\r
  37            'Title',\r
  38                    'Manufacturer',\r
  39                    'ProductGroup',\r
  40                    // Detail URL is not part of the column model of the grid\r
  41                    'DetailPageURL'\r
  42        ])\r
  43         });\r
  44         // call the superclass's constructor \r
  45         App.BookStore.superclass.constructor.call(this, config);\r
  46 };\r
  47 Ext.extend(App.BookStore, Ext.data.Store);\r
  48 \r
  49 \r
  50 \r
  51 /**\r
  52  * App.BookGrid\r
  53  * @extends Ext.grid.GridPanel\r
  54  * This is a custom grid which will display book information. It is tied to \r
  55  * a specific record definition by the dataIndex properties. \r
  56  * \r
  57  * It follows a very custom pattern used only when extending Ext.Components\r
  58  * in which you can omit the constructor.\r
  59  * \r
  60  * It also registers the class with the Component Manager with an xtype of\r
  61  * bookgrid. This allows the application to take care of the lazy-instatiation\r
  62  * facilities provided in Ext 2.0's Component Model.\r
  63  */\r
  64 App.BookGrid = Ext.extend(Ext.grid.GridPanel, {\r
  65         // override \r
  66         initComponent : function() {\r
  67                 Ext.apply(this, {\r
  68                         // Pass in a column model definition\r
  69                         // Note that the DetailPageURL was defined in the record definition but is not used\r
  70                         // here. That is okay.\r
  71                 columns: [\r
  72                     {header: "Author", width: 120, dataIndex: 'Author', sortable: true},\r
  73                     {header: "Title", dataIndex: 'Title', sortable: true},\r
  74                     {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},\r
  75                     {header: "Product Group", dataIndex: 'ProductGroup', sortable: true}\r
  76                 ],\r
  77                         sm: new Ext.grid.RowSelectionModel({singleSelect: true}),\r
  78                         // Note the use of a storeId, this will register thisStore\r
  79                         // with the StoreMgr and allow us to retrieve it very easily.\r
  80                         store: new App.BookStore({\r
  81                                 storeId: 'gridBookStore',\r
  82                                 url: 'sheldon.xml'\r
  83                         }),\r
  84                         // force the grid to fit the space which is available\r
  85                         viewConfig: {\r
  86                                 forceFit: true\r
  87                         }\r
  88                 });\r
  89                 // finally call the superclasses implementation\r
  90                 App.BookGrid.superclass.initComponent.call(this);               \r
  91         }\r
  92 });\r
  93 // This will associate an string representation of a class\r
  94 // (called an xtype) with the Component Manager\r
  95 // It allows you to support lazy instantiation of your components\r
  96 Ext.reg('bookgrid', App.BookGrid);\r
  97 \r
  98 \r
  99 /**\r
 100  * App.BookDetail\r
 101  * @extends Ext.Panel\r
 102  * This is a specialized Panel which is used to show information about\r
 103  * a book. \r
 104  * \r
 105  * This demonstrates adding 2 custom properties (tplMarkup and \r
 106  * startingMarkup) to the class. It also overrides the initComponent\r
 107  * method and adds a new method called updateDetail.\r
 108  * \r
 109  * The class will be registered with an xtype of 'bookdetail'\r
 110  */\r
 111 App.BookDetail = Ext.extend(Ext.Panel, {\r
 112         // add tplMarkup as a new property\r
 113         tplMarkup: [\r
 114                 'Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>',\r
 115                 'Author: {Author}<br/>',\r
 116                 'Manufacturer: {Manufacturer}<br/>',\r
 117                 'Product Group: {ProductGroup}<br/>'\r
 118         ],\r
 119         // startingMarup as a new property\r
 120         startingMarkup: 'Please select a book to see additional details',\r
 121         // override initComponent to create and compile the template\r
 122         // apply styles to the body of the panel and initialize\r
 123         // html to startingMarkup\r
 124         initComponent: function() {\r
 125                 this.tpl = new Ext.Template(this.tplMarkup);\r
 126                 Ext.apply(this, {\r
 127                         bodyStyle: {\r
 128                                 background: '#ffffff',\r
 129                                 padding: '7px'\r
 130                         },\r
 131                         html: this.startingMarkup\r
 132                 });\r
 133                 // call the superclass's initComponent implementation\r
 134                 App.BookDetail.superclass.initComponent.call(this);\r
 135         },\r
 136         // add a method which updates the details\r
 137         updateDetail: function(data) {\r
 138                 this.tpl.overwrite(this.body, data);            \r
 139         }\r
 140 });\r
 141 // register the App.BookDetail class with an xtype of bookdetail\r
 142 Ext.reg('bookdetail', App.BookDetail);\r
 143 \r
 144 \r
 145 /**\r
 146  * App.BookMasterDetail\r
 147  * @extends Ext.Panel\r
 148  * \r
 149  * This is a specialized panel which is composed of both a bookgrid\r
 150  * and a bookdetail panel. It provides the glue between the two \r
 151  * components to allow them to communicate. You could consider this\r
 152  * the actual application.\r
 153  * \r
 154  */\r
 155 App.BookMasterDetail = Ext.extend(Ext.Panel, {\r
 156         // override initComponent\r
 157         initComponent: function() {\r
 158                 // used applyIf rather than apply so user could\r
 159                 // override the defaults\r
 160                 Ext.applyIf(this, {\r
 161                         frame: true,\r
 162                         title: 'Book List',\r
 163                         width: 540,\r
 164                         height: 400,\r
 165                         layout: 'border',\r
 166                         items: [{\r
 167                                 xtype: 'bookgrid',\r
 168                                 itemId: 'gridPanel',\r
 169                                 region: 'north',\r
 170                                 height: 210,\r
 171                                 split: true\r
 172                         },{\r
 173                                 xtype: 'bookdetail',\r
 174                                 itemId: 'detailPanel',\r
 175                                 region: 'center'\r
 176                         }]                      \r
 177                 })\r
 178                 // call the superclass's initComponent implementation           \r
 179                 App.BookMasterDetail.superclass.initComponent.call(this);\r
 180         },\r
 181         // override initEvents\r
 182         initEvents: function() {\r
 183                 // call the superclass's initEvents implementation\r
 184                 App.BookMasterDetail.superclass.initEvents.call(this);\r
 185                 \r
 186                 // now add application specific events\r
 187                 // notice we use the selectionmodel's rowselect event rather\r
 188                 // than a click event from the grid to provide key navigation\r
 189                 // as well as mouse navigation\r
 190                 var bookGridSm = this.getComponent('gridPanel').getSelectionModel();            \r
 191                 bookGridSm.on('rowselect', this.onRowSelect, this);             \r
 192         },\r
 193         // add a method called onRowSelect\r
 194         // This matches the method signature as defined by the 'rowselect'\r
 195         // event defined in Ext.grid.RowSelectionModel\r
 196         onRowSelect: function(sm, rowIdx, r) {\r
 197                 // getComponent will retrieve itemId's or id's. Note that itemId's \r
 198                 // are scoped locally to this instance of a component to avoid\r
 199                 // conflicts with the ComponentMgr\r
 200                 var detailPanel = this.getComponent('detailPanel');\r
 201                 detailPanel.updateDetail(r.data);\r
 202         }\r
 203 });\r
 204 // register an xtype with this class\r
 205 Ext.reg('bookmasterdetail', App.BookMasterDetail);\r
 206 \r
 207 \r
 208 // Finally now that we've defined all of our classes we can instantiate\r
 209 // an instance of the app and renderTo an existing div called 'binding-example'\r
 210 // Note now that classes have encapsulated this behavior we can easily create\r
 211 // an instance of this app to be used in many different contexts, you could \r
 212 // easily place this application in an Ext.Window for example\r
 213 Ext.onReady(function() {\r
 214         // create an instance of the app\r
 215         var bookApp = new App.BookMasterDetail({\r
 216                 renderTo: 'binding-example'\r
 217         });\r
 218         // We can retrieve a reference to the data store\r
 219         // via the StoreMgr by its storeId\r
 220         Ext.StoreMgr.get('gridBookStore').load();\r
 221 });