REQUIRED INFORMATION


Ext version tested:
  • Ext 4.0.6

Browser versions tested against:
  • Internet Explorer 9
  • Firefox 3.6.20
  • Google Chrome 13

Description:
  • A modal dialog or even a modal window are just for the mouse modal, but not for key events.

Steps to reproduce the problem:
  • Load the example below.
  • Click on 'Show confirm dialog'.
  • Press the TAB key several times until you reach again the username field behind the modal (!) dialog.

The result that was expected:
  • N/A
  • The modal dialog appears.
  • It is not (!) possible to reach any other component than the components within the dialog.

The result that occurs instead:
  • N/A
  • The modal dialog appears.
  • It its possible to reach every component, also the components outside of the dialog.

Test Case:

HTML Code:
<html>
    <head>
        <title>Bug</title>
        <link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" />
        <script type="text/javascript" src="ExtJS/ext-all.js"></script>
        <script type="text/javascript" src="ExtJS/locale/ext-lang-de.js"></script>
        <script type="text/javascript">
            Ext.onReady(function ()
            {
                Ext.QuickTips.init();
                new Ext.container.Viewport(
                {
                    layout: 'border',
                    renderTo: Ext.getBody(),
                    id: 'Viewport',
                    items:
                    [
                        new Ext.panel.Panel(
                        {
                            title: "Testpanel",
                            region: 'center',
                            items:
                            [
                                new Ext.form.field.Text(
                                {
                                    id: 'Username',
                                    name: 'Username',
                                    fieldLabel: 'Your username',
                                    allowBlank: false,
                                    minLength: 3,
                                    maxLength: 20,
                                    margin: 6
                                })

                                ,

                                new Ext.button.Button(
                                {
                                    text: 'Show confirm dialog...',
                                    handler: function ()
                                    {
                                        Ext.Msg.confirm("My titel", "My text...");
                                    }
                                })
                            ]
                        })
                    ]
                });
            });
        </script>
    </head>
    <body>
    </body>
</html>


HELPFUL INFORMATION


Screenshot or Video:
  • N/A

See this URL for live test case: N/A


Debugging already done:
  • N/A

Possible fix:
  • not provided

Additional CSS used:
  • only default ext-all.css

Operating System:
  • Windows 7 Professional, English, 64 Bit