PDA

View Full Version : Incorrect mask position inside accordion panel



TheDude55
27 Jun 2012, 3:04 AM
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
27 Jun 2012, 11:46 AM
Can you send screens?

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

Scott.

TheDude55
28 Jun 2012, 12:49 AM
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
28 Jun 2012, 6:13 AM
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.