You found a bug! We've classified it as EXTJS-7780 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2011
    Posts
    209
    Vote Rating
    7
    Qarea is on a distinguished road

      0  

    Default Focus frame over HUD. Focus frame unacceptable behavior with combobox in modal Cmp.

    REQUIRED INFORMATION


    Ext version tested:
    • Ext 4.1.1

    Browser versions tested against:
    • FF 9 (Ubuntu 12.04) firebug 1.9.2 installed
    • Chromium 20.0.1132.47 (Ubuntu 12.04)
    • IE8 (Windows 7)

    DOCTYPE tested against:
    • html

    Problem 1 - Description:
    • If part of some focused component overflowed by another component(or HUD) focus frame of FocusManager situated over this component(HUD)

    Problem 1 - Steps to reproduce the problem:
    • Run the "Sample 1" in browser
    • Scroll "Second panel" to bottom
    • "First TextArea" must be partially hidden
    • Click on "First TextArea" (blue focus frame must appear)

    Problem 1 - The result that was expected:
    • Focus frame must be partially hidden relatively to the focused component

    Problem 1 - The result that occurs instead:
    • Focus frame over the components (HUD) (See first attached picture)

    Problem 1 - Test Case (Sample 1):
    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Test extjs project</title>
    
            <link href="http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
            <script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all.js"></script>
    
            <script type="text/javascript">
            Ext.onReady(function() {
                Ext.FocusManager.enable(true);
                Ext.create('Ext.panel.Panel', {
                    renderTo: Ext.getBody(),
                    height: 554,
                    width: 690,
                    title: 'Owner panel',
    
                    items: [
                        {
                            xtype: 'panel',
                            height: 217,
                            title: 'First inner panel',
                            html: 'Some application text'
                        },
                        {
                            xtype: 'form',
                            height: 328,
                            autoScroll: true,
                            bodyPadding: 10,
                            title: 'Second inner form panel',
                            items: [
                                {
                                    xtype: 'textareafield',
                                    anchor: '100%',
                                    fieldLabel: 'First TextArea'
                                },
                                {
                                    xtype: 'textareafield',
                                    anchor: '100%',
                                    fieldLabel: 'Second TextArea'
                                },
                                {
                                    xtype: 'textareafield',
                                    anchor: '100%',
                                    fieldLabel: 'Third TextArea'
                                },
                                {
                                    xtype: 'textareafield',
                                    anchor: '100%',
                                    fieldLabel: 'Fourth TextArea'
                                },
                                {
                                    xtype: 'textareafield',
                                    anchor: '100%',
                                    fieldLabel: 'Fifth TextArea'
                                }
                            ]
                        }
                    ]
                });
            });
            </script>
        </head>
        <body>
        </body>
    </html>

    Problem 2 - Description:
    • If you choose some item in combobox by keyboard which situated in some modal component (window or menu), focus frame of FocusManager will move to another componenent (which is not a relative to this one)

    Problem 2 - Steps to reproduce the problem:
    • Run the "Sample 2" code in browser
    • Move to the "Button 2" by keyboard
    • Hit Enter on keyboard
    • Modal window will appear
    • Move to the "First combo" by keyboard
    • Choose any value
    • Hit Enter or Tab key on keyboard

    Problem 2 - The result that was expected:
    • Chosen value from "First combo" selected and this combobox focused (with blue focus frame)

    Problem 2 - The result that occurs instead:
    • When you choose the value from combobox and hit Enter key - focus frame moves to the "First panel"
    • When you choose the value from combobox and hit Tab key - focus frame moves to the "Button 1"

    Problem 2 - Test Case (Sample 2):
    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Test extjs project</title>
    
            <link href="http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
            <script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all.js"></script>
    
            <script type="text/javascript">
            Ext.onReady(function() {
                Ext.FocusManager.enable(true);
                Ext.create('Ext.container.Viewport', {
                    layout: 'fit',
                    items: [
                        {
                            xtype: 'panel',
                            title: 'First panel',
                            region: 'center',
                            bodyPadding: 10,
                            layout: 'fit',
                            tbar: [
                                {
                                    xtype: "button",
                                    text: "Button 1"
                                },
                                {
                                    xtype: "button",
                                    text: "Button 2",
                                    handler: function () {
                                        Ext.create('Ext.window.Window', {
                                            title: 'Hello',
                                            height: 200,
                                            width: 400,
                                            layout: 'fit',
                                            modal: true,
                                            items: [
                                                {
                                                    xtype: 'form',
                                                    items: [
                                                        {
                                                            xtype: 'combobox',
                                                            fieldLabel: 'First combo',
                                                            queryMode: 'local',
                                                            displayField: 'name',
                                                            valueField: 'abbr',
                                                            store: Ext.create('Ext.data.Store', {
                                                                fields: ['abbr', 'name'],
                                                                data : [
                                                                    {"abbr":"AL", "name":"Alabama"},
                                                                    {"abbr":"AK", "name":"Alaska"},
                                                                    {"abbr":"AZ", "name":"Arizona"}
                                                                ]
                                                            })
                                                        },
                                                        {
                                                            xtype: 'combobox',
                                                            fieldLabel: 'Second combo'
                                                        }
                                                    ]
                                                }
                                                
                                            ]
                                        }).show();
                                    }
                                },
                            ]
                        }
                    ]
                });
            });
            </script>
        </head>
        <body>
        </body>
    </html>

    HELPFUL INFORMATION

    Problem 2 - Think the problem in interoperation Ext.view.BoundList dataview with FocusManager.

    Screenshot or Video:
    • attached

    See this URL for live test case: http://


    Debugging already done:
    • none

    Possible fix:
    • not provided

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

    Operating System:
    • Ubuntu 12.04
    • Windows 7

    First picture for Problem 1 and last four for Problem 2
    Attached Images
    Last edited by Qarea; 16 Nov 2012 at 7:31 AM. Reason: extjs specification version

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,546
    Vote Rating
    1119
    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

    Thanks for the report.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member
    Join Date
    Nov 2011
    Posts
    209
    Vote Rating
    7
    Qarea is on a distinguished road

      0  

    Default Test results

    ExtJS version: Result
    4.1.1: Reproduced
    4.1.3: Reproduced
    4.2.0.299: Reproduced
    4.2.0.376: Reproduced

  4. #4
    Ext JS Premium Member
    Join Date
    Nov 2011
    Posts
    209
    Vote Rating
    7
    Qarea is on a distinguished road

      0  

    Default

    Sample1 reproduced with ExtJS4.2

    Sample2 is broken - cant move to button1 button2 by keyboard

Thread Participants: 1

Tags for this Thread