TabIndex and Buttons/ImageButtons, how do you show a button has focus?

  1. #1

    TabIndex and Buttons/ImageButtons, how do you show a button has focus?

    I'm trying to setup up my forms so the tab button will properly move the focus thru the form. I'm having a problem with hidden fields and buttons, not showing the focus. Is this possible to show focus on buttons, and also skip hidden fields?
  2. #2
    Hi,

    I ran a quick test with a FormPanel and setting the .TabIndex of Fields and Buttons. When the [Tab] key is pressed, the focus appears to be moving through the components.

    You should not be able to set tab focus on an <ext:Hidden> Field. Any .TabIndex set on an <ext:Hidden> Field should be ignored by the browser.

    Hope this helps.
    Geoffrey McGill
    Founder & CEO
  3. #3

    asfd

    <ext:TextField ID="txt1" runat="server" TabIndex="1" />
    <ext:TextField ID="txt2" runat="server" TabIndex="2" />
    <ext:TextField ID="txt3" runat="server" TabIndex="3" />
    <ext:Button Text="btn1" runat="server" TabIndex="4" />
    <ext:Button Text="btn2" runat="server" TabIndex="5" />
    This test works as expected until it get to the buttons, I cannot see a highlight or any indication that btn1 has a focus. Does or should a button look different once it has the focus? Nothing changes visually after I tab past tabindex 3, btn1 never gets a focus apparently.
    Last edited by chearner; Apr 16, 2012 at 8:15 PM.
  4. #4
    Hi,

    Well, it depends on a browser.

    I guess you use IE9 or IE8. Yes, confirmed, I can't see the buttons are focused.

    But try with, for example, IE7 or FireFox, you will see they are focused.

    You can override CSS for focused buttons.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!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 runat="server">
        <title>Ext.NET Example</title>
    
        <style type="text/css">
            .x-btn-focus {
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:TextField runat="server" TabIndex="1" />
            <ext:TextField runat="server" TabIndex="2" />
            <ext:TextField runat="server" TabIndex="3" />
            <ext:Button runat="server" TabIndex="4" />
            <ext:Button runat="server" TabIndex="5" />
        </form>
    </body>
    </html>
  5. #5
    I just noticed the default buttons in v2.0 beta examples DO behave properly for button focus (using Tab key). The old examples v1.2 DO NOT work properly for button focus. Any estimate on when v2.0 might be released??

    My real problem is when using an ImageButton. Any ideas on setting focus to an ImageButton? I think it would be good to include a FocusImageUrl property or a FocusClass on an ImageButton.

    Thanks!
    Last edited by chearner; Apr 18, 2012 at 9:05 PM.
  6. #6
    Quote Originally Posted by chearner View Post
    I just noticed the default buttons in v2.0 beta examples DO behave properly for button focus (using Tab key). The old examples v1.2 DO NOT work properly for button focus. Any estimate on when v2.0 might be released??
    EXt.NET v2 Beta is released:
    http://www.ext.net/download/

    Beta 2 should appear soon.

    Quote Originally Posted by chearner View Post
    My real problem is when using an ImageButton. Any ideas on setting focus to an ImageButton? I think it would be good to include a FocusImageUrl property or a FocusClass on an ImageButton.
    Well, ImageButton is just an <img> HTML tag, it cannot be focused.

    I can suggest the following solution.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!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 runat="server">
        <title>Ext.NET Example</title>
    
        <script type="text/javascript">
            var onFocus = function () {
                ImageButton1.setImageUrl("resources/images/focused.png");
            };
    
            var onBlur = function () {
                ImageButton1.setImageUrl("resources/images/default.png");
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:TextField runat="server" TabIndex="1" />
    
            <a tabindex="2" onfocus="onFocus();" onblur="onBlur();">
                <ext:ImageButton ID="ImageButton1" runat="server" ImageUrl="resources/images/default.png" />
            </a>
    
            <ext:TextField runat="server" TabIndex="3" />
        </form>
    </body>
    </html>

Similar Threads

  1. [CLOSED] Set Focus to OK button in Ext.Msg.Show
    By speedstepmem3 in forum 1.x Premium Help
    Replies: 1
    Last Post: Jun 13, 2011, 1:12 PM
  2. [CLOSED] Focus X.Msg.Show
    By majunior in forum 1.x Premium Help
    Replies: 2
    Last Post: Apr 27, 2011, 4:02 PM
  3. [CLOSED] Button Focus
    By SymSure in forum 1.x Premium Help
    Replies: 1
    Last Post: Mar 07, 2011, 1:45 PM
  4. Button Focus Cls
    By David Pelaez in forum 1.x Help
    Replies: 2
    Last Post: Feb 25, 2011, 7:07 AM
  5. Replies: 1
    Last Post: Mar 01, 2010, 3:17 AM

Tags for this Thread

Posting Permissions