PDA

View Full Version : Mask issue on tree panel



thhuebner
11 Jun 2013, 5:42 AM
I'm using the following code to initialize a button that is supposed to expand the whole tree inside the
treepanel component:



{
text: 'Expand All',

tooltip: 'Expands all sub-chapters',

scope: this,

listeners: {

click: function(e, eOpts){

var me = this;

var treePanel = me.up('treepanel');

treePanel.getEl().mask('Expanding tree...');
me.disable();

treePanel.expandAll(function() {

treePanel.getEl().unmask();

me.enable();

});

}

}
}

The strange thing that is happening here is that I never get to see the mask, as expandAll() immediately fires and calls unmask, though expanding the tree still takes some seconds.

Why is expandAll firing immediately and the mask never shown?

droessner
11 Jun 2013, 5:57 AM
The DOM never gets a chance to render because all of the JavaScript code is executed synchronously.
You could delay the expandAll slightly so the DOM gets a chance to render the mask first.

Something like this:


{
text: 'Expand All',
tooltip: 'Expands all sub-chapters',
scope: this,
listeners: {
click: function(e, eOpts){
var me = this;
var treePanel = me.up('treepanel');

treePanel.getEl().mask('Expanding tree...');
me.disable();

Ext.defer(function() {
treePanel.expandAll(function() {
treePanel.getEl().unmask();
me.enable();
});
}, 10, this);
}
}
}

thhuebner
11 Jun 2013, 7:33 AM
Ok this works. So .expandAll is executed in parallel with the treePanel.getEl().mask(...) and blocking it?

droessner
11 Jun 2013, 7:41 AM
When any JavaScript is executed, no DOM rendering can occur in the browser. Since your code doesn't have any breaks between setting the mask and removing the mask, it can't render it to the screen. Adding the defer function allows the screen to render the mask before continuing with executing the rest of your JavaScript code. This doesn't have anything to do with Ext, it's just the nature of how the browser works.