PreviewPlugin.html 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-ux-PreviewPlugin'>/**
  19. </span> * @class Ext.ux.PreviewPlugin
  20. * @extends Ext.AbstractPlugin
  21. *
  22. * The Preview enables you to show a configurable preview of a record.
  23. *
  24. * This plugin assumes that it has control over the features used for this
  25. * particular grid section and may conflict with other plugins.
  26. *
  27. * @alias plugin.preview
  28. * @ptype preview
  29. */
  30. Ext.define('Ext.ux.PreviewPlugin', {
  31. extend: 'Ext.AbstractPlugin',
  32. alias: 'plugin.preview',
  33. requires: ['Ext.grid.feature.RowBody', 'Ext.grid.feature.RowWrap'],
  34. // private, css class to use to hide the body
  35. hideBodyCls: 'x-grid-row-body-hidden',
  36. <span id='Ext-ux-PreviewPlugin-cfg-bodyField'> /**
  37. </span> * @cfg {String} bodyField
  38. * Field to display in the preview. Must be a field within the Model definition
  39. * that the store is using.
  40. */
  41. bodyField: '',
  42. <span id='Ext-ux-PreviewPlugin-cfg-previewExpanded'> /**
  43. </span> * @cfg {Boolean} previewExpanded
  44. */
  45. previewExpanded: true,
  46. constructor: function(config) {
  47. this.callParent(arguments);
  48. var bodyField = this.bodyField,
  49. hideBodyCls = this.hideBodyCls,
  50. section = this.getCmp(),
  51. features = [{
  52. ftype: 'rowbody',
  53. getAdditionalData: function(data, idx, record, orig, view) {
  54. var o = Ext.grid.feature.RowBody.prototype.getAdditionalData.apply(this, arguments);
  55. Ext.apply(o, {
  56. rowBody: data[bodyField],
  57. rowBodyCls: section.previewExpanded ? '' : hideBodyCls
  58. });
  59. return o;
  60. }
  61. },{
  62. ftype: 'rowwrap'
  63. }];
  64. section.previewExpanded = this.previewExpanded;
  65. if (!section.features) {
  66. section.features = [];
  67. }
  68. section.features = features.concat(section.features);
  69. },
  70. <span id='Ext-ux-PreviewPlugin-method-toggleExpanded'> /**
  71. </span> * Toggle between the preview being expanded/hidden
  72. * @param {Boolean} expanded Pass true to expand the record and false to not show the preview.
  73. */
  74. toggleExpanded: function(expanded) {
  75. var view = this.getCmp();
  76. this.previewExpanded = view.previewExpanded = expanded;
  77. view.refresh();
  78. }
  79. });</pre>
  80. </body>
  81. </html>