What's New?

[CLOSED] Tab Sequence Problem

  1. #1
    Aug 02, 2012, 7:22 AM

    [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: 81  Size: 11.5 KB  ID: 4567
    Last edited by Daniil; Aug 07, 2012 at 4:59 AM. Reason: [CLOSED]
  2. #2
    Aug 02, 2012, 2:02 PM
    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 Legacy Premium Help
    Replies: 3
    Last Post: Jul 05, 2012, 5:25 AM
  2. [CLOSED] Calling OnRefreshData explicitly after sequence of events
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jun 01, 2012, 10:48 AM
  3. [CLOSED] How to receive the information on actual sequence of columns?
    By ViDom in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 22, 2011, 2:13 PM
  4. [CLOSED] how to control the validation sequence between the client side validation and remote validation
    By leon_tang in forum 1.x Legacy Premium Help
    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