examples/app/nested-loading/app/view/book/View.js

   1 /**
   2  * The view which displays information about a speficied book
   3  * @extends Ext.panel.Panel
   4  */
   5 Ext.define('Books.view.book.View', {
   6     alias: 'widget.bookview',
   7     extend: 'Ext.panel.Panel',
   8
   9     initComponent: function() {
  10         Ext.apply(this, {
  11             id        : 'itemCt',
  12             cls       : 'item-ct',
  13             flex      : 2,
  14             border    : false,
  15             autoScroll: true,
  16
  17             layout: {
  18                 type : 'hbox',
  19                 align: 'middle',
  20                 pack : 'center'
  21             },
  22
  23             items: [
  24                 {
  25                     id    : 'imgCt',
  26                     border: false,
  27                     margin: '0 10 0 0',
  28                     width : 250,
  29                     height: 308
  30                 },
  31                 {
  32                     id    : 'contentCt',
  33                     width : 500,
  34                     border: false
  35                 }
  36             ]
  37         });
  38
  39         this.callParent(arguments);
  40     },
  41
  42     /**
  43      * Binds a record to this view
  44      */
  45     bind: function(record) {
  46         var imgCt = Ext.getCmp('imgCt'),
  47             contentCt = Ext.getCmp('contentCt');
  48
  49         var imgTpl = new Ext.XTemplate(
  50             '<img src="{image}" />'
  51         );
  52
  53         var contentTpl = new Ext.XTemplate(
  54             '<div class="name">{name} <span>${price}</span></div>',
  55             '<div class="author">By {author}</div>',
  56             '<div class="detail">{detail}</div>'
  57         );
  58
  59         imgTpl.overwrite(imgCt.el, record.data);
  60         contentTpl.overwrite(contentCt.el, record.data);
  61
  62         //update the layout of the contentTpl
  63         contentCt.setHeight('auto');
  64         this.doLayout();
  65     }
  66 });