You found a bug! We've classified it as TOUCH-4427 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Mar 2013
    Posts
    15
    Vote Rating
    1
    AdityaRaja is on a distinguished road

      0  

    Default Modal doesn't affect docked items

    Modal doesn't affect docked items


    I have a view where if you select a tab bar item a new panel is created on top of the current view.
    The panel has modal: true in its config so that all other components are masked out until the panel is closed. However, the docked items inside the view are not being affected i.e. they are not masked and the user can interact with them.

    How do I fix this so that even the docked items get masked?

    Code:
    Ext.Viewport.add({
        xtype  : 'toolbar',
        docked : 'top',
        items  : [
            {
                text : 'Foo'
            }
        ]
    });
    
    var panel = new Ext.Panel({
        centered : true,
        html     : 'Hi',
        width    : 200,
        height   : 200,
        modal    : true
    });
    
    Ext.Viewport.add(panel);
    panel.show();
    Last edited by mitchellsimoens; 30 Apr 2013 at 8:13 AM. Reason: add testcase

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,227
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I would expect the test case I included in your post to work but it doesn't so I have opened a bug in our bug tracker.

  3. #3
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      1  

    Default


    You need a sibling container to the modal you are creating:

    Code:
                        Ext.Viewport.add({
                            xtype: 'container',
                            layout: 'fit',
                            items: [{
                                xtype  : 'toolbar',
                                docked : 'top',
                                items  : [
                                    {
                                        text : 'Foo'
                                    }
                                ]
                            }]
                        });

    Sencha Inc

    Jamie Avins

    @jamieavins