examples/app/nested-loading/app/view/review/List.js

   1 /**
   2  * A view which displays a list of reviews for a specified book.
   3  * @extends Ext.view.View
   4  */
   5 Ext.define('Books.view.review.List', {
   6     alias: 'widget.reviewlist',
   7     extend: 'Ext.panel.Panel',
   8
   9     requires: ['Ext.layout.container.Card'],
  10
  11     initComponent: function() {
  12         this.dataview = Ext.create('Ext.view.View', {
  13             id: 'reviews',
  14             border: false,
  15             cls: 'review-list',
  16
  17             autoScroll: true,
  18
  19             store: 'Books.store.Review',
  20             itemSelector: '.review',
  21             tpl: new Ext.XTemplate(
  22                 '<tpl for=".">',
  23                     '<div class="review {[xindex === 1 ? "first-review" : ""]}">',
  24                         '<div class="title">{title} {[this.stars(values)]}</div>',
  25                         '<div class="author">By <span>{author}</span> - {date}</div>',
  26                         '<div class="comment">{comment}</div>',
  27                     '</div>',
  28                 '</tpl>',
  29                 {
  30                     stars: function(values) {
  31                         var res = "";
  32
  33                         //print out the stars for each of the ratings
  34                         for (var i = 0; i < values.rating; i++) {
  35                             res += '<img src="./resources/images/star.' + ((Ext.isIE6) ? 'gif' : 'png') + '" />';
  36                         }
  37
  38                         //print out transparent stars for the rest (up to 5)
  39                         while (i < 5) {
  40                             res += '<img src="./resources/images/star_no.' + ((Ext.isIE6) ? 'gif' : 'png') + '" />';
  41                             i++;
  42                         }
  43
  44                         return res;
  45                     }
  46                 }
  47             )
  48         });
  49
  50         Ext.apply(this, {
  51             border: false,
  52             flex: 1,
  53             id: 'test',
  54
  55             layout: 'card',
  56
  57             dockedItems: [
  58                 Ext.create('Books.view.Header', {
  59                     html: 'Reviews'
  60                 })
  61             ],
  62
  63             items: [
  64                 this.dataview,
  65                 Ext.create('widget.panel', {
  66                     id: 'test2',
  67                     html: 'asdasdsa'
  68                 })
  69             ]
  70         });
  71
  72         this.callParent(arguments);
  73     },
  74
  75     /**
  76      * Used to bind a store to this dataview.
  77      * Delegates to bindStore and also shows this view
  78      * @param {Ext.data.Model} record The record to bind
  79      * @param {Ext.data.Store} store The reviews store used by the application
  80      */
  81     bind: function(record, store) {
  82         //put the reviews into the store and bind the store to thie dataview
  83         store.loadData(record.data.reviews || []);
  84         this.dataview.bindStore(store);
  85     }
  86 });