Element mask not positioned correctly for gridpanel in a tab

**rhamflett** · 9 Feb 2012 2:49 AM

REQUIRED INFORMATION

Ext version tested:

Ext 4.0.7

Browser versions tested against:

Internet Explorer 9.0.8.16421
Firefox 9.0.1 (Firebug 1.9.0)
Chrome 16.0.912.75m
Safari 5.1.2 (7534.52.7)
Opera 11.60(build 1185)

DOCTYPE tested against:

<!DOCTYPE html>

Description:

The mask text is not positioned properly on a grid tab panel when using this.getEl().mask().

Steps to reproduce the problem:

Create a tab panel
Add a grid panel.
Add a mask to the grid panel by calling
Code:
```
this.getEl().mask('Hello');
```

The result that was expected:

The text appears in the middle of the panel

The result that occurs instead:

THe text appears at the top of the panel and is partially obstructed

Test Case:

Code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Element mask bug report</title>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
    <script type="text/javascript" src="ext/ext-debug.js"></script>
    <script type="text/javascript">
        Ext.application({
            launch: function () {
                Ext.create('Ext.data.Store', {
                    storeId: 'queenStore',
                    fields: ['name', 'role'],
                    data:{'items':[
                        { 'name': 'Freddie', 'role': "singer" },
                        { 'name': 'Brian', 'role': "guitarist" },
                        { 'name': 'John', 'role': "bassist" },
                        { 'name': 'Roger', 'role': "drummer" }
                    ]},
                    proxy: {
                        type: 'memory',
                        reader: {
                            type: 'json',
                            root: 'items'
                        }
                    }
                });
                Ext.create('Ext.container.Viewport', {
                    items: [{
                        xtype: 'tabpanel',
                        activeTab: 0,
                        tbar: [{
                            xtype: 'button',
                            text: 'Add tab',
                            handler: function () {
                                var tp = Ext.ComponentQuery.query('tabpanel')[0];
                                tp.add({
                                    xtype: 'panel',
                                    title: 'A tab',
                                    closable: true,
                                    padding: 10,
                                    html: '<p>Here is<p><p>some content<p><p>for the tab.<p>',
                                    listeners: {
                                        afterrender: function () {
                                            this.getEl().mask('This is a mask');
                                        }
                                    }
                                });
                            }
                        }, {
                            xtype: 'button',
                            text: 'Add grid tab',
                            handler: function () {
                                var tp = Ext.ComponentQuery.query('tabpanel')[0];
                                tp.add({
                                    xtype: 'gridpanel',
                                    title: 'A grid tab',
                                    closable: true,
                                    store: Ext.data.StoreManager.lookup('queenStore'),
                                    columns: [{
                                        header: 'Name',
                                        dataIndex: 'name'
                                    }, {
                                        header: 'Role',
                                        dataIndex: 'role'
                                    }],
                                    listeners: {
                                        afterrender: function () {
                                            this.getEl().mask('This is a mask');
                                        }
                                    }
                                });
                            }
                        }]
                    }]
                });
            }
        });
    </script>
</head>
<body></body>
</html>

HELPFUL INFORMATION

Screenshot or Video:

panel-ok.png (attached) shows expected behaviour with a normal panel
grid-bad.png (attached) shows incorrect behaviour with a grid panel

Debugging already done:

none

Possible fix:

not provided

Additional CSS used:

only default ext-all.css

Operating System:
Windows 7 x64 Professional

**evant** · 9 Feb 2012 11:45 AM

There's a few problems with your test case.

1) It's better to wait til afterlayout, as opposed to afterrender to make sure the component has had a chance to layout correctly.

2) You're masking the underlying element, as opposed to the component, so it can't react correctly to various component events.

You'd be better off doing something like this (tested with B2):

Code:

Ext.application({
    launch: function() {
        Ext.create('Ext.data.Store', {
            storeId: 'queenStore',
            fields: ['name', 'role'],
            data: {
                'items': [{
                    'name': 'Freddie',
                    'role': "singer"
                }, {
                    'name': 'Brian',
                    'role': "guitarist"
                }, {
                    'name': 'John',
                    'role': "bassist"
                }, {
                    'name': 'Roger',
                    'role': "drummer"
                }]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'items'
                }
            }
        });
        Ext.create('Ext.container.Viewport', {
            items: [{
                xtype: 'tabpanel',
                activeTab: 0,
                tbar: [{
                    xtype: 'button',
                    text: 'Add tab',
                    handler: function() {
                        var tp = Ext.ComponentQuery.query('tabpanel')[0];
                        tp.add({
                            xtype: 'panel',
                            title: 'A tab',
                            closable: true,
                            padding: 10,
                            html: '<p>Here is<p><p>some content<p><p>for the tab.<p>',
                            listeners: {
                                single: true,
                                afterlayout: function() {
                                    this.setLoading('This is a mask');
                                }
                            }
                        });
                    }
                }, {
                    xtype: 'button',
                    text: 'Add grid tab',
                    handler: function() {
                        var tp = Ext.ComponentQuery.query('tabpanel')[0];
                        tp.add({
                            xtype: 'gridpanel',
                            title: 'A grid tab',
                            closable: true,
                            store: Ext.data.StoreManager.lookup('queenStore'),
                            columns: [{
                                header: 'Name',
                                dataIndex: 'name'
                            }, {
                                header: 'Role',
                                dataIndex: 'role'
                            }],
                            listeners: {
                                single: true,
                                afterlayout: function() {
                                    this.setLoading('This is a mask');
                                }
                            }
                        });
                    }
                }]
            }]
        });
    }
});

**rhamflett** · 10 Feb 2012 3:30 AM

I'd been having some trouble with masking generally and getEl().mask() seemed to be better behaved. You're proposal still gave me some issues under 4.0.7, but I've just tried it against B2 and it seems much better. I'll look at converting over to the beta, given that that version reportedly fixes a bunch of issues with masking visibility.

Thanks,
Rob

Element mask not positioned correctly for gridpanel in a tab

Thread Tools

Search Thread

Display

Element mask not positioned correctly for gridpanel in a tab

Element mask not positioned correctly for gridpanel in a tab

Tags for this Thread