[CLOSED] TabIndex is not working

[rguardado]

I have this form, but when I open the window, the tabindex sequence isnot working.

In codebehind, I set the 'focus' to the first textfield, but when I press tabkey, I hope after the textfield, must follow the checkbox, and later the buttons. But after the textfield, the focus goes to the url direction of the browser. I tested it on firefox and IE.

I started didnt put the tabindex tag, I had the situation I commented, after I put the tabindex tab, but I got the same result.

This is the code:

        <ext:GridPanel 
            id="grdR" 
            Width="370" 
            Height="375"
            runat="server">
            <Store>
                    <ext:Store runat="server" PageSize="10" RemoteSort="true">
                    <Proxy>
                        <ext:AjaxProxy Url="../../ashx/dal/Rol.ashx">
                            <ExtraParams>
                                <ext:Parameter Name="t" Value="1" />
                            </ExtraParams>
                            <Reader>
                                <ext:JsonReader RootProperty="data" TotalProperty="total" />
                            </Reader>
                            <Listeners>
                                <Exception Handler="Ext.MessageBox.alert('Carga de Informacion Fallo...', response.statusText);" />
                            </Listeners>
                        </ext:AjaxProxy>
                    </Proxy>
                    <Model>
                        <ext:Model runat="server" IDProperty="Id">
                            <Fields>
                                <ext:ModelField Name="Id" />
                                <ext:ModelField Name="Descripcion" />
                                <ext:ModelField Name="Estatus" Type="Boolean" />
                            </Fields>
                        </ext:Model>
                    </Model>
                        <Sorters>
                            <ext:DataSorter Property="Descripcion" Direction="ASC" />
                        </Sorters>
                </ext:Store>
            </Store>
            <TopBar>
                <ext:ToolBar runat="server">
                    <Items>
                        <ext:Button runat="server" Icon="Add" Text="Nuevo Rol">
                            <DirectEvents>
                                <Click OnEvent="grdRShow">
                                    <ExtraParams>
                                        <ext:Parameter Name="x" Value="0" Mode="Raw" />
                                    </ExtraParams>
                                    <EventMask ShowMask="true" Msg="Cargando..."  />
                                </Click>
                            </DirectEvents>
                        </ext:Button>
                    </Items>
                </ext:ToolBar>
            </TopBar>
            <ColumnModel runat="server">
                <Columns>
                    <ext:CommandColumn runat="server" Width="25">
                        <Commands>
                            <ext:GridCommand Icon="BulletEdit" CommandName="RP" />
                        </Commands>
                        <DirectEvents>
                            <Command  OnEvent="grdRShow" Success="top.GApp.wndHdr(#{wndR},2);">
                                <EventMask ShowMask="true" CustomTarget="={#{grdR}.body}" />
                                <ExtraParams>
                                    <ext:Parameter Name="x" Value="record.getId()" Mode="Raw" />
                                </ExtraParams>
                            </Command>
                        </DirectEvents>
                    </ext:CommandColumn>
                    <ext:Column runat="server" Text="Descripcion" DataIndex="Descripcion" Width="270" />
                    <ext:BooleanColumn runat="server" Text="Activo"  TrueText="Si" FalseText="No" DataIndex="Estatus" Width="45" />
                </Columns>
            </ColumnModel>
            <Plugins>
                    <ext:FilterHeader runat="server" Remote="true" />
            </Plugins>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" Mode="Single" />
            </SelectionModel>
            <BottomBar>
                <ext:PagingToolbar runat="server" DisplayInfo="true" DisplayMsg="Roles {0} - {1} de {2}" EmptyMsg="No existen Roles"/>
            </BottomBar>
        </ext:GridPanel>
    <ext:Window 
        ID="wndR" 
        runat="server" 
        Icon="User" 
        Title="Rol"
        Width="380" 
        Height="170" 
        AutoScroll="true"
        AutoShow="false" 
        Modal="true" 
        Hidden="true">
        <Items>
            <ext:FormPanel 
            ID="frmR" 
            runat="server" 
            BodyPadding="2"
            Width="365"
            DefaultAnchor="100%"
            AutoScroll="True">
            <Defaults>
                <ext:Parameter Name="MsgTarget" Value="side" />
            </Defaults>            
            <Items>
                <ext:Hidden runat="server" ID="x" Text="0" />
                <ext:TextField runat="server" FieldLabel="Descripcion" ID="tR" Name="tr" AllowBlank="false" MaxLength="25" EnforceMaxLength="true" FieldCls="bygl" TabIndex="0"/>
                <ext:Checkbox ID="chkR" runat="server" FieldLabel="Activo" Name="ckr" TabIndex="1"/>
                <ext:FieldSet runat="server" Collapsed="false" Collapsible="false" Title="Actualizacion" Width="280" Border="false" Cls="cb fs9">
                    <Items>
                        <ext:Label ID="lfR" runat="server" Name="lfr" Cls="cgr fs9" />
                        <ext:Label ID="luR" runat="server" Name="lur" Cls="cgr fs9"/>
                    </Items>
                </ext:FieldSet>
            </Items>
            <Buttons>
                <ext:Button runat="server" Text="Nuevo" Icon="Add" TabIndex="2">
                    <DirectEvents>
                        <Click OnEvent="btnRNew"> 
                            <EventMask ShowMask="true" Msg="Procesando Informacion..." />
                        </Click>
                    </DirectEvents>
                    <Listeners>
                        <Click Handler="top.GApp.wndHdr(#{wndR},1);" />
                    </Listeners>
                </ext:Button>
                <ext:Button id="btnR" runat="server" Icon="DatabaseSave" Text="Guarda" TabIndex="3">
                    <DirectEvents>
                        <Click OnEvent="frmRSave" before="return #{frmR}.isValid();" Success="#{grdR}.store.reload();#{btnP}.setDisabled(false);#{btnU}.setDisabled(false);">
                            <ExtraParams>
                                <ext:Parameter Name="values" Value="#{frmR}.getForm().getValues()" Mode="Raw" Encode="true" />
                            </ExtraParams>
                            <EventMask ShowMask="true" Msg="Procesando Informacion..." />
                        </Click>                        
                    </DirectEvents>
                </ext:Button>
                <ext:Button id="btnP" runat="server" Icon="Key" Text="Permisos" Disabled="true" TabIndex="4">
                    <DirectEvents>
                        <Click OnEvent="btnPWnd" >
                            <EventMask ShowMask="true" Msg="Cargando Permisos..." />
                            <ExtraParams>
                                <ext:Parameter Name="x" Value="#{x}.getValue()" Mode="Raw" />
                            </ExtraParams>
                        </Click>
                    </DirectEvents>
                </ext:Button>
                <ext:Button id="btnU" runat="server" Icon="GroupKey" Text="Usuarios" Disabled="true" TabIndex="5">
                    <DirectEvents>
                        <Click OnEvent="btnUWnd" >
                            <EventMask ShowMask="true" Msg="Cargando Usuarios..." />
                            <ExtraParams>
                                <ext:Parameter Name="x" Value="#{x}.getValue()" Mode="Raw" />
                            </ExtraParams>
                        </Click>
                    </DirectEvents>
                </ext:Button>
            </Buttons>
    </ext:FormPanel>
        </Items>
    </ext:Window>

