StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Masking successfully prevents double tapping problem.</p> <p>In my code I'm using two functions for mask/unmask navigation container:</p> <pre><code>/** * Mask container with rolling wheel. Usually need if Ajax-request is sent to the server and app waiting for response * Best practice is masking the current navigator container, to prevent blocking whole app. Method warns if no container * is defined. In some cases warning could be suppress with parameter * * @param container * @param {boolean} [suppressWarning] */ startLoading: function(container, suppressWarning) { var loadingComponent = container; if (!loadingComponent) { // <debug> if (!suppressWarning) { console.warn('Please define navigator container for non-blocking operation, or define suppressWarning parameter'); } // </debug> loadingComponent = Ext.Viewport; } // var lastMaskedContainer = container; this.lastMaskedContainer = container; loadingComponent.setMasked({ xtype: 'loadmask', message: 'Loading...' }); /* Ext.defer(function() { lastMaskedContainer.setMasked(false); }, Pipedrive.app.maskingTimeout * 1000) */ }, /** * * @param {Ext.Container} container * @param {boolean} [suppressWarning] */ stopLoading: function(container, suppressWarning) { var loadingComponent = container; if (!loadingComponent) { // <debug> if (!suppressWarning) { console.warn('Please define either navigator container for non-blocking operation, or define suppressWarning parameter'); } // </debug> loadingComponent = Ext.Viewport; } var alreadyMasked = loadingComponent.getMasked(); var lastMaskedContainer = this.lastMaskedContainer; if (!alreadyMasked && !suppressWarning) { // <debug> if (lastMaskedContainer != container) { console.warn('Found Start/Stop Loading inconsistency. Please revise code' + (container ? '. Container: ' + container.getId() : 'Ext.Viewport') + (lastMaskedContainer ? ', last masked container: ' + lastMaskedContainer.getId() : '') ); } // </debug> loadingComponent = Ext.Viewport; } loadingComponent.setMasked(false); } </code></pre> <p>than in the tap handler:</p> <pre><code>onDealDetailsTap: function(ct) { console.log('onDealDetailsTap', ct); var form = ct.getReferenceForm(), navigatorContainer = this.getNavigatorContainer(form), model = form.getRecord(); UiHelper.startLoading(navigatorContainer); Ext.Viewport.fireEvent('detailfields', { title: model.get('title'), id: model.get('id'), store: 'DealFields', navigatorContainer: navigatorContainer }) }, </code></pre> <p>to cleanup the loading mask:</p> <pre><code>control : { activitiesContainer: { push: 'onPushActivitiesContainer' }, onPushActivitiesContainer: function(ct) { //console.log('onPushActivitiesContainer', ct); UiHelper.stopLoading(ct); }, </code></pre> <p>especially it is cool for waiting for long-timed ajax requests....</p> <p>Cheers, Oleg</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload