Ext.dataview.DataView creates multiple loadmasks

[robboerman]

Hi,

Say we have a List using a store that remotely loads a lot of records. If I call load on the store and then call load again before the first load has completed the List is never unmasked. The reason for this is that the List creates a new LoadMask instance in onBeforeLoad. When the store's load is called again, the List's onBeforeLoad again creates a new LoadMask. When the store finishes loading the List's mask is removed by calling setMasked(false). This however only removes the last created mask.

This can be fixed by checking if a mask already exists in onBeforeLoad

Ext.override(Ext.dataview.DataView,{
			onBeforeLoad: function() {
		        var scrollable = this.getScrollable();
		        if (scrollable) {
		            scrollable.getScroller().stopAnimation();
		        }

		        var loadingText = this.getLoadingText();
		        if (loadingText && !this.getMasked()) {
		            this.setMasked({
		                xtype: 'loadmask',
		                message: loadingText
		            });

		            //disable scorlling while it is masked
		            if (scrollable) {
		                scrollable.getScroller().setDisabled(true);
		            }
		        }

		        this.hideEmptyText();
		    }
		});

[mitchellsimoens]

Thanks for the report. Probably doesn't happen too often but could see it happening.

[robboerman]

Well, in the app we are building at the moment we are filtering a remote store containing 32k records using a realtime searchbox, every time a char is typed the filter is adjusted and a new load of the store is triggered. When typing fairly fast this happens very often.

[TommyMaintz]

The best way to fix this is to make sure a container can never have two masks. The bug is that in applyMasked in Container we expect the currentMask to be passed as the second argument, which isnt the case for config apply methods (only for the update methods).

The following override will fix your case and all other double mask cases

Ext.override('Ext.Container.MaskFix', {
    override: 'Ext.Container',

    applyMasked: function(masked) {
        var isVisible = true,
            currentMask;

        if (masked === false) {
            masked = true;
            isVisible = false;
        }

        currentMask = Ext.factory(masked, Ext.Mask, this.getMasked());

        if (currentMask) {
            this.add(currentMask);
            currentMask.setHidden(!isVisible);
        }

        return currentMask;
    }
});

Thanks for your report.