Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Ext JS Premium Member
    Join Date
    Oct 2010
    Posts
    81
    Vote Rating
    1
    rhamflett is on a distinguished road

      0  

    Default Element mask not positioned correctly for gridpanel in a tab

    Element mask not positioned correctly for gridpanel in a tab


    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
    Attached Images

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,046
    Vote Rating
    657
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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');
                                    }
                                }
                            });
                        }
                    }]
                }]
            });
        }
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext JS Premium Member
    Join Date
    Oct 2010
    Posts
    81
    Vote Rating
    1
    rhamflett is on a distinguished road

      0  

    Default


    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

Thread Participants: 1

Tags for this Thread