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
  39         section.previewExpanded = this.previewExpanded;
  40         section.features = [{
  41             ftype: 'rowbody',
  42             getAdditionalData: function(data, idx, record, orig, view) {
  43                 var o = Ext.grid.feature.RowBody.prototype.getAdditionalData.apply(this, arguments);
  44                 Ext.apply(o, {
  45                     rowBody: data[bodyField],
  46                     rowBodyCls: section.previewExpanded ? '' : hideBodyCls
  47                 });
  48                 return o;
  49             }
  50         },{
  51             ftype: 'rowwrap'
  52         }];
  53     },
  54
  55     /**
  56      * Toggle between the preview being expanded/hidden
  57      * @param {Boolean} expanded Pass true to expand the record and false to not show the preview.
  58      */
  59     toggleExpanded: function(expanded) {
  60         var view = this.getCmp();
  61         this.previewExpanded = view.previewExpanded = expanded;
  62         view.refresh();
  63     }
  64 });