[FIXED] [#140] Textfield inside menu loses focus on mouse-out

  1. #1

    [FIXED] [#140] Textfield inside menu loses focus on mouse-out

    Hello.

    I want to implement an adress search inside a toolbar menu.
    There is a problem, if I select the text inside the textfield, the focus is lost as soon as the mouse leaves the textfield. This is very annoying if the user wants to change the text because you always move the mouse a bit.

    I have a sample to reproduce that bug:

    
    <body>
    <ext:ResourceManager runat="server" />
    <ext:Toolbar ID="mapToolbar" runat="server" Flat="false" width="200">
    <Items>
                <ext:ToolbarFill />
                <ext:Button runat="server" Text="Test">
                <Menu>
                <ext:Menu ID="Menu1" runat="server">
                <Items>
                <ext:Formpanel ID="Formpanel1" runat="server">
                <Items>
                <ext:FieldContainer ID="FieldContainer1" runat="server" Layout="HBoxLayout">
                <items>
                <ext:TextField>
                
                </ext:TextField>
                </items>
                </ext:FieldContainer>
                <ext:FieldContainer ID="FieldContainer2" runat="server" Layout="HBoxLayout">
                <items>
                <ext:TextField>
                
                </ext:TextField>
                </items>
                </ext:FieldContainer>
                </Items>
                </ext:Formpanel>
                </Items>
                </ext:Menu>
                </Menu>
                </ext:Button>
                </Items>
    </ext:Toolbar> 
    </body>
    Is there any hint how to implement a formpanel inside a menu without losing the focus?

    Regards
    Last edited by fabricio.murta; Sep 20, 2017 at 12:40 AM.
  2. #2
    Hi @blueworld,

    Thank you for the report.

    I reported to Sencha.
    http://www.sencha.com/forum/showthread.php?255184

    For now I can suggest the following solution.

    Put this script into the page's <head>.
    Ext.menu.Menu.override({
        canActivateItem: function(item) {
            return item && !item.isDisabled() && item.isVisible() && item.canActivate;
        }
    });
    Set up this for the FormPanel.
    <CustomConfig>
        <ext:ConfigItem Name="canActivate" Value="false" Mode="Raw" />
    </CustomConfig>
  3. #3
    Your bugfix works perfectly, thank you Daniil.
  4. #4
    Thank you for confirmation.

    Sencha opened a bug.

    We created an Issue to monitor.
    https://github.com/extnet/Ext.NET/issues/140
  5. #5
    Hi Daniil,

    I dont know if my problem has something to do with that bug, but I cant get any key events working.

    What I want to achieve is, that pressing ENTER in any of these textfields will trigger a function.

    I have tried KeyPress Listener inside the textfields, and a keymap on that formpanel with formpanel as target.

    Nothing does happen.

    What else can I try?
  6. #6
    Quote Originally Posted by blueworld View Post
    Hi Daniil,

    I dont know if my problem has something to do with that bug, but I cant get any key events working.

    What I want to achieve is, that pressing ENTER in any of these textfields will trigger a function.

    I have tried KeyPress Listener inside the textfields, and a keymap on that formpanel with formpanel as target.

    Nothing does happen.

    What else can I try?
    Probably you need to set up EnableKeyEvents="true" for the TextFields.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Button runat="server" Text="Menu">
                <Menu>
                    <ext:Menu runat="server">
                        <Items>
                            <ext:FormPanel runat="server">
                                <Items>
                                    <ext:FieldContainer runat="server" Layout="HBoxLayout">
                                        <Items>
                                            <ext:TextField runat="server" EnableKeyEvents="true">
                                                <Listeners>
                                                    <KeyPress Handler="if (e.getKey() === e.ENTER) {
                                                                           console.log('ENTER');
                                                                       }" />
                                                </Listeners>
                                            </ext:TextField>
                                        </Items>
                                    </ext:FieldContainer>
                                    <ext:FieldContainer runat="server" Layout="HBoxLayout">
                                        <Items>
                                            <ext:TextField runat="server" EnableKeyEvents="true">
                                                <Listeners>
                                                    <SpecialKey Handler="if (e.getKey() === e.ENTER) {
                                                                             console.log('ENTER');
                                                                         }" />
                                                </Listeners>
                                            </ext:TextField>
                                        </Items>
                                    </ext:FieldContainer>
                                </Items>
                            </ext:FormPanel>
                        </Items>
                    </ext:Menu>
                </Menu>
            </ext:Button>
        </form>
    </body>
    </html>
    See also
    http://docs.sencha.com/ext-js/4-1/#!...nableKeyEvents

    and a keymap on that formpanel with formpanel as target.
    We can investigate a sample, if you will provide.
  7. #7
    Both the Sencha team and the Ext.NET team can no longer reproduce this issue as of Ext.NET 4.x.

    Please let us know if you run into the same problem with Ext.NET 4.x (or higher) and we will reopen this Issue for investigation. Going forward, support for this issue can only be provided for Ext.NET 4.x (or higher).
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] [#627] TreePanel loses focus when node is expanded
    By RCN in forum 3.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 14, 2015, 11:58 AM
  2. [CLOSED] Textarea loses focus on mouse out in a Menu control
    By Fergus in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 27, 2013, 10:14 AM
  3. [CLOSED] TriggerField loses focus after ToolTip disappeared
    By Leonid_Veriga in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 27, 2012, 1:00 PM
  4. [CLOSED] Grid Filter loses focus
    By mjessup in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 20, 2010, 11:53 AM
  5. [CLOSED] Focus on textfield inside a tab
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 10, 2008, 1:32 PM

Tags for this Thread

Posting Permissions