View Full Version : [CLOSED] TAB key press not setting focus to next row

Sep 05, 2014, 6:18 AM

We are unable to set the focus to next row on the TAB key press.
Here is the sample code to replicate the issue.

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="Sample" />
<ext:GridPanel ID="gridpanel" runat="server" Border="false"
Width="500" Height="400">
<ext:Store ID="storeGrid" runat="server" IgnoreExtraFields="true">
<ext:Model ID="Model1" runat="server" IDProperty="ID">
<ext:ModelField Name="ID" />
<ext:ModelField Name="Name" />
<ext:ModelField Name="Description" />
<ColumnModel ID="ColumnModel2" runat="server">
<ext:Column ID="Name" ColumnID="Name" runat="server" DataIndex="Name" Text="Name" Width="150">
<PrepareCommand Args="grid,command,record,row,col,value" FormatHandler="False" Handler="" />
<ext:TextField ID="txtName" runat="server" StyleSpec="text-transform:uppercase;"
MaxLength="50" EnableKeyEvents="true">
<Show Handler="this.focus.defer(50, this);" />
<KeyUp Handler="if (e.keyCode >= 65 && e.keyCode <= 90) this.setValue(this.getValue().toUpperCase());" />
<ext:Column ID="Description" ColumnID="Description" runat="server" DataIndex="Description" Text="Description" Width="250">
<PrepareCommand Args="grid,command,record,row,col,value" FormatHandler="False" Handler="" />
<ext:TriggerField ID="txtDesc" runat="server" StyleSpec="text-transform:uppercase;"
MaxLength="50" EnableKeyEvents="true" TriggerIcon="Search">
<Show Handler="this.focus.defer(50, this);" />
<KeyUp Handler="if (e.keyCode >= 65 && e.keyCode <= 90) this.setValue(this.getValue().toUpperCase());" />

<ext:Column ID="ID" ColumnID="ID" runat="server" DataIndex="ID">
<ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="2">
<ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" Mode="Single" runat="server">
<BeforeSelect Fn="ValidRow">
<ext:Button ID="btn_add1" runat="server" AutoPostBack="false" Text="Add Row">
<Click Delay="1" Handler="newRow();" />
<ext:Button ID="btn_save1" runat="server" AutoPostBack="false" Text="Save">
<Click Delay="1" Handler="#{storeGrid}.sync();" />
<ext:Button ID="Btn_Delete1" runat="server" Text="Delete">
<ext:Button ID="Btn_Cancel1" runat="server" Text="Cancel">

var editMode = false;
var alert = '';
var CurrentRowIndex;
function ValidRow() {
return !editMode;
function newRow() {
editMode = true;
var rowIndex = Sample.gridpanel.store.getCount();
Sample.gridpanel.store.insert(rowIndex, {});
Sample.gridpanel.editingPlugin.startEdit(rowIndex, 1);
CurrentRowIndex = rowIndex;

Please refer the screenshot and do guide us.

Sep 05, 2014, 7:49 AM
Hi @speedstepmem4,

Do you need a new row is added automatically on Tab? Unfortunately, there is no such the functionality.

I remember I've already helped someone on the forums with such a request. I can suggest you to try to find a related thread using the forums searching engine.