Incorrect mask position inside accordion panel

[TheDude55]

Hi. I'm using a mask to 'prevent' access to 3 gridpanels which are in an accordion.

For each grid, on the 'render' event, I'm creating the mask. The mask works fine for the first grid (top panel which is open in the accordion), and then fine for the first time I open the 2nd and 3rd panels to view the grids, but on subsequent openings of the 2nd and 3rd panel, the mask element has been shifted down a whole lot (the 'top' value is around 300px larger, and stays like that regardless of how many times I re-open the panel).

Any ideas ?

render: function (panel) {
  var myMask = new Ext.LoadMask(panel, {
                            msg: 'Sorry, you do not have access',
                            msgCls: 'mask-permission-denied-msg',
                            autoShow: true,
                            listeners: {
                                render: function (myMask) {
                                    myMask.maskCls = 'x-mask mask-permission-denied';
                                }
                            }

                        });
}

[scottmartin]

Can you send screens?

Is the position getting lost since you are performing this in render instead of after?

Scott.

[TheDude55]

Thanks for replying Scott. I tried using afterrender too - same problem.
See the screenshots:

1st image - Mask is correct on 1st panel. (Although note 2nd panel mask message)
2nd image - Mask is correct on 2nd panel.
3rd image - Mask is correct on 1st panel.
4th image - Mask has shifted on 2nd panel.

Hope this helps you (to help me !)

[scottmartin]

We will most likely need a small working example to help out. Please use the following template and make the required changes:

Ext.create('Ext.panel.Panel', {
    title: 'Accordion Layout',
    width: 300,
    height: 300,
    defaults: {
        // applied to each contained panel
        bodyStyle: 'padding:15px'
    },
    layout: {
        // layout-specific configs go here
        type: 'accordion',
        titleCollapse: false,
        animate: true,
        activeOnTop: true
    },
    items: [{
        xtype: 'grid',
        border: false,
        columns: [{header: 'Grid:C1'}],
        store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
    },{
        xtype: 'grid',
        border: false,
        columns: [{header: 'Grid2:C1'}],
        store: Ext.create('Ext.data.ArrayStore', {})
    },{
        xtype: 'grid',
        border: false,
        columns: [{header: 'Grid3:C1'}],
        store: Ext.create('Ext.data.ArrayStore', {})
    }],
    renderTo: Ext.getBody()
});

Scott.