Stateful.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384
  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-state-Stateful'>/**
  19. </span> * @class Ext.state.Stateful
  20. * A mixin for being able to save the state of an object to an underlying
  21. * {@link Ext.state.Provider}.
  22. */
  23. Ext.define('Ext.state.Stateful', {
  24. /* Begin Definitions */
  25. mixins: {
  26. observable: 'Ext.util.Observable'
  27. },
  28. requires: ['Ext.state.Manager'],
  29. /* End Definitions */
  30. <span id='Ext-state-Stateful-cfg-stateful'> /**
  31. </span> * @cfg {Boolean} stateful
  32. * A flag which causes the object to attempt to restore the state of
  33. * internal properties from a saved state on startup. The object must have
  34. * a {@link #stateId} for state to be managed.
  35. *
  36. * Auto-generated ids are not guaranteed to be stable across page loads and
  37. * cannot be relied upon to save and restore the same state for a object.&lt;p&gt;
  38. *
  39. * For state saving to work, the state manager's provider must have been
  40. * set to an implementation of {@link Ext.state.Provider} which overrides the
  41. * {@link Ext.state.Provider#set set} and {@link Ext.state.Provider#get get}
  42. * methods to save and recall name/value pairs. A built-in implementation,
  43. * {@link Ext.state.CookieProvider} is available.
  44. *
  45. * To set the state provider for the current page:
  46. *
  47. * Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
  48. * expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
  49. * }));
  50. *
  51. * A stateful object attempts to save state when one of the events
  52. * listed in the {@link #stateEvents} configuration fires.
  53. *
  54. * To save state, a stateful object first serializes its state by
  55. * calling *{@link #getState}*.
  56. *
  57. * The Component base class implements {@link #getState} to save its width and height within the state
  58. * only if they were initially configured, and have changed from the configured value.
  59. *
  60. * The Panel class saves its collapsed state in addition to that.
  61. *
  62. * The Grid class saves its column state in addition to its superclass state.
  63. *
  64. * If there is more application state to be save, the developer must provide an implementation which
  65. * first calls the superclass method to inherit the above behaviour, and then injects new properties
  66. * into the returned object.
  67. *
  68. * The value yielded by getState is passed to {@link Ext.state.Manager#set}
  69. * which uses the configured {@link Ext.state.Provider} to save the object
  70. * keyed by the {@link #stateId}.
  71. *
  72. * During construction, a stateful object attempts to *restore* its state by calling
  73. * {@link Ext.state.Manager#get} passing the {@link #stateId}
  74. *
  75. * The resulting object is passed to {@link #applyState}*. The default implementation of
  76. * {@link #applyState} simply copies properties into the object, but a developer may
  77. * override this to support restoration of more complex application state.
  78. *
  79. * You can perform extra processing on state save and restore by attaching
  80. * handlers to the {@link #beforestaterestore}, {@link #staterestore},
  81. * {@link #beforestatesave} and {@link #statesave} events.
  82. */
  83. stateful: false,
  84. <span id='Ext-state-Stateful-cfg-stateId'> /**
  85. </span> * @cfg {String} stateId
  86. * The unique id for this object to use for state management purposes.
  87. * &lt;p&gt;See {@link #stateful} for an explanation of saving and restoring state.&lt;/p&gt;
  88. */
  89. <span id='Ext-state-Stateful-cfg-stateEvents'> /**
  90. </span> * @cfg {String[]} stateEvents
  91. * &lt;p&gt;An array of events that, when fired, should trigger this object to
  92. * save its state. Defaults to none. &lt;code&gt;stateEvents&lt;/code&gt; may be any type
  93. * of event supported by this object, including browser or custom events
  94. * (e.g., &lt;tt&gt;['click', 'customerchange']&lt;/tt&gt;).&lt;/p&gt;
  95. * &lt;p&gt;See &lt;code&gt;{@link #stateful}&lt;/code&gt; for an explanation of saving and
  96. * restoring object state.&lt;/p&gt;
  97. */
  98. <span id='Ext-state-Stateful-cfg-saveDelay'> /**
  99. </span> * @cfg {Number} saveDelay
  100. * A buffer to be applied if many state events are fired within a short period.
  101. */
  102. saveDelay: 100,
  103. constructor: function(config) {
  104. var me = this;
  105. config = config || {};
  106. if (config.stateful !== undefined) {
  107. me.stateful = config.stateful;
  108. }
  109. if (config.saveDelay !== undefined) {
  110. me.saveDelay = config.saveDelay;
  111. }
  112. me.stateId = me.stateId || config.stateId;
  113. if (!me.stateEvents) {
  114. me.stateEvents = [];
  115. }
  116. if (config.stateEvents) {
  117. me.stateEvents.concat(config.stateEvents);
  118. }
  119. this.addEvents(
  120. <span id='Ext-state-Stateful-event-beforestaterestore'> /**
  121. </span> * @event beforestaterestore
  122. * Fires before the state of the object is restored. Return false from an event handler to stop the restore.
  123. * @param {Ext.state.Stateful} this
  124. * @param {Object} state The hash of state values returned from the StateProvider. If this
  125. * event is not vetoed, then the state object is passed to &lt;b&gt;&lt;tt&gt;applyState&lt;/tt&gt;&lt;/b&gt;. By default,
  126. * that simply copies property values into this object. The method maybe overriden to
  127. * provide custom state restoration.
  128. */
  129. 'beforestaterestore',
  130. <span id='Ext-state-Stateful-event-staterestore'> /**
  131. </span> * @event staterestore
  132. * Fires after the state of the object is restored.
  133. * @param {Ext.state.Stateful} this
  134. * @param {Object} state The hash of state values returned from the StateProvider. This is passed
  135. * to &lt;b&gt;&lt;tt&gt;applyState&lt;/tt&gt;&lt;/b&gt;. By default, that simply copies property values into this
  136. * object. The method maybe overriden to provide custom state restoration.
  137. */
  138. 'staterestore',
  139. <span id='Ext-state-Stateful-event-beforestatesave'> /**
  140. </span> * @event beforestatesave
  141. * Fires before the state of the object is saved to the configured state provider. Return false to stop the save.
  142. * @param {Ext.state.Stateful} this
  143. * @param {Object} state The hash of state values. This is determined by calling
  144. * &lt;b&gt;&lt;tt&gt;getState()&lt;/tt&gt;&lt;/b&gt; on the object. This method must be provided by the
  145. * developer to return whetever representation of state is required, by default, Ext.state.Stateful
  146. * has a null implementation.
  147. */
  148. 'beforestatesave',
  149. <span id='Ext-state-Stateful-event-statesave'> /**
  150. </span> * @event statesave
  151. * Fires after the state of the object is saved to the configured state provider.
  152. * @param {Ext.state.Stateful} this
  153. * @param {Object} state The hash of state values. This is determined by calling
  154. * &lt;b&gt;&lt;tt&gt;getState()&lt;/tt&gt;&lt;/b&gt; on the object. This method must be provided by the
  155. * developer to return whetever representation of state is required, by default, Ext.state.Stateful
  156. * has a null implementation.
  157. */
  158. 'statesave'
  159. );
  160. me.mixins.observable.constructor.call(me);
  161. if (me.stateful !== false) {
  162. me.addStateEvents(me.stateEvents);
  163. me.initState();
  164. }
  165. },
  166. <span id='Ext-state-Stateful-method-addStateEvents'> /**
  167. </span> * Add events that will trigger the state to be saved. If the first argument is an
  168. * array, each element of that array is the name of a state event. Otherwise, each
  169. * argument passed to this method is the name of a state event.
  170. *
  171. * @param {String/String[]} events The event name or an array of event names.
  172. */
  173. addStateEvents: function (events) {
  174. var me = this,
  175. i, event, stateEventsByName;
  176. if (me.stateful &amp;&amp; me.getStateId()) {
  177. if (typeof events == 'string') {
  178. events = Array.prototype.slice.call(arguments, 0);
  179. }
  180. stateEventsByName = me.stateEventsByName || (me.stateEventsByName = {});
  181. for (i = events.length; i--; ) {
  182. event = events[i];
  183. if (!stateEventsByName[event]) {
  184. stateEventsByName[event] = 1;
  185. me.on(event, me.onStateChange, me);
  186. }
  187. }
  188. }
  189. },
  190. <span id='Ext-state-Stateful-method-onStateChange'> /**
  191. </span> * This method is called when any of the {@link #stateEvents} are fired.
  192. * @private
  193. */
  194. onStateChange: function(){
  195. var me = this,
  196. delay = me.saveDelay,
  197. statics, runner;
  198. if (!me.stateful) {
  199. return;
  200. }
  201. if (delay) {
  202. if (!me.stateTask) {
  203. statics = Ext.state.Stateful;
  204. runner = statics.runner || (statics.runner = new Ext.util.TaskRunner());
  205. me.stateTask = runner.newTask({
  206. run: me.saveState,
  207. scope: me,
  208. interval: delay,
  209. repeat: 1
  210. });
  211. }
  212. me.stateTask.start();
  213. } else {
  214. me.saveState();
  215. }
  216. },
  217. <span id='Ext-state-Stateful-method-saveState'> /**
  218. </span> * Saves the state of the object to the persistence store.
  219. */
  220. saveState: function() {
  221. var me = this,
  222. id = me.stateful &amp;&amp; me.getStateId(),
  223. hasListeners = me.hasListeners,
  224. state;
  225. if (id) {
  226. state = me.getState() || {}; //pass along for custom interactions
  227. if (!hasListeners.beforestatesave || me.fireEvent('beforestatesave', me, state) !== false) {
  228. Ext.state.Manager.set(id, state);
  229. if (hasListeners.statesave) {
  230. me.fireEvent('statesave', me, state);
  231. }
  232. }
  233. }
  234. },
  235. <span id='Ext-state-Stateful-method-getState'> /**
  236. </span> * Gets the current state of the object. By default this function returns null,
  237. * it should be overridden in subclasses to implement methods for getting the state.
  238. * @return {Object} The current state
  239. */
  240. getState: function(){
  241. return null;
  242. },
  243. <span id='Ext-state-Stateful-method-applyState'> /**
  244. </span> * Applies the state to the object. This should be overridden in subclasses to do
  245. * more complex state operations. By default it applies the state properties onto
  246. * the current object.
  247. * @param {Object} state The state
  248. */
  249. applyState: function(state) {
  250. if (state) {
  251. Ext.apply(this, state);
  252. }
  253. },
  254. <span id='Ext-state-Stateful-method-getStateId'> /**
  255. </span> * Gets the state id for this object.
  256. * @return {String} The 'stateId' or the implicit 'id' specified by component configuration.
  257. * @private
  258. */
  259. getStateId: function() {
  260. var me = this;
  261. return me.stateId || (me.autoGenId ? null : me.id);
  262. },
  263. <span id='Ext-state-Stateful-method-initState'> /**
  264. </span> * Initializes the state of the object upon construction.
  265. * @private
  266. */
  267. initState: function(){
  268. var me = this,
  269. id = me.stateful &amp;&amp; me.getStateId(),
  270. hasListeners = me.hasListeners,
  271. state;
  272. if (id) {
  273. state = Ext.state.Manager.get(id);
  274. if (state) {
  275. state = Ext.apply({}, state);
  276. if (!hasListeners.beforestaterestore || me.fireEvent('beforestaterestore', me, state) !== false) {
  277. me.applyState(state);
  278. if (hasListeners.staterestore) {
  279. me.fireEvent('staterestore', me, state);
  280. }
  281. }
  282. }
  283. }
  284. },
  285. <span id='Ext-state-Stateful-method-savePropToState'> /**
  286. </span> * Conditionally saves a single property from this object to the given state object.
  287. * The idea is to only save state which has changed from the initial state so that
  288. * current software settings do not override future software settings. Only those
  289. * values that are user-changed state should be saved.
  290. *
  291. * @param {String} propName The name of the property to save.
  292. * @param {Object} state The state object in to which to save the property.
  293. * @param {String} stateName (optional) The name to use for the property in state.
  294. * @return {Boolean} True if the property was saved, false if not.
  295. */
  296. savePropToState: function (propName, state, stateName) {
  297. var me = this,
  298. value = me[propName],
  299. config = me.initialConfig;
  300. if (me.hasOwnProperty(propName)) {
  301. if (!config || config[propName] !== value) {
  302. if (state) {
  303. state[stateName || propName] = value;
  304. }
  305. return true;
  306. }
  307. }
  308. return false;
  309. },
  310. <span id='Ext-state-Stateful-method-savePropsToState'> /**
  311. </span> * Gathers additional named properties of the instance and adds their current values
  312. * to the passed state object.
  313. * @param {String/String[]} propNames The name (or array of names) of the property to save.
  314. * @param {Object} state The state object in to which to save the property values.
  315. * @return {Object} state
  316. */
  317. savePropsToState: function (propNames, state) {
  318. var me = this,
  319. i, n;
  320. if (typeof propNames == 'string') {
  321. me.savePropToState(propNames, state);
  322. } else {
  323. for (i = 0, n = propNames.length; i &lt; n; ++i) {
  324. me.savePropToState(propNames[i], state);
  325. }
  326. }
  327. return state;
  328. },
  329. <span id='Ext-state-Stateful-method-destroy'> /**
  330. </span> * Destroys this stateful object.
  331. */
  332. destroy: function(){
  333. var me = this,
  334. task = me.stateTask;
  335. if (task) {
  336. task.destroy();
  337. me.stateTask = null;
  338. }
  339. me.clearListeners();
  340. }
  341. });
  342. </pre>
  343. </body>
  344. </html>