docs/source/binding-with-classes.html

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