有没有办法在“ resumelayouts”事件处理完成后立即调用函数？

Question

I change width for dozens gridpanel columns. I want to show a mask while it is performing.

grid.setLoading(true);
Ext.suspendLayouts();
// columns -- grid columns
columns.forEach(function (column) {
    column.setWidth(...);
}, this);
// fires 'resumelayouts' event and immediately returns.
Ext.resumeLayouts();
// performs before everything updates its layout, which takes 3-4 seconds.
grid.setLoading(false);

Answer 1

The problem is that you end up tying up the current "thread" so the browser doesn't get a chance to repaint. You could do something like this:

grid.setLoading(true);
setTimeout(function() {
    Ext.suspendLayouts();
    columns.forEach(function (column) {
        column.setWidth(...);
    }, this);
    Ext.resumeLayouts();
    grid.setLoading(false);
}, 1);

The above relinquishes control from the current "thread" and allows the repaint before it begins the layout operation.