StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The problem is not the use of <code>.defer()</code>, it's that you're doing it at the wrong level. The tight loop over the records is what's causing the freeze, and you aren't actually offloading those UI updates to another thread, you're simply delaying execution of the loop. When the loop kicks off after 50 milliseconds, it's still a tight loop that takes a while to execute.</p> <p>This is a quick fix that, while not optimal, is probably closer to what you want:</p> <pre><code> this.grid.getStore().each(function(rec) { rec.set.defer(1, rec, [this.dataIndex, newValue]); }, this); column.renderHeaderCheck(); this.grid.getView().updateHeaders(); </code></pre> <p>A couple of notes. If you are using defer to simply execute code on another thread (and not truly because you need a specific delay) just use 1 ms. No need to wait longer for no reason. </p> <p>Secondly, beware using defer like this -- it may work for this case, but this is not a general best practice. When you start deferring stuff (especially in a loop like this), it can potentially cause issues if other code executes during the middle of your loop that might also affect your underlying store. Ideally, you'd be able to find a more suitable solution like deferring only the grid's UI update, but I suspect doing so might require an override or two (not sure off the top of my head). So if this solves it for you, great -- but don't say I didn't warn you if some other weird bug pops up later ;)</p> <p>BTW, if you are scrolled down in the grid, there will still be a noticeable delay to the user since the loop still executes top to bottom. You could get fancy and update the visible records first before moving on to the rest of the data set -- depends on how much effort you want to put into it.</p> <p><strong>EDIT</strong>: OK, after putting a little more thought into this, all you need to do to avoid UI updates is tell the store not to fire its update events during the loop, then manually refresh the grid after all data updates are done. With this approach you shouldn't even need a spinner in the header, and you avoid all the potential issues with <code>defer</code>. Try this:</p> <pre><code>internalSetAllColumn: function(column, newValue) { var store = this.grid.getStore(), gridView = this.grid.getView(); column.masterValue = newValue; store.suspendEvents(); store.each(function(rec) { rec.set(this.dataIndex, newValue); }, this); store.resumeEvents(); column.renderHeaderCheck(); gridView.refresh(); } </code></pre>

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