[CLOSED] KeyMap on page with usercontrol and grid on usercontrol

  1. #1

    [CLOSED] KeyMap on page with usercontrol and grid on usercontrol

    Hi,

    I have a problem with keymap on a page with a usercontrol.

    On the usercontrol there is a grid with a filter and I want implement that the user can fill in the filtervalues and can press the enter key. That fires the button event on parent page.

    I have implemented an example to demonstrate it.

    Master:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    
    
          <script>
            var showResult = function (btn) {
              Ext.Msg.notify("Button Click", "You clicked the " + btn + " button");
            };
          </script>
    </head>
    <body>
        <form id="form1" runat="server">
           <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" DisableViewState="False" StateProvider="Cookie"></ext:ResourceManager>
            <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
                <Items>
                    <ext:Panel ID="PanelMaster" runat="server" Layout="FitLayout" Border="true" Region="Center">
                        <Content>
                            <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server" />
                        </Content>
                    </ext:Panel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    Page:
    <%@ Page Title="" Language="C#" MasterPageFile="~/TestMaster.Master" AutoEventWireup="true" CodeBehind="TestKeyMap.aspx.cs" Inherits="WebCsharp.TestKeyMap" %>
    <%@ Register TagPrefix="ucTest" TagName="Test" Src="~/Test.ascx" %>
    
    <script runat="server">
      protected void cmdSearch(object sender, DirectEventArgs e)
        {
    
          X.Msg.Alert("Status", "Changes saved successfully.", new JFunction { Fn = "showResult" }).Show();
    
    
        }
    
          
    </script>
    
    
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
    
      <ext:Panel ID="pnlDeclarationItemGrid" runat="server" Layout="Fitlayout">
        <Bin>
          <ext:KeyMap ID="KeyMap2" runat="server" Target="={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}">
            <Binding>
              <ext:KeyBinding Handler="#{Button1}.fireEvent('click');">
                <Keys>
                  <ext:Key Code="ENTER" />
                </Keys>
              </ext:KeyBinding>
            </Binding>
          </ext:KeyMap>
        </Bin>
        <TopBar>
          <ext:Toolbar ID="Toolbar1" runat="server" Flat="false">
            <Items>
              <ext:Button ID="Button1" runat="server" Text="Button1">
                <DirectEvents>
                  <Click OnEvent="cmdSearch">
                    <EventMask ShowMask="true" />
                  </Click>
                </DirectEvents>
              </ext:Button>
            </Items>
          </ext:Toolbar>
        </TopBar>
        <Content>
          <ucTest:Test ID="ucDeclarationGrid" runat="server" />
        </Content>
      </ext:Panel>
    
    
    </asp:Content>
    UserControl:
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Test.ascx.cs" Inherits="WebCsharp.Test" %>
    
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                object[] data = this.GetData();
                Store store1 = this.GridPanel1.GetStore();
             
     
                store1.DataSource = data;
                store1.DataBind();
                
           }
        }
    
        public object[] GetData()
        {
            return new object[] {
                new object[] { "3m Co", 71.72, 0.02, 0.03, "01/01/2008" },
                new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "02/01/2008" },
                new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "03/01/2008" },
                new object[] { "American Express Company", 52.55, 0.01, 0.02, "10/01/2008" },
                new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "09/01/2008" },
                new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "01/03/2008" },
                new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "01/04/2008" },
                new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "01/01/2008" },
                new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "02/02/2008" },
                new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "03/05/2008" },
                new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "01/01/2008" },
                new object[] { "General Electric Company", 34.14, -0.08, -0.23, "01/01/2008" },
                new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "01/01/2008" },
                new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "01/01/2008" },
                new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "01/01/2008" },
                new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "01/01/2008" },
                new object[] { "International Business Machines", 81.41, 0.44, 0.54, "01/01/2008" },
                new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "01/01/2008" },
                new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "01/01/2008" },
                new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "01/01/2008" },
                new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "01/01/2008" },
                new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "01/01/2008" },
                new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "01/01/2008" },
                new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "01/01/2008" },
                new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "01/01/2008" },
                new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "01/01/2008" },
                new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "01/01/2008" },
                new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "01/01/2008" },
                new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "01/01/2008" }
            };
        }
    </script>
    
    
    <ext:Container ID="Container1" runat="server" Layout="FitLayout">
      <Items>
    
                <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Title="Array Grid"
                Width="625"
                Height="350"  Layout="FitLayout">
    
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model ID="Model1" runat="server">
                                <Fields>
                                    <ext:ModelField Name="company" />
                                    <ext:ModelField Name="price" Type="Float" />
                                    <ext:ModelField Name="change" Type="Float" />
                                    <ext:ModelField Name="pctChange" Type="Float" />
                                    <ext:ModelField Name="lastChange" Type="Date" DateFormat="MM/dd/yyyy" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>                   
                        <ext:Column ID="Column2" runat="server" Text="Price" Width="75" DataIndex="price">
                            <Renderer Format="UsMoney" />
                            <HeaderItems>
                                <ext:TextField ID="PriceFilter" runat="server">
                                    <Listeners>
                                                  
                                    </Listeners>
                                    <Plugins>
                                        <ext:ClearButton ID="ClearButton2" runat="server" />
                                    </Plugins>
                                </ext:TextField>
                            </HeaderItems>
                        </ext:Column>
    
                    </Columns>
                </ColumnModel>            
            </ext:GridPanel>
                </Items>
      </ext:Container>
    Thanks for help and a nice day
    Elke
    Last edited by Daniil; Jul 31, 2013 at 3:22 AM. Reason: [CLOSED]
  2. #2
    Hi Elke,

    What are the steps? Just type something in the TextField and press Enter? It doesn't fire the Button event for me. Tested with the trunk in FireFox and IE9.
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi Elke,

    What are the steps? Just type something in the TextField and press Enter? It doesn't fire the Button event for me. Tested with the trunk in FireFox and IE9.

    Hi,

    yes that's my problem.
    I want fire the button click event by key.
    When I click outside the grid and press the key then it works.
    But not when the grid has the focus.
    Last edited by elke.schreiber; Jul 25, 2013 at 1:51 PM.
  4. #4
    Got it. We will investigate.
  5. #5
    Please try:
    <ext:Column ...>
        <Listeners>
            <AfterRender Handler="this.keyNav.disable();" />
        </Listeners>
    </ext:Column>
    Please note if there is a single HTML input element, a browser submits a form on Enter key by default.
  6. #6
    Quote Originally Posted by Daniil View Post
    Please try:
    <ext:Column ...>
        <Listeners>
            <AfterRender Handler="this.keyNav.disable();" />
        </Listeners>
    </ext:Column>
    Please note if there is a single HTML input element, a browser submits a form on Enter key by default.
    Hi Daniil,

    yes that works for most columns. But what I should use for "DateColumn"?
  7. #7
    Listeners/DirectEvents are unavailable for these types of column: ActionColumn, BooleanColumn, DateColumn, RowNumbererColumn, TemplateColumn.

    It is a bug, we are investigate a fix.
  8. #8
    Quote Originally Posted by Daniil View Post
    Listeners/DirectEvents are unavailable for these types of column: ActionColumn, BooleanColumn, DateColumn, RowNumbererColumn, TemplateColumn.

    It is a bug, we are investigate a fix.
    Mercy for your help.
  9. #9
    Quote Originally Posted by Daniil View Post
    Listeners/DirectEvents are unavailable for these types of column: ActionColumn, BooleanColumn, DateColumn, RowNumbererColumn, TemplateColumn.

    It is a bug, we are investigate a fix.
    Fixed in SVN trunk. It will go to the upcoming v2.3 release.

Similar Threads

  1. Replies: 1
    Last Post: May 29, 2013, 6:00 PM
  2. Replies: 8
    Last Post: Feb 15, 2012, 9:04 AM
  3. Replies: 1
    Last Post: Jan 19, 2012, 4:20 PM
  4. Replies: 0
    Last Post: Aug 03, 2011, 10:27 PM
  5. [CLOSED] [1.0] DirectMethod - Page . UserControl . UserControl
    By Patrick in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 25, 2010, 9:33 AM

Posting Permissions