Aug 14, 2012, 11:07 AM
[CLOSED] GridPanel focus and ENTER keymap
Hi,
Based on your example https://examples2.ext.net/#/GridPanel/Layout/FitLayout/ I make a few changes to make a test case.
The following is that doesn't work in v2.1 rev4244:
Here's the test case:
Based on your example https://examples2.ext.net/#/GridPanel/Layout/FitLayout/ I make a few changes to make a test case.
The following is that doesn't work in v2.1 rev4244:
- ENTER Keymap not fires inside or outside GridPanel
- When I focus first row in gridpanel, it doesn't allows me to navigate with arrow keys until I click inside gridpanel
Here's the test case:
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.Store1.DataSource = this.Jobs;
this.Store1.DataBind();
}
private List<Job> Jobs
{
get
{
List<Job> jobs = new List<Job>();
for (int i = 1; i <= 50; i++)
{
jobs.Add(new Job(
i,
"Task" + i.ToString(),
DateTime.Today.AddDays(i),
DateTime.Today.AddDays(i + i),
(i % 3 == 0)));
}
return jobs;
}
}
public class Job
{
public Job(int id, string name, DateTime start, DateTime end, bool completed)
{
this.ID = id;
this.Name = name;
this.Start = start;
this.End = end;
this.Completed = completed;
}
public int ID { get; set; }
public string Name { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
public bool Completed { get; set; }
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>GridPanel with FitLayout - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Window ID="Window1" runat="server" Collapsible="true" Maximizable="true" Icon="Lorry"
Title="Job List" Width="600" Height="300" X="50" Y="50" Layout="Fit">
<Items>
<ext:GridPanel ID="sampleGridPanel" runat="server" Header="false" Border="false">
<Store>
<ext:Store ID="Store1" runat="server" PageSize="10">
<Model>
<ext:Model runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="Name" />
<ext:ModelField Name="Start" Type="Date" />
<ext:ModelField Name="End" Type="Date" />
<ext:ModelField Name="Completed" Type="Boolean" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<Load Handler="if (!sampleGridPanel.getSelectionModel().hasSelection()) {
sampleGridPanel.getSelectionModel().selectRange(0, 0, false);
sampleGridPanel.getView().focusRow(0);
}"
Delay="10" />
</Listeners>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="ID" Width="40" Sortable="true" DataIndex="ID" />
<ext:Column runat="server" Text="Job Name" Sortable="true" DataIndex="Name" Flex="1" />
<ext:DateColumn runat="server" Text="Start" Width="120" Sortable="true" DataIndex="Start"
Format="yyyy-MM-dd" />
<ext:DateColumn runat="server" Text="End" Width="120" Sortable="true" DataIndex="End"
Format="yyyy-MM-dd" />
<ext:Column runat="server" Text="Completed" Width="80" Sortable="true" DataIndex="Completed">
<Renderer Handler="return (value) ? 'Yes':'No';" />
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server" LoadMask="false" />
</View>
<KeyMap runat="server">
<Binding>
<ext:KeyBinding Handler="alert('Enter')" DefaultEventAction="StopEvent">
<Keys>
<ext:Key Code="ENTER" />
</Keys>
</ext:KeyBinding>
</Binding>
</KeyMap>
<Features>
<ext:GridFilters runat="server" Local="true">
<Filters>
<ext:NumericFilter DataIndex="ID" />
<ext:StringFilter DataIndex="Name" />
<ext:DateFilter DataIndex="Start">
<DatePickerOptions runat="server" TodayText="Now" />
</ext:DateFilter>
<ext:DateFilter DataIndex="End">
<DatePickerOptions runat="server" TodayText="Now" />
</ext:DateFilter>
<ext:BooleanFilter DataIndex="Completed" />
</Filters>
</ext:GridFilters>
</Features>
<BottomBar>
<ext:PagingToolbar runat="server" DisplayInfo="true" DisplayMsg="Displaying Jobs {0} - {1} of {2}" />
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Window>
<ext:KeyMap runat="server" Target="={#{sampleGridPanel}.getBody()}">
<Binding>
<ext:KeyBinding Handler="alert('Enter from external key')" DefaultEventAction="StopEvent">
<Keys>
<ext:Key Code="ENTER" />
</Keys>
</ext:KeyBinding>
</Binding>
</ext:KeyMap>
<ext:KeyMap runat="server" Target="={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}">
<Binding>
<ext:KeyBinding Ctrl="true" Handler="Window1.close();" DefaultEventAction="StopEvent">
<Keys>
<ext:Key Code="Q" />
</Keys>
</ext:KeyBinding>
</Binding>
</ext:KeyMap>
</form>
</body>
</html>
Last edited by Daniil; Aug 16, 2012 at 7:37 AM.
Reason: [CLOSED]
Originally Posted by softmachine2011
