1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    35
    Answers
    1
    Vote Rating
    0
    TheDude55 is on a distinguished road

      0  

    Default Unanswered: Incorrect mask position inside accordion panel

    Unanswered: Incorrect mask position inside accordion panel


    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 ?

    Code:
    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';
                                    }
                                }
    
                            });
    }

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,866
    Answers
    652
    Vote Rating
    438
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Can you send screens?

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

    Scott.

  3. #3
    Sencha User
    Join Date
    Dec 2010
    Posts
    35
    Answers
    1
    Vote Rating
    0
    TheDude55 is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,866
    Answers
    652
    Vote Rating
    438
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Code:
    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.

Thread Participants: 1

Tags for this Thread