examples/ux/PreviewPlugin.js

   1 /**
   2  * @class Ext.ux.PreviewPlugin
   3  * @extends Ext.AbstractPlugin
   4  *
   5  * The Preview enables you to show a configurable preview of a record.
   6  *
   7  * This plugin assumes that it has control over the features used for this
   8  * particular grid section and may conflict with other plugins.
   9  *
  10  * @alias plugin.preview
  11  * @ptype preview
  12  */
  13 Ext.define('Ext.ux.PreviewPlugin', {
  14     extend: 'Ext.AbstractPlugin',
  15     alias: 'plugin.preview',
  16     requires: ['Ext.grid.feature.RowBody', 'Ext.grid.feature.RowWrap'],
  17
  18     // private, css class to use to hide the body
  19     hideBodyCls: 'x-grid-row-body-hidden',
  20
  21     /**
  22      * @cfg {String} bodyField
  23      * Field to display in the preview. Must me a field within the Model definition
  24      * that the store is using.
  25      */
  26     bodyField: '',
  27
  28     /**
  29      * @cfg {Boolean} previewExpanded
  30      */
  31     previewExpanded: true,
  32
  33     constructor: function(config) {
  34         this.callParent(arguments);
  35         var bodyField   = this.bodyField,
  36             hideBodyCls = this.hideBodyCls,
  37             section     = this.getCmp(),
  38             features = [{
  39                 ftype: 'rowbody',
  40                 getAdditionalData: function(data, idx, record, orig, view) {
  41                     var o = Ext.grid.feature.RowBody.prototype.getAdditionalData.apply(this, arguments);
  42                     Ext.apply(o, {
  43                         rowBody: data[bodyField],
  44                         rowBodyCls: section.previewExpanded ? '' : hideBodyCls
  45                     });
  46                     return o;
  47                 }
  48             },{
  49                 ftype: 'rowwrap'
  50             }];
  51
  52         section.previewExpanded = this.previewExpanded;
  53         if (!section.features) {
  54             section.features = [];
  55         }
  56         section.features = features.concat(section.features);
  57     },
  58
  59     /**
  60      * Toggle between the preview being expanded/hidden
  61      * @param {Boolean} expanded Pass true to expand the record and false to not show the preview.
  62      */
  63     toggleExpanded: function(expanded) {
  64         var view = this.getCmp();
  65         this.previewExpanded = view.previewExpanded = expanded;
  66         view.refresh();
  67     }
  68 });