[CLOSED] how to avoid textfield autopostback?

  1. #1

    [CLOSED] how to avoid textfield autopostback?

    a textfield and a button , when input some words in textfield, click "enter" key, then trigger the button's click event,
    but when click the "enter" key, the page is post back to the server , how to avoid it?
     <ext:TextField runat="server" ID="tfProj" FieldLabel="project's name"   >
                                <Listeners>
                                    <SpecialKey Handler="
                                                        if(e.getKey()==13){
                                                             App.storeProj.reload(); 
                                                        }
                                                    ">
                                    </SpecialKey>
                                </Listeners>
                            </ext:TextField>
                            <ext:Button runat="server" Text="search" ID="btnSearch" Icon="Find">
                                <Listeners>
                                    <Click Handler="
                                        App.storeProj.reload(); 
                                        "></Click>
                                </Listeners> 
                            </ext:Button>
     <ext:GridPanel runat="server" Title="xxx">
                     <View>
                                <ext:GridView runat="server" EmptyText="no data" />
                     </View>
                        <Store>
                            <ext:Store runat="server" ID="storeProj" OnReadData="LoadProj"  >
    ...
    Last edited by Daniil; Jun 08, 2015 at 10:10 AM. Reason: [CLOSED]
  2. #2
    Hi hdsoso,

    I tried to run your sample, but it was throwing errors. Can you revise and make a runnable sample that we can copy+paste into our test project.
    Geoffrey McGill
    Founder
  3. #3
    full example:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="tanksystem.WebForm3" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script runat="server" > 
            public class Student
            {
                public int ID { get; set; }
                public string Name { get; set; }
            } 
            protected void ReadData(object sender, StoreReadDataEventArgs e)
            {
                var name = tfName.Value;
                var students = new List<Student>
                    {
                        new Student {ID = 1, Name = "s1"},
                        new Student {ID = 2, Name = "s2"}
                    };
                if (name == null)
                { 
                    store.DataSource = students; 
                }
                else
                { 
                    var stds = students.Where(v => v.Name.Contains(name.ToString())).ToList();
                    store.DataSource = stds; 
                }
                store.DataBind();
            } 
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager runat="server"></ext:ResourceManager>
            <ext:TextField runat="server" ID="tfName">
                <Listeners>
                    <SpecialKey Handler="
                         if(e.getKey()==13){
                             App.btnS.trigger('click');
                         }
                        "></SpecialKey>
                </Listeners>
            </ext:TextField>
            <ext:Button runat="server" Text="click me" ID="btnS">
                <Listeners>
                    <Click Handler="
                        App.store.reload();
                        "></Click>
                </Listeners>
            </ext:Button>
            <ext:GridPanel runat="server">
                <Store>
                    <ext:Store runat="server" ID="store" OnReadData="ReadData">
                        <Fields>
                            <ext:ModelField Name="ID"></ext:ModelField>
                            <ext:ModelField Name="Name"></ext:ModelField>
                        </Fields>
                        <Proxy>
                            <ext:PageProxy></ext:PageProxy>
                        </Proxy>
                    </ext:Store>
                </Store>
                <ColumnModel>
                    <Columns>
                        <ext:Column runat="server" DataIndex="ID" Text="ID"></ext:Column>
                        <ext:Column runat="server" DataIndex="Name" Text="Name"></ext:Column>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  4. #4
    That is a browser's behavior. If there is the only input text field on the page and Enter is pressed, a browser submits the page.

    Also there is no .trigger() method on a Button.

    I can suggest the following solution.
    <SpecialKey Handler="if(e.getKey() === e.ENTER) {
                             App.btnS.fireEvent('click');
                             e.stopEvent();
                         }" />
        </Listeners>
    </ext:TextField>

Similar Threads

  1. [CLOSED] Avoid user inserting some character in textfield
    By profitsistemas in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Feb 08, 2013, 12:07 AM
  2. ComboBox with AutoPostBack
    By Maia in forum 1.x Help
    Replies: 1
    Last Post: Jun 24, 2009, 2:25 PM
  3. ComboBox AutoPostBack
    By methode in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jan 09, 2009, 5:45 AM
  4. Replies: 4
    Last Post: Nov 25, 2008, 5:53 PM

Posting Permissions