Sep 22, 2010, 8:20 PM
[CLOSED] How to Focus to the Next Editor in a GridPanel Row?
After selecting a value from an editor control (datefield, combobox, etc.) I want to move focus to the next column with an editor. I have a function set up called focusToNext which I call in the "select" listener for the sample datefields and combobox in my example. I just need to get the rowIndex and colIndex of the edtor field and then create some kind of loop to step through to get the next editor field if there is one.
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm_FocusToNext.aspx.vb" Inherits="Product.WebForm_FocusToNext" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<%@ Import Namespace="Microsoft.ApplicationBlocks.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script runat="server">
Protected Overloads Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
GetData()
End If
End Sub
Public Sub GetData()
Store1.DataSource = New Object() { _
New Object() {"3m Co", 71.72, 0.02, 0.03, Now}, _
New Object() {"Alcoa Inc", 29.01, 0.42, 1.47, Now}, _
New Object() {"Altria Group Inc", 83.81, 0.28, 0.34, Now}, _
New Object() {"American Express Company", 52.55, 0.01, 0.02, Now}, _
New Object() {"American International Group, Inc.", 64.13, 0.31, 0.49, Now}, _
New Object() {"AT&T Inc.", 31.61, -0.48, -1.54, Now}, _
New Object() {"Boeing Co.", 75.43, 0.53, 0.71, Now}, _
New Object() {"Caterpillar Inc.", 67.27, 0.92, 1.39, Now}, _
New Object() {"Citigroup, Inc.", 49.37, 0.02, 0.04, Now}, _
New Object() {"E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, Now}, _
New Object() {"Exxon Mobil Corp", 68.1, -0.43, -0.64, Now}, _
New Object() {"General Electric Company", 34.14, -0.08, -0.23, Now}, _
New Object() {"General Motors Corporation", 30.27, 1.09, 3.74, Now}, _
New Object() {"Hewlett-Packard Co.", 36.53, -0.03, -0.08, Now}, _
New Object() {"Honeywell Intl Inc", 38.77, 0.05, 0.13, Now}, _
New Object() {"Intel Corporation", 19.88, 0.31, 1.58, Now}, _
New Object() {"International Business Machines", 81.41, 0.44, 0.54, Now}, _
New Object() {"Johnson & Johnson", 64.72, 0.06, 0.09, Now}, _
New Object() {"JP Morgan & Chase & Co", 45.73, 0.07, 0.15, Now}, _
New Object() {"McDonald's Corporation", 36.76, 0.86, 2.4, Now}, _
New Object() {"Merck & Co., Inc.", 40.96, 0.41, 1.01, Now}, _
New Object() {"Microsoft Corporation", 25.84, 0.14, 0.54, Now}, _
New Object() {"Pfizer Inc", 27.96, 0.4, 1.45, Now}, _
New Object() {"The Coca-Cola Company", 45.07, 0.26, 0.58, Now}, _
New Object() {"The Home Depot, Inc.", 34.64, 0.35, 1.02, Now}, _
New Object() {"The Procter & Gamble Company", 61.91, 0.01, 0.02, Now}, _
New Object() {"United Technologies Corporation", 63.26, 0.55, 0.88, Now}, _
New Object() {"Verizon Communications", 35.57, 0.39, 1.11, Now}, _
New Object() {"Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, Now} _
}
Store1.DataBind()
End Sub
</script>
<script type="text/javascript">
var focusToNext = function() {
alert('focus to next:');
//get the row index of the grid panel we are currently editing
var rowIndex = 5;
//get the column index of this field
var colIndex = 0;
//get the next (from left to right) column that has an editor
var nextIndex = 1;
//check if there is another editor in the grid after this one
//focus to the next editor in the list
GridPanel1.startEditing(rowIndex, nextIndex);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ScriptManager ID="ScriptManager1" runat="server" />
<ext:ViewPort ID="ViewPort1" runat="server">
<Body>
<ext:Store
ID="Store1"
runat="server"
AutoLoad="true" >
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="company" />
<ext:RecordField Name="price" Type="Float" />
<ext:RecordField Name="change" Type="Float" />
<ext:RecordField Name="pctChange" Type="Float" />
<ext:RecordField Name="lastChange" Type="Date" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
<ext:GridPanel
ID="GridPanel1"
runat="server"
StoreID="Store1"
StripeRows="true"
Title="Array Grid"
Width="600"
Height="290"
AutoExpandColumn="Company">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column
ColumnID="Company"
Header="Company"
Width="160"
Sortable="true"
DataIndex="company">
<Editor>
<ext:TextField ID="TextField1" runat="server" />
</Editor>
</ext:Column>
<ext:Column Header="End Date" Width="85" Sortable="true" DataIndex="lastChange">
<Renderer Fn="Ext.util.Format.dateRenderer('m/d/y')" />
<Editor>
<ext:DateField ID="DateField1" runat="server">
<Listeners>
<Select Handler="focusToNext()" />
</Listeners>
</ext:DateField>
</Editor>
</ext:Column>
<ext:Column Header="Price" Width="75" Sortable="true" DataIndex="price">
<Renderer Format="UsMoney" />
<Editor>
<ext:ComboBox runat="server" ID="ComboBox1">
<Items>
<ext:ListItem Text="Item 1" Value="1" />
<ext:ListItem Text="Item 2" Value="2" />
<ext:ListItem Text="Item 3" Value="3" />
<ext:ListItem Text="Item 4" Value="4" />
<ext:ListItem Text="Item 5" Value="5" />
</Items>
<Listeners>
<Select Handler="focusToNext()" />
</Listeners>
</ext:ComboBox>
</Editor>
</ext:Column>
<ext:Column Header="Start Date" Width="85" Sortable="true" DataIndex="lastChange">
<Renderer Fn="Ext.util.Format.dateRenderer('m/d/y')" />
<Editor>
<ext:DateField ID="DateField2" runat="server">
<Listeners>
<Select Handler="focusToNext()" />
</Listeners>
</ext:DateField>
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
<LoadMask ShowMask="true" />
</ext:GridPanel>
</Body>
</ext:ViewPort>
</div>
</form>
</body>
</html>
Last edited by Daniil; Sep 23, 2010 at 3:13 PM.
Reason: [CLOSED]
