PDA

View Full Version : [CLOSED] KeyMap on page with usercontrol and grid on usercontrol



elke.schreiber
Jul 25, 2013, 8:36 AM
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

Daniil
Jul 25, 2013, 2:12 PM
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.

elke.schreiber
Jul 25, 2013, 2:48 PM
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.

Daniil
Jul 25, 2013, 3:16 PM
Got it. We will investigate.

Daniil
Jul 29, 2013, 5:33 AM
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.

elke.schreiber
Jul 29, 2013, 12:36 PM
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"?

Daniil
Jul 29, 2013, 1:50 PM
Listeners/DirectEvents are unavailable for these types of column: ActionColumn, BooleanColumn, DateColumn, RowNumbererColumn, TemplateColumn.

It is a bug, we are investigate a fix.

elke.schreiber
Jul 29, 2013, 1:55 PM
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.

Daniil
Jul 31, 2013, 4:22 AM
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.