Results 1 to 4 of 4

Thread: Incorrect mask position inside accordion panel

  1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    35
    Answers
    1
    Vote Rating
    0
      0  

    Default 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
    9,388
    Answers
    716
    Vote Rating
    499
      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
      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 Attached Images
    • File Type: png 1.png (15.5 KB, 11 views)
    • File Type: png 2.png (14.4 KB, 9 views)
    • File Type: png 3.png (16.2 KB, 9 views)
    • File Type: png 4.png (14.1 KB, 10 views)

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,388
    Answers
    716
    Vote Rating
    499
      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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •