What's New?

form navigation problem using TAB key when adding ext.net to the project

  1. #1
    Mar 27, 2016, 1:04 AM

    form navigation problem using TAB key when adding ext.net to the project

    I am facing a strange problem. I have created a new project to learn ext.net. Initially, when I do not include ext.net in the project I can navigate the
    textboxes, radio buttons & buttons using TAB key of the form.

    But when I add ext.net, the textboxes can be navigated by the TAB key but the radio buttons and the buttons can not be focused using TAB key. The buttons , radio buttons are not focused while navigation the form. Why is this happening?

    In my master page, when I comment 
    <ext:ResourceManager runat="server" />
    this line, all the controls can be navigated using the TAB key but as I uncomment the above line, the buttons and the radio buttons can not be focused using TAB key.

    What is this problem , how can I solve this problem? Please help.
  2. #2
    Mar 28, 2016, 2:20 PM
    Hello @hadoop!

    Your items are not being ignored. It is just that the Ext.NET's theme overrides the CSS properties to show the dotted "outline" on the elements.

    Look at this example:
    <%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title></title>
    <style type="text/css">
        .focusable:focus {
            outline: dashed;
            outline-color: blue;
            outline-width: thin
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ext:ResourceManager runat="server" Theme="Gray" />
        Text: &nbsp;
        <input type="text" name="textBox" value="5" />
        <br />
        Check: &nbsp;
        <input type="checkbox" name="checkBox" checked="checked" class="focusable" />
        <input type="checkbox" name="checkBox" class="focusable" />
        <br />
        <input type="radio" name="radGp1" value="a" checked="checked" class="focusable" />Value A
        <br />
        <input type="radio" name="radGp1" value="b" class="focusable" />Value B
        <br />
        <input type="radio" name="radGp1" value="c" class="focusable" />Value C
        <br />
        <input type="button" value="Click" class="focusable" />
    </div>
    </form>
</body>
</html>
    Here, I explicitly bound the elements to the focusable CSS class I defined in the beginning of the page.

    This is done (a) because of the complete theme restyling (b) Ext.NET handles the focusing feedback on its own components so, letting the browser-default highlight on the focused elements will look strange on Ext.NET when it combines several HTML elements in one component.

    So, I see two ways out of this for you:
    - Maintain a master page for Ext.NET and non-ext.net (nor styled) pages (maybe you don't want this as using the theme in one page and not using it on another may make you site look strange).
    - Use only Ext.NET components on you page.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Mar 29, 2016, 8:55 AM

    form navigation problem using TAB key when adding ext.net to the project

    Thanks fabricio.murta. It worked. I've one question though.

    for radio buttons, it is only focussing on the radio buttons, how can I show it as selected. For selection purpose, I've to use ARROW key. What I want
    is when the radio button is selected initially it should be selected as well. After that the user can use ARROW key for changing the option. 
    <ext:ResourceManager runat="server" />
   
 <style type="text/css">
        .focusable:focus {
            outline: dashed;
            outline-color: blue;
            outline-width: thin
        }
    </style>

 <ext:RadioGroup 
                    runat="server"
                    DataIndex="gender" 
                    ColumnsNumber="1">
                    <Items>
                        <ext:Radio runat="server" BoxLabel="Male" InputValue="true" />
                        <ext:Radio runat="server" BoxLabel="Female" InputValue="false" />
                    </Items>
                </ext:RadioGroup>
    Is it possible?
    Please suggest.
    Last edited by hadoop; Mar 29, 2016 at 9:10 AM. Reason: adding code
  4. #4
    Mar 29, 2016, 1:14 PM
    Hello @Hadoop!

    It works exactly as the ordinary radio buttons in this aspect:
    If none is checked and the user just focus the group, none is selected. On first keyboard interaction (that is, arrow keys) it is selected.

    If you want one selected initially, for example first, just add the Checked="true" property to the <ext:Radio /> component.
    You can always use intellisense for your advantage on Ext.NET components. Experimenting with options and also browsing our examples explorer can give you insightful headstart on the pages you can build.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter

Similar Threads

  1. calendar panel datepicker navigation problem
    By azat in forum 1.x Help
    Replies: 1
    Last Post: Jul 27, 2015, 2:48 PM
  2. [CLOSED] Custom Search Navigation problem
    By isozworld in forum 3.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 23, 2015, 3:29 PM
  3. [CLOSED] tabPanel: navigation problem
    By supera in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 18, 2012, 11:50 AM
  4. [CLOSED] GridPanel PagingToolbar Navigation Problem
    By supera in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Jan 23, 2012, 2:49 PM
  5. Problem in deploying the project
    By OSSAGHO in forum 1.x Help
    Replies: 2
    Last Post: Sep 09, 2010, 4:54 AM

Tags for this Thread

Posting Permissions