/javascripts/lib/src/widgets/LoadMask.js

https://bitbucket.org/ksokmesa/sina-asian · JavaScript · 129 lines · 60 code · 9 blank · 60 comment · 3 complexity · 49efafec023e21b55562ba3d9220d20b MD5 · raw file

  1. /*!
  2. * Ext JS Library 3.2.1
  3. * Copyright(c) 2006-2010 Ext JS, Inc.
  4. * licensing@extjs.com
  5. * http://www.extjs.com/license
  6. */
  7. /**
  8. * @class Ext.LoadMask
  9. * A simple utility class for generically masking elements while loading data. If the {@link #store}
  10. * config option is specified, the masking will be automatically synchronized with the store's loading
  11. * process and the mask element will be cached for reuse. For all other elements, this mask will replace the
  12. * element's Updater load indicator and will be destroyed after the initial load.
  13. * <p>Example usage:</p>
  14. *<pre><code>
  15. // Basic mask:
  16. var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
  17. myMask.show();
  18. </code></pre>
  19. * @constructor
  20. * Create a new LoadMask
  21. * @param {Mixed} el The element or DOM node, or its id
  22. * @param {Object} config The config object
  23. */
  24. Ext.LoadMask = function(el, config){
  25. this.el = Ext.get(el);
  26. Ext.apply(this, config);
  27. if(this.store){
  28. this.store.on({
  29. scope: this,
  30. beforeload: this.onBeforeLoad,
  31. load: this.onLoad,
  32. exception: this.onLoad
  33. });
  34. this.removeMask = Ext.value(this.removeMask, false);
  35. }else{
  36. var um = this.el.getUpdater();
  37. um.showLoadIndicator = false; // disable the default indicator
  38. um.on({
  39. scope: this,
  40. beforeupdate: this.onBeforeLoad,
  41. update: this.onLoad,
  42. failure: this.onLoad
  43. });
  44. this.removeMask = Ext.value(this.removeMask, true);
  45. }
  46. };
  47. Ext.LoadMask.prototype = {
  48. /**
  49. * @cfg {Ext.data.Store} store
  50. * Optional Store to which the mask is bound. The mask is displayed when a load request is issued, and
  51. * hidden on either load sucess, or load fail.
  52. */
  53. /**
  54. * @cfg {Boolean} removeMask
  55. * True to create a single-use mask that is automatically destroyed after loading (useful for page loads),
  56. * False to persist the mask element reference for multiple uses (e.g., for paged data widgets). Defaults to false.
  57. */
  58. /**
  59. * @cfg {String} msg
  60. * The text to display in a centered loading message box (defaults to 'Loading...')
  61. */
  62. msg : 'Loading...',
  63. /**
  64. * @cfg {String} msgCls
  65. * The CSS class to apply to the loading message element (defaults to "x-mask-loading")
  66. */
  67. msgCls : 'x-mask-loading',
  68. /**
  69. * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false)
  70. * @type Boolean
  71. */
  72. disabled: false,
  73. /**
  74. * Disables the mask to prevent it from being displayed
  75. */
  76. disable : function(){
  77. this.disabled = true;
  78. },
  79. /**
  80. * Enables the mask so that it can be displayed
  81. */
  82. enable : function(){
  83. this.disabled = false;
  84. },
  85. // private
  86. onLoad : function(){
  87. this.el.unmask(this.removeMask);
  88. },
  89. // private
  90. onBeforeLoad : function(){
  91. if(!this.disabled){
  92. this.el.mask(this.msg, this.msgCls);
  93. }
  94. },
  95. /**
  96. * Show this LoadMask over the configured Element.
  97. */
  98. show: function(){
  99. this.onBeforeLoad();
  100. },
  101. /**
  102. * Hide this LoadMask.
  103. */
  104. hide: function(){
  105. this.onLoad();
  106. },
  107. // private
  108. destroy : function(){
  109. if(this.store){
  110. this.store.un('beforeload', this.onBeforeLoad, this);
  111. this.store.un('load', this.onLoad, this);
  112. this.store.un('exception', this.onLoad, this);
  113. }else{
  114. var um = this.el.getUpdater();
  115. um.un('beforeupdate', this.onBeforeLoad, this);
  116. um.un('update', this.onLoad, this);
  117. um.un('failure', this.onLoad, this);
  118. }
  119. }
  120. };