[fabricio.murta]

Hello @rguardado!

I can't run your code here, theres lots of references that you did not provide. Well, in that case I can nothing but try some leads to you.

I've done this little example showing how tabIndex works, you should be working in this line:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ext:ResourceManager runat="server" ScriptMode="Debug" SourceFormatting="true" />
        <ext:TextField runat="server" TabIndex="1" Text="First" />
        <ext:TextField runat="server" TabIndex="3" Text="Third" />
        <ext:TextField runat="server" TabIndex="2" Text="Second" />
    </div>
    </form>
</body>
</html>

This is how you should work with the tab indexes. On the sample above, once you focus the first field, hitting tab takes you to the last field (named Second). Tab again, and you're back at the item in the middle, the item named Third.

Well, this probably does not help you much but, I believe that parting from this point, you can build a runnable sample showing what is not working there, so that I can run it and give you a concrete suggestion on how to fix the issue.

Other than this, these guides might help you helping us help you on your next posts:
- Forum Guidelines For Posting New Topics
- More information required

We await your return so we can continue to investigate the matter.

[rguardado]

Fabricio, thanks for reply.

When you have a case like yours, it works. But if you have textfields(formpanel) and a window with textfield, buttons and you show the window, this is the case when the tabindex doesnt work.

Add button and a window to your code, with some textfields. Click the button to show the window. And the tabindex is not ordered.

[fabricio.murta]

Hello @rguardado,

I tried to build the scenario you described, and it works fine here. Please provide a working sample or else we will be at this trial-and-error forever. I must be doing something different than what is needed to reproduce your issue, and no one better to make it than you.

What I did was to create a hidden window, inside it the FormPanel containing the fields I shown you in the sample code above.

Additionally, on show, I made it focus the first field as I believe you also described. Once I hit tab, if follows the very expected order, no matter how I change it.

So, I would still require an working sample from you in order to be able to try to give you an solution.

[ampathdev]

After tabbing on the username text field, chrome and IE highlights the address bar.
It should however go to the password field

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  
</head>
<body>
  <ext:ResourceManager ID="ResourceManager1" runat="server" />
  <ext:Window ID="winLogin" runat="server" Closable="false" Resizable="false" 
Height="150" Icon="Lock" Title="Login" Draggable="false" Width="350" Modal="true" 
    BodyPadding="5" Layout="FormLayout" Hidden="false">
    <Items>
      <ext:TextField ID="txtUsername" runat="server" FieldLabel="Username" 
AllowBlank="false" BlankText="Your username is required." EnableKeyEvents="true" TabIndex="1">
      </ext:TextField>
      <ext:TextField ID="txtPassword" runat="server" InputType="Password"
FieldLabel="Password" AllowBlank="false" EnableKeyEvents="true" BlankText="Your password is required." TabIndex="2">
        
      </ext:TextField>
    </Items>
    <Buttons>
      <ext:Button runat="server" Text="Login" Icon="Accept" TabIndex="3">

      </ext:Button>
    </Buttons>
  </ext:Window>
</body>
</html>

[ampathdev]

Right, after some experimentation.
It seems if I set the window's

Modal="true"

tabbing does not work.

Is this expected behavior?

[Daniil]

Hello!

Please try to update from the SVN trunk and retest. This problem should be fixed already.

[rguardado]

Thanks Daniil, it works.