PDA

View Full Version : [CLOSED] GridPanel focus and ENTER keymap



softmachine2011
Aug 14, 2012, 12:07 PM
Hi,

Based on your example http://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>

Daniil
Aug 14, 2012, 1:23 PM
Hi,

Reproduced, we are investigating.

Daniil
Aug 14, 2012, 2:30 PM
1. The internal KeyMap. Please move to the GridView.

2. The external KeyMap. Please set up:

Target="={#{sampleGridPanel}.getView().el}"

3. Navigating via arrow keys. Please call

#{sampleGridPanel}.getView().focusCell({row:0, column:0});
after selecting a row. By the way, I would prefer to use a GridPanel ViewReady listener to select a row instead of the Store Load one.

softmachine2011
Aug 16, 2012, 7:55 AM
ViewReady listener is fired after store is loaded?

softmachine2011
Aug 16, 2012, 8:19 AM
All solutions works right, thanks Daniil

Daniil
Aug 16, 2012, 8:37 AM
ViewReady listener is fired after store is loaded?

Well, it fires when a view is available.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Table-event-viewready

A view is available when its ViewReady event is fired.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.view.AbstractView-event-viewready

It's recommended way to select the rows initially.

But it is fired once only and won't help if the Store will be reloaded. So, if it will be reloaded in your scenario (for example, paging), when you should switch back to the Load listener.

But I would suggest to check the

grid.getView().viewReady
flag before selecting the rows.

If it is false then attach a ViewReady listener for the GridPanel to select the rows.

With such check, you should be able to remove the Delay for the Load listener. Though I am a bit unsure.

Daniil
Aug 16, 2012, 11:37 AM
3. Navigating via arrow keys. Please call

#{sampleGridPanel}.getView().focusCell({row:0, column:0});
after selecting a row.

As well as you do I would expect key navigation working just after selecting a row or, at least, after the focusRow call. I have reported it to Sencha:
http://www.sencha.com/forum/showthread.php?237438

Interesting what they will answer.

softmachine2011
Aug 16, 2012, 12:26 PM
As well as you do I would expect key navigation working just after selecting a row or, at least, after the focusRow call. I have reported it to Sencha:
http://www.sencha.com/forum/showthread.php?237438

Interesting what they will answer.

Yes, in 80% of cases with focusCell works me but in the other not works until I click the grid.

Daniil
Aug 16, 2012, 12:57 PM
When does it not help?

A sample would be helpful.

softmachine2011
Aug 16, 2012, 1:01 PM
I have around 20 grids and many times I could navigate well but in others doesn't work.

It could be a delay or something similar... I use Load listener of store with delay=10 and I perform this




grid.getSelectionModel().selectRange(0, 0, false);

if (grid.getView().viewReady == true)
grid.getView().focusCell({ row: 0, column: 0 });
else
grid.getView().on('viewready', function () { grid.getView().focusCell({ row: 0, column: 0 }); });

Daniil
Aug 16, 2012, 1:45 PM
Please try to increase the Delay to, for example, 250.

softmachine2011
Aug 16, 2012, 2:00 PM
Finally I found the reason, in some cases to avoid this problem in older versions of extjs I perform a grid.focus() and now this is unnecessary.

works fine with delay=10.

Sorry for inconvenience

Daniil
Dec 29, 2012, 9:04 AM
With the sources from the trunk calling neither focusRow nor focusCell is not required.

Just selecting a row is enough.