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
    200
    Vote Rating
    7
    Qarea is on a distinguished road

      0  

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

    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 - 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


    Thanks for the report.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    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
    200
    Vote Rating
    7
    Qarea is on a distinguished road

      0  

    Default Test results

    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
    200
    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