What's New?

[CLOSED] How to map Enter key to "TAB" next field on a FormPanel

  1. #1
    Apr 15, 2013, 8:16 PM

    [CLOSED] How to map Enter key to "TAB" next field on a FormPanel

    Hello

    Any suggestions how to map the "Enter" key in the FormPanel to Tab to next field.
    and shift Enter for "TextArea" fields.

    Thanks
    Last edited by Daniil; Apr 23, 2013 at 3:50 AM. Reason: [CLOSED]
  2. #2
    Apr 15, 2013, 10:05 PM
    Hello!

    Try the following approach:

    <%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" SourceFormatting="True" />
    <ext:FormPanel runat="server">
        <KeyMap>
            
        </KeyMap>
        <Items>
            <ext:TextField runat="server" ID="TextField1">
                <Listeners>
                    <SpecialKey Handler="
                    if (e.getKey() == e.ENTER) {
                        e.stopEvent();
                        #{TextField2}.focus();
                    }
                    "></SpecialKey>
                </Listeners>
            </ext:TextField>
            <ext:TextField runat="server" ID="TextField2">
                <Listeners>
                    <SpecialKey Handler="
                    if (e.getKey() == e.ENTER) {
                        e.stopEvent();
                        #{TextArea1}.focus();
                    }
                    "></SpecialKey>
                </Listeners>
            </ext:TextField>
            <ext:TextArea runat="server" ID="TextArea1">
                <Listeners>
                    <SpecialKey Handler="
                    if (e.getKey() == e.ENTER && e.shiftKey) {
                        e.stopEvent();
                        alert('Enter with Shift');
                    }
                    "></SpecialKey>
                </Listeners>
            </ext:TextArea>
        </Items>
    </ext:FormPanel>
    </form>
</body>
</html>
    Also, I think it will helpful to read this thread: http://www.sencha.com/forum/showthread.php?105963
  3. #3
    Apr 16, 2013, 5:13 PM
    I was thinking a more generic way, like a keyMap to a FormPanel?

    Advise..
  4. #4
    Apr 16, 2013, 8:15 PM
    Try this one: 

    <%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" SourceFormatting="True" />
    <ext:FormPanel runat="server">
        <KeyMap>
             <ext:KeyBinding>
                 <Keys>
                     <ext:Key Code="ENTER"/>
                 </Keys>
                 <Listeners>
                     <Event Handler="
                     var targetEl = Ext.get(e.target.id),
                         targetCmp = Ext.getCmp(e.target.id),
                         fieldEl = targetEl.up('[class=x-form-item ]') || {};
                     
                     if (!targetCmp.isXType('field') || targetCmp == null || (!e.shiftKey && targetCmp.isXType('textarea')))
                        return;

                     var next = fieldEl.next('[class=x-form-item ]');
                         
                     // focus the next field if it exists
                     if (next && next.child('.x-form-field')) {
                         e.stopEvent();
                         next.child('.x-form-field').focus();
                     }
                     "></Event>
                 </Listeners>
             </ext:KeyBinding>
        </KeyMap>
        <Items>
            <ext:TextField runat="server" ID="TextField1">
            </ext:TextField>
            <ext:TextArea runat="server" ID="TextArea1">
            </ext:TextArea>
            <ext:TextField runat="server" ID="TextField2">
            </ext:TextField>
        </Items>
    </ext:FormPanel>
    </form>
</body>
</html>
  5. #5
    Apr 18, 2013, 10:20 PM
    How abt if i have a container for each fied, something like this

    Please advise..

    <%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

 <!DOCTYPE html>
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" SourceFormatting="True" />
    <ext:FormPanel runat="server">
        <KeyMap>
            <ext:KeyBinding>
                <Keys>
                    <ext:Key Code="ENTER" />
                </Keys>
                <Listeners>
                    <Event Handler="jump(e);">
                    </Event>
                </Listeners>
            </ext:KeyBinding>
        </KeyMap>
        <Items>
            <ext:TextField runat="server" ID="TextField1">
            </ext:TextField>
            <ext:Container runat="server" Layout="FormLayout">
                <Items>
            <ext:TextField runat="server" ID="TextField2">
            </ext:TextField></Items>
            </ext:Container>
            <ext:Container ID="Container1" runat="server" Layout="FormLayout">
                <Items><ext:TextArea runat="server" ID="TextArea1">
            </ext:TextArea></Items>
            </ext:Container>
        </Items>
    </ext:FormPanel>
    <script type="text/javascript">
        var jump = function (e) {
            var targetEl = Ext.get(e.target.id),
                                    targetCmp = Ext.getCmp(e.target.id),
                                    fieldEl = targetEl.up('[class=x-form-item ]') || {};
            if (!targetCmp.isXType('field') || targetCmp == null || (!e.shiftKey && targetCmp.isXType('textarea')))
                return;
            var next = fieldEl.next('[class=x-form-item ]');
            // focus the next field if it exists                    
            if (next && next.child('.x-form-field')) {
                e.stopEvent();
                next.child('.x-form-field').focus();
            }            
        }
    
    </script>
    </form>
</body>
</html>
  6. #6
    Apr 19, 2013, 2:25 AM
    To make it in generic way all your fields should have the same markup. Or you can make your handler more difficult and add more conditions and checks.

Similar Threads

  1. [CLOSED] TabPanel "TabCloseMenu" plug-in "CloseOtherTabsText" property not working
    By cleve in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 26, 2012, 11:29 AM
  2. [CLOSED] Ext.net v2 Beta release: Panel collapsed with CollapseMode="Mini" and Split="true"
    By supera in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: May 02, 2012, 5:37 PM
  3. [CLOSED] GridPanel: ServerSide Code Equivalent for "getSelectionModel().selectRow(0)" and "getView().focusRow(0)"
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Oct 11, 2011, 2:42 AM
  4. When I try to Pass an ID in the " Store.Load({params: ( " my PAGING starts up with "NaN" as the first page...
    By RonaldR in forum 1.x Help
    Replies: 2
    Last Post: Jun 26, 2011, 1:59 AM
  5. [CLOSED] How to "bind" a ComboBox to a field in a FormPanel
    By mattwoberts in forum 1.x Legacy Premium Help
    Replies: 12
    Last Post: Jan 11, 2011, 10:22 AM

Posting Permissions