loadMask does not scroll with components when parent container is scrolled

**lukerahl** · 9 Aug 2012 6:39 AM

REQUIRED INFORMATION

Ext version tested:

Ext 4.1.1

Browser versions tested against:

IE10
IE9
IE8
FF13.0.1
FF12
Chrome 21

Description:

When masking an element using mask() everything seems to work great (except IE10 where the mask does not show at all). When using setLoading(), which is used by grids and other components tied to stores, the load mask does not scroll with any parent container scrolling. Please run the test provided to see the issue.

Test Case:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>LoadMask inside scrolling container issue</title>
		<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
		<link rel="stylesheet" type="text/css" href="../shared/example.css" />
		<script type="text/javascript" src="../../ext-all.js"></script>
		<script type="text/javascript" src="LoadMaskBug.js"></script>
	</head>
	<body style="overflow:hidden;">
		<h1>Using element.mask works:</h1>
		<div id="grid-example1" style="width:800px;height:200px;overflow:auto;margin:0px 25px 25px;"></div>
		<h1>Using element.setLoading does NOT work:</h1>
		<div id="grid-example2" style="width:800px;height:200px;overflow:auto;margin:0px 25px;"></div>
	</body>
</html>

And

Code:

Ext.require([
    'Ext.grid.*',
    'Ext.data.*'
]);

Ext.define('Company', {
    extend: 'Ext.data.Model',
    fields: [
       {name: 'company'}
    ],
    idProperty: 'company'
});

var myData = [
	['3m Co'],
	['Alcoa Inc'],
	['Altria Group Inc'],
	['American Express Company'],
	['American International Group, Inc.'],
	['AT&T Inc.'],
	['Boeing Co.'],
	['Caterpillar Inc.'],
	['Citigroup, Inc.'],
	['E.I. du Pont de Nemours and Company'],
	['Exxon Mobil Corp'],
	['General Electric Company'],
	['General Motors Corporation'],
	['Hewlett-Packard Co.'],
	['Honeywell Intl Inc'],
	['Intel Corporation'],
	['International Business Machines'],
	['Johnson & Johnson'],
	['JP Morgan & Chase & Co'],
	['McDonald\'s Corporation'],
	['Merck & Co., Inc.'],
	['Microsoft Corporation'],
	['Pfizer Inc'],
	['The Coca-Cola Company'],
	['The Home Depot, Inc.'],
	['The Procter & Gamble Company'],
	['United Technologies Corporation'],
	['Verizon Communications'],
	['Wal-Mart Stores, Inc.']
];

// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
	model: 'Company',
	data: myData
});

// Define grid
Ext.define('mygrid',
{
	extend:'Ext.grid.Panel',
	store: store,
	margin:25,
	collapsible: true,
	multiSelect: true,
	columns: [
		{
			text     : 'Company',
			flex     : 1,
			sortable : false,
			dataIndex: 'company'
		}
	],
	height: 350,
	width: 600,
	viewConfig: {
		stripeRows: true,
		enableTextSelection: true
	}  
});

Ext.onReady(function(){
	Ext.create('mygrid',
	{
		title:'mask works',
		listeners:
		{
			render: function(p)
			{
				this.body.mask('Loading...','x-mask-loading');
			},
			delay: 25
		},
		renderTo:'grid-example1'
	});
	Ext.create('mygrid',
	{
		title:'setLoading does NOT work',
		listeners: 
		{
			render: function(p)
			{
				this.setLoading('Loading...', true);
			},
			delay: 25
		},
		renderTo:'grid-example2'
	});
});

HELPFUL INFORMATION

Debugging already done:

Seems to be an issue where the loadMask is added to the DOM outside of the parent container

Possible fix:

not provided

Additional CSS used:

default ext-all.css
example.css

Operating System:

Windows 8 64-bit
Windows 7 64-bit

**mitchellsimoens** · 9 Aug 2012 6:43 AM

Thanks for the report.

**lukerahl** · 10 Aug 2012 10:45 AM

The following seems to work for me with VERY limited testing:

Code:

Ext.override(Ext.Component,
{
    setLoading : function(load, targetEl) {
        var me = this,
            config;

        if (me.rendered) {
            Ext.destroy(me.loadMask);
            me.loadMask = null;

            if (load !== false && !me.collapsed) {
                if (Ext.isObject(load)) {
                    config = Ext.apply({}, load);
                } else if (Ext.isString(load)) {
                    config = {msg: load};
                } else {
                    config = {};
                }
				
                if (targetEl) 
			me.loadMask = new Ext.LoadMask(me.getTargetEl(), config);
                else
			me.loadMask = new Ext.LoadMask(me.el, config);

		me.loadMask.show();
            }
        }
        return me.loadMask;
    }
});

**lukerahl** · 13 Aug 2012 7:17 AM

The previous post does fix the setLoading function call, but it does not fix the masking of grid panels or views.

**corneadoug** · 23 Jan 2013 1:03 AM

Thank you for the fix, doesn't work perfectly for me though

I tried to make some modification but couldn't fix it:
- The x-mask-msg is sometimes not centered (usually happen when we create the component at the same time, so it may be because the setLoading should be in a afterRender function) (was working without the fix)
- With the fix, the loadMask doesn't resize with the component anymore.

maybe both issues are related

But thanks to your fix, we can move the component, or scroll around and the loadMask will follow it

loadMask does not scroll with components when parent container is scrolled

Thread Tools

Search Thread

Display

loadMask does not scroll with components when parent container is scrolled

loadMask does not scroll with components when parent container is scrolled

Possible solution...not tested much though.

Possible solution...not tested much though.

Tags for this Thread