What's New?

Pressing Enter in a TextField from FormPanel2 will submit FormPanel1

  1. #1
    Sep 02, 2011, 7:17 PM

    Pressing Enter in a TextField from FormPanel2 will submit FormPanel1

    Hello guys, I found myself in the following scenario:

    Two FormPanels in the same Page. Each one has its own Button[type=Submit] with a DirectEvent configured to treat its data.
    The problem is when I press "Enter" inside the TextField from FormPanel2 (Txt2), the DirectEvent for FormPanel1 is called.

    In the testcase below you can easily see this behaviour when the EventMask appears.

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

<script runat="server">
    protected void Btn1_Click(object sender, DirectEventArgs e)
    {
    }
    
    protected void Btn2_Click(object sender, DirectEventArgs e)
    {
    }
</script>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Paged</title> 
</head>
<body>
    <ext:ResourceManager runat="server" ID="ResourceManager1" />

    <form id="form1" runat="server">
        <ext:FormPanel runat="server" ID="FormPanel1" Title="FormPanel1" Frame="true" Width="200">
            <Items>
                <ext:TextField runat="server" ID="Txt1" />
            </Items>
            <Buttons>
                <ext:Button runat="server" ID="Btn1" Type="Submit" Text="Submit Form 1">
                    <DirectEvents>
                        <Click OnEvent="Btn1_Click">
                            <EventMask ShowMask="true" MinDelay="500" CustomTarget="FormPanel1" />
                        </Click>
                    </DirectEvents>
                </ext:Button>
            </Buttons>
        </ext:FormPanel>
        
        <ext:FormPanel runat="server" ID="FormPanel2" Title="FormPanel2" Frame="true" Width="200">
            <Items>
                <ext:TextField runat="server" ID="Txt2" />
            </Items>
            <Buttons>
                <ext:Button runat="server" ID="Btn2" Type="Submit" Text="Submit Form 2">
                    <DirectEvents>
                        <Click OnEvent="Btn2_Click">
                            <EventMask ShowMask="true" MinDelay="500" CustomTarget="FormPanel2" />
                        </Click>
                    </DirectEvents>
                </ext:Button>
            </Buttons>
        </ext:FormPanel>
    </form>
</body>
</html>
    Click image for larger version.  Name: ext_formpanel_submit.png  Views: 181  Size: 3.2 KB  ID: 3134

    I know I can remove type=submit from buttons and add KeyPress listeners on textfields to track e.ENTER and e.NUM_CENTER, and then fireEvent('click') in the correct button. I just dont think this is the right solution.

    I'm running Ext.Net community v1.1.
    Last edited by arkilus; Sep 02, 2011 at 7:26 PM.
  2. #2
    Sep 02, 2011, 7:36 PM
    Hi,

    Both of your FormPanels are inside the <form runat="server">. When either button is submitted, the button will submit whatever is inside the <form runat="server">. What you have configure is the desired functionality.

    If you want each individual <ext:FormPanel> to submit independently, then you must either remove the <form runat="server">, or move one of the <ext:FormPanel>'s outside of the <form runat="server">

    The following sample demonstrates removing the <form runat="server">.

    Example

    <%@ Page Language="C#" %><%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<script runat="server">
    protected void Button1_Click(object sender, DirectEventArgs e)
    {
        this.ShowMessage();
    }
     
    protected void Button2_Click(object sender, DirectEventArgs e)
    {
        this.ShowMessage();
    }


    public void ShowMessage()
    {
        X.Msg.Notify("TextField1", this.Request.Form["TextField1"]).Show();
        X.Msg.Notify("TextField2", this.Request.Form["TextField2"]).Show();
    }
</script>
     
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Pro</title> 
</head>
<body>
    <ext:ResourceManager runat="server" />


    <ext:FormPanel runat="server" Title="FormPanel1" Frame="true" Width="200">
        <Items>
            <ext:TextField ID="TextField1" runat="server" Text="One" />
        </Items>
        <Buttons>
            <ext:Button runat="server" Type="Submit" Text="Submit Form 1" OnDirectClick="Button1_Click" />
        </Buttons>
    </ext:FormPanel>


    <ext:FormPanel runat="server" Title="FormPanel2" Frame="true" Width="200">
        <Items>
            <ext:TextField ID="TextField2" runat="server" Text="Two" />
        </Items>
        <Buttons>
            <ext:Button runat="server" Type="Submit" Text="Submit Form 2" OnDirectClick="Button2_Click" />
        </Buttons>
    </ext:FormPanel>
</body>
</html>
    Hope this helps.
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Sep 02, 2011, 8:09 PM
    Thanks geoffrey, your example works but now pressing enter wont submit any FormPanel.
    Am I expecting the wrong behaviour?
  4. #4
    Sep 30, 2011, 5:15 PM
    Quote Originally Posted by arkilus View Post
    Thanks geoffrey, your example works but now pressing enter wont submit any FormPanel.
    Am I expecting the wrong behaviour?
    Any clues so far?
  5. #5
    Oct 10, 2011, 4:28 PM
    Got it using KeyMaps:

    <ext:KeyMap ID="KeyMapPanel1" runat="server" Target="#{FormPanel1}">
    <ext:KeyBinding StopEvent="true">
        <Keys>
            <ext:Key Code="ENTER" />
        </Keys>
        <Listeners>
            <Event Handler="#{Btn1}.fireEvent('click')" />
        </Listeners>
    </ext:KeyBinding>
</ext:KeyMap>

<ext:KeyMap ID="KeyMapPanel2" runat="server" Target="#{FormPanel2}">
    <ext:KeyBinding StopEvent="true">
        <Keys>
            <ext:Key Code="ENTER" />
        </Keys>
        <Listeners>
            <Event Handler="#{Btn2}.fireEvent('click')" />
        </Listeners>
    </ext:KeyBinding>
</ext:KeyMap>

Similar Threads

  1. How do I go to the next control in Gridpanel pressing enter key?
    By bulent sari in forum 2.x Help
    Replies: 0
    Last Post: Aug 10, 2012, 7:31 AM
  2. [CLOSED] TextField SpecialKey Submit and Enter/Backspace
    By macap in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Apr 28, 2010, 4:20 PM
  3. [CLOSED] [1.0] Chrome refreshes the entire IFrame on pressing Enter inside TextFields
    By r_honey in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 14, 2010, 4:12 PM
  4. How to change enter pressing from text field to button
    By VietView in forum 1.x Help
    Replies: 1
    Last Post: Jul 20, 2009, 6:44 AM
  5. [CLOSED] Htmleditor problem on Pressing Enter key
    By speedstepmem2 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 15, 2009, 12:25 PM

Posting Permissions