[CLOSED] Toolbar item remains selected after click

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Toolbar item remains selected after click

    On the following example, click on any button, it remains selected.

    Note: Change the Theme to gray.

    https://examples3.ext.net/#/Toolbar/Menu/Flat_Toolbar/

    On version 2.x, everything works as expected.
    https://examples2.ext.net/#/Toolbar/Menu/Flat_Toolbar/

    Going further there is a dotted line around the button

    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
    </head>
    <body>
        <ext:ResourceManager runat="server" Theme="Gray" ScriptMode="Debug" />
        <ext:Panel runat="server">
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Button Text="Ext.Net" Icon="Information" runat="server" />
                    </Items>
                </ext:Toolbar>
            </TopBar>
        </ext:Panel>
    </body>
    </html>
    Last edited by geoffrey.mcgill; Feb 07, 2015 at 1:38 AM.
  2. #2
    That haves something to do with key navigation. After you get one "half pressed" like that, notice how it responds to arrow key strokes.

    I felt kind of "lost" on where my cursor is on the 2.5 version. Maybe that's proposital?

    It may be related to this sencha post: Impossible to disable key navigation.
    Last edited by fabricio.murta; Jan 23, 2015 at 2:01 PM.
  3. #3
    Avenger, your Impossible to disable key navigation link is broken
  4. #4
    Works for me... But further investigating, seems it is not a problem with KeyNav, but something else about classes and Focus/focusOut events. Still looking at it.

    Notice how the very first time you click the button, it works as expected. Only from the second click onwards, the outline is kept on the file. Also, if you click out, anywhere or on another window, the button loses its unwanted outline. :)
  5. #5
    When Theme is set to default, the button is deselected but the dotted line around the button remains

    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
    </head>
    <body>
        <ext:ResourceManager runat="server" Theme="Default" ScriptMode="Debug" />
        <ext:Panel runat="server">
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Button Text="Ext.Net" Icon="Information" runat="server" />
                    </Items>
                </ext:Toolbar>
            </TopBar>
        </ext:Panel>
    </body>
    </html>
    Last edited by geoffrey.mcgill; Jan 28, 2015 at 12:41 PM.
  6. #6
    Avenger, unfortunately at this time i am pretty busy finalizing migration to version 3.1, but at weekend i am gonna try to find a workaround for this issue and some others that i found.
  7. #7
    As for the workaround, you just use this override:
            Ext.define('Ext.button.Button', {
                override: 'Ext.button.Button',
                focusable: false,
            });
    And the buttons behavior will be back at how it was on Ext.NET 2.5 (actually.. ExtJS 4.x).

    On the new ExtJS version, by default any button is navigable thru keyboard, and have a visual feedback for it. I've checked ordinary buttons on Ext.NET 2.5 and they're also not selectable (dotted outline).

    I happened to find this website in my search and, it seems that could have been a reason ExtJS changed its buttons behavior to this. Not sure though, as the 'outline' css prop is still as disabled.

    I hope this helps you fix your view there! :)
    The "problem" (as it might have been proposital) is that when any button if focused now, the x-focus, x-btn-focus and other focus-related classes are bound to the button.

    Also, it should have meant to look good on the new themes, and just slipped past the default gray theme. If you look closely to the Crisp theme, it sets a blueish shadow to the selected button on the same example, which just differs on CSS effects from the gray theme.
    Last edited by fabricio.murta; Jan 23, 2015 at 4:49 PM.
  8. #8
    It's possible to remove dotted outline from button by doing the following:

    <style type="text/css">
        * {
            outline: none !important;
        }
    </style>
    Last edited by geoffrey.mcgill; Jan 28, 2015 at 12:42 PM.
  9. #9
    Or
    <style type="text/css">
        span {
            outline: 0 !important;
        }
    </style>
    Last edited by geoffrey.mcgill; Jan 28, 2015 at 12:42 PM.
  10. #10
    As for the workaround, you just use this override:
    Ext.define('Ext.button.Button', {
        override: 'Ext.button.Button',
        focusable: false,
    });
    And the buttons behavior will be back at how it was on Ext.NET 2.5 (actually.. ExtJS 4.x).

    On the new ExtJS version, by default any button is navigable thru keyboard, and have a visual feedback for it. I've checked ordinary buttons on Ext.NET 2.5 and they're also not selectable (dotted outline).

    I happened to find this website in my search and, it seems that could have been a reason ExtJS changed its buttons behavior to this. Not sure though, as the 'outline' css prop is still as disabled.

    I hope this helps you fix your view there! :)
    The "problem" (as it might have been proposital) is that when any button if focused now, the x-focus, x-btn-focus and other focus-related classes are bound to the button.

    Also, it should have meant to look good on the new themes, and just slipped past the default gray theme. If you look closely to the Crisp theme, it sets a blueish shadow to the selected button on the same example, which just differs on CSS effects from the gray theme.
    Do you have plans to fix it internally?
    Attached Thumbnails Click image for larger version. 

Name:	vcard.png 
Views:	1143 
Size:	10.8 KB 
ID:	19841  
    Last edited by RCN; Jan 29, 2015 at 12:04 PM.
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 3
    Last Post: May 14, 2013, 4:03 AM
  2. Replies: 3
    Last Post: May 06, 2013, 6:44 AM
  3. Replies: 0
    Last Post: Apr 17, 2013, 7:41 AM
  4. [CLOSED] Click on MultiSelect deselects the selected item
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 27, 2013, 5:27 PM
  5. [CLOSED] combobox column in grid and get selected item on row click
    By legaldiscovery in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 23, 2011, 2:38 PM

Posting Permissions