[CLOSED] Tab Sequence Problem

  1. #1

    [CLOSED] Tab Sequence Problem

    Hi,
    I'am getting problem with tab sequencing, Gridpanel cell is not getting focus when tab key is pressed , how can i get the focus on gridpanel
    first cell when tab is pressed from text field1, and also how to tab out from the last cell of the panel.


    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TabTesting.aspx.cs" Inherits="Web.Accounting.TabTesting" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <script runat="server">    
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!X.IsAjaxRequest)
                {
                    StoreTest.DataSource = new object[] { 
                    new object[] { "A1", "B1", "C1" }, 
                    new object[] { "A2", "B2", "C2" },
                    new object[] { "A3", "B3", "C3" }, 
                };
                    StoreTest.DataBind();
                }
            }
        </script>
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div >
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:TextField ID="txt" runat="server" FieldLabel="Field1" TabIndex="1" />
            <ext:GridPanel TabIndex="2" ColumnLines="true" Width="500" runat="server" ID="GridPanel_RequisitionSlip"
                AutoFocus="true" SortableColumns="false">
                <View>
                    <ext:GridView ID="GridView_RequisitionSlip" runat="server" StripeRows="true" TrackOver="false">
                    </ext:GridView>
                </View>
                <SelectionModel>
                    <ext:CellSelectionModel runat="server" SingleSelect="true" ID="TestRowSelectionModel" />
                </SelectionModel>
                <Store>
                    <ext:Store ID="StoreTest" runat="server" WarningOnDirty="false">
                        <Model>
                            <ext:Model ID="StoreTestModel" IDProperty="" runat="server">
                                <Fields>
                                    <ext:ModelField Name="A" Type="String" />
                                    <ext:ModelField Name="B" Type="String" />
                                    <ext:ModelField Name="C" Type="String" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel_RequisitionSlip" runat="server">
                    <Columns>
                        <ext:Column ID="ColA" runat="server" Text="A" DataIndex="A" Width="191" />
                        <ext:Column ID="ColB" runat="server" Text="B" DataIndex="B" Width="100" />
                        <ext:Column ID="ColC" runat="server" Text="C" DataIndex="C" />
                        <ext:CommandColumn ID="Column_SiteQuantity" runat="server" Width="25" Align="Left">
                            <Commands>
                                <ext:GridCommand Icon="Table" CommandName="SiteQuantityDisplay" />
                            </Commands>
                        </ext:CommandColumn>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </div>
        
        </form>
    </body>
    </html>
    Click image for larger version. 

Name:	snap1.png 
Views:	47 
Size:	11.5 KB 
ID:	4567
    Last edited by Daniil; Aug 07, 2012 at 4:59 AM. Reason: [CLOSED]
  2. #2
    Hi,

    There is no real focus, a grid is not focusalbe element. It just listens a tab key and behaves accordingly. It doesn't know (and I can't see how t odetermine) when it should be "focused" and where to move the focus from the last cell.

    So, needs to implement your requirement manually.

    I can suggest the following.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">    
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store1.DataSource = new object[] 
                { 
                    new object[] { "A1", "B1", "C1" }, 
                    new object[] { "A2", "B2", "C2" },
                    new object[] { "A3", "B3", "C3" }, 
                };
                Store1.DataBind();
            }
        }
    </script>
     
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script type="text/javascript">
            var onViewReady = function (grid) {
                var sm = grid.getSelectionModel();
    
                console.log(sm.keyNav);
            };
    
            var myOnKeyTab = function(e, t) {
                var me = this,
                    editingPlugin = me.getCurrentPosition().view.editingPlugin;
    
                if (editingPlugin && me.wasEditing) {
                    me.onEditorTab(editingPlugin, e)
                } else {
                    if (Ext.isEmpty(me.move(e.shiftKey ? 'left' : 'right', e))) {
                        App.TextField2.focus(true, 10);   
                    }
                }
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <ext:TextField 
            ID="TextField1" 
            runat="server" 
            FieldLabel="Field 1" 
            TabIndex="1">
            <Listeners>
                <Blur Handler="App.GridPanel1.getSelectionModel().setCurrentPosition({ row: 0, column : 0 });" />
            </Listeners>
        </ext:TextField>
    
        <ext:GridPanel  
            ID="GridPanel1"
            runat="server" 
            Width="500"
            SortableColumns="false">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="A" />
                                <ext:ModelField Name="B" />
                                <ext:ModelField Name="C" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="A" DataIndex="A" Width="191" />
                    <ext:Column runat="server" Text="B" DataIndex="B" Width="100" />
                    <ext:Column runat="server" Text="C" DataIndex="C" />
                    <ext:CommandColumn runat="server" Width="25">
                        <Commands>
                            <ext:GridCommand Icon="Table" CommandName="command" />
                        </Commands>
                    </ext:CommandColumn>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CellSelectionModel runat="server" SingleSelect="true">
                    <CustomConfig>
                        <ext:ConfigItem Name="onKeyTab" Value="myOnKeyTab" Mode="Raw" />
                    </CustomConfig>
                </ext:CellSelectionModel>
            </SelectionModel>
        </ext:GridPanel>
    
        <ext:TextField 
            ID="TextField2" 
            runat="server" 
            FieldLabel="Field 2" 
            TabIndex="3" />
    </body>
    </html>

Similar Threads

  1. [CLOSED] MultiSelect change sequence without use drag drop
    By gs_user in forum 2.x Premium Help
    Replies: 3
    Last Post: Jul 05, 2012, 5:25 AM
  2. Replies: 5
    Last Post: Jun 01, 2012, 10:48 AM
  3. Replies: 2
    Last Post: Sep 22, 2011, 2:13 PM
  4. Replies: 3
    Last Post: Jul 11, 2011, 9:43 AM
  5. Sequence Key Tab
    By Maia in forum 1.x Help
    Replies: 5
    Last Post: Mar 23, 2009, 9:10 PM

Tags for this Thread

Posting Permissions