[CLOSED] [1.0] Modal window tabindex

Page 2 of 3 FirstFirst 123 LastLast
  1. #11
    My steps:

    1. Click on the button => Window appears.
    2. Press Shift + Tab => focus moves on top.
    3. Press Shift + Tab again and again => focus returns to DateField.

    To be brief, for me all works as expected.

    What browser do you test under? I test under IE9 and FF 3.6.16.
    Last edited by Daniil; Apr 22, 2011 at 5:23 AM.
  2. #12
    I did find issue that was created when my code example was cut&pasted. Besides that issue, I don't know what to say except that the blur function is called first when I use the date control and that sets "focused" to false. If "focused" is false then focus is not moved to button2, and therefore goes to button1 on the parent page.
    In your steps you say that focus "moves on top". On top of what? When shift+tab is pressed, when on the datefield, focus should move to the "some button" button (button2). In my environment, it moves to button1 on the parent page. I am perplexed at how your focus behavior could differ from mine.

    Here is the corrected code:
    @ Page Language="VB" %>
     
    <%@ 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 id="Head1" runat="server"> 
        <title>Ext.Net Example</title> 
     
        <script type="text/javascript">
            var onFocus = function (e, t, o) {
                this.focused = true;
            }
     
            var onBlur = function (e, t, o) {
                this.focused = false;
            } 
        </script> 
     
    </head> 
    <body> 
        <form id="Form1" runat="server"> 
        <ext:ResourceManager ID="ResourceManager1" runat="server" /> 
        <ext:KeyMap ID="KeyMap1" runat="server" Target="={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}"> 
            <ext:KeyBinding> 
                <Keys> 
                    <ext:Key Code="TAB"/> 
                </Keys> 
                <Listeners> 
                    <Event Handler="if (!e.shiftKey) { 
                                        if (Button2.focused) { 
                                            e.stopEvent(); 
                                            DateField1.focus(); 
                                        } 
                                    } else { 
                                        if (DateField1.focused) { 
                                            e.stopEvent(); 
                                            Button2.focus(); 
                                        } 
                                    }" /> 
                </Listeners> 
            </ext:KeyBinding> 
        </ext:KeyMap> 
        <ext:Button ID="Button1" runat="server" Text="Show window"> 
            <Listeners> 
                <Click Handler="Window1.show();" /> 
            </Listeners> 
        </ext:Button> 
        <ext:Window
            ID="Window1"
            runat="server"
            Modal="true"
            Height="300"
            Hidden="true"> 
            <Items> 
                <ext:DateField ID="DateField1" runat="server"> 
                    <Listeners> 
                        <Blur Fn="onBlur" /> 
                        <Focus Fn="onFocus" /> 
                    </Listeners> 
                </ext:DateField> 
                <ext:TextField ID="TextField1" runat="server" /> 
                <ext:TextField ID="TextField2" runat="server" /> 
            </Items> 
            <Buttons> 
                <ext:Button ID="Button2" runat="server" Text="Some buttom"> 
                    <Listeners> 
                        <AfterRender Handler="this.btnEl.on('focus', onFocus, this); 
                                              this.btnEl.on('blur', onBlur, this);" /> 
                        <Click Handler="alert('Hello!');" /> 
                    </Listeners> 
                </ext:Button> 
            </Buttons> 
            <Listeners> 
                <Show Handler="DateField1.focus();" Delay="100" /> 
            </Listeners> 
        </ext:Window> 
        </form> 
    </body> 
    </html>
  3. #13
    In your steps you say that focus "moves on top". On top of what? When shift+tab is pressed, when on the datefield, focus should move to the "some button" button (button2).
    On some place at the top of DateField :) I just can't see where it is. Actually, I forgot that the button must get the focus in the example I made:) Apologize.

    To fix the problem, please set Delay="1" for Blur of DateField.

    Example
    <Blur Fn="onBlur" Delay="1" />
  4. #14

    [CLOSED]

    We use that on "Show". I did not think to see if it was an argument of the other events. Works as expected now. Thanks Danill
  5. #15
    "Delay" is a good helper, especially, if the problem is related to events order.
  6. #16

    Add KeyMap Listener in codebehind

    How can I add the listener in code behind?
    My intention is to encapsulate this functionality into my popup master page.
    I have defined the KeyMap in markup and would like to add the listener dynamically.

    <ext:KeyMap ID="KeyMap1" runat="server" Target="={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}"> 
        <ext:KeyBinding> 
            <Keys> 
                <ext:Key Code="TAB"/> 
            </Keys> 
        </ext:KeyBinding>            
    </ext:KeyMap>
    and here is a snippet where I am attempting to add the listener.
            Dim sb As New StringBuilder
            Dim scrpt As String
            scrpt = "if (!e.shiftKey) {if ([LastBtnId].focused) {e.stopEvent();[FirstContrlId].focus();}} else {if ([FirstContrlId].focused) {e.stopEvent();[LastBtnId].focus();}}"
     
            sb.Append(scrpt.ToString())
            sb.Replace("[FirstContrlId]", fcId.ToString()) 'replace with control name
            sb.Replace("[LastBtnId]", lbId.ToString()) 'replace with control name
     
            Dim func As New Ext.Net.JFunction(sb.ToString())
     
            KeyMap1.On("keydown", func)
    When I tab in my popup, I get a javascript error that "fn is undefined" in the Ext.KeyMap.prototype code.
  7. #17
    The following code should work during DirectEvent, but doesn't.
    KeyBinding k = new KeyBinding();
    k.Keys.Add(new Key()
    {
        Code = KeyCode.TAB
    });
    k.Listeners.Event.Handler = "alert('Hello!');";
    this.KeyMap1.AddKeyBinding(k);
    We are investigating.
  8. #18
    Any update, or possible workaround, on this latest issue?
  9. #19
    Quote Originally Posted by Daniil View Post
    The following code should work during DirectEvent, but doesn't.
    KeyBinding k = new KeyBinding();
    k.Keys.Add(new Key()
    {
        Code = KeyCode.TAB
    });
    k.Listeners.Event.Handler = "alert('Hello!');";
    this.KeyMap1.AddKeyBinding(k);
    We are investigating.
    Fixed in SVN, please update and retest.
    If you cannot update then use the following code
    this.KeyMap1.Call("addBinding", new JRawValue(new ClientConfig().Serialize(k)));
  10. #20
    I have updated to the new SVN. When I run the code:

    se = "if (!e.shiftKey) {if ([LastBtnId].focused) {e.stopEvent();[FirstContrlId].focus();}} else {if ([FirstContrlId].focused) {e.stopEvent();[LastBtnId].focus();}}"         
    sb.Append(se.ToString())        
    sb.Replace("[FirstContrlId]", fcId.ToString())        
    sb.Replace("[LastBtnId]", lbId.ToString())        
    Dim k As New KeyBinding()        
    k.Keys.Add(New Key() With { _            
        .Code = KeyCode.TAB _        
    })        
    k.Listeners.[Event].Handler = sb.ToString()        
    Me.KeyMap1.AddKeyBinding(k)
    in the page load, I get "This operation requires an AjaxRequest" exception on the last line of code above.

    If I substitute the workaround code:
    Me.KeyMap1.[Call]("addBinding", New JRawValue(New ClientConfig().Serialize(k)))
    for that line, I get "KeyMap1 is not defined" exception in the Ext.net.ResourceMgr.init argument string.
Page 2 of 3 FirstFirst 123 LastLast

Similar Threads

  1. [CLOSED] Modal window and form tag
    By sbg in forum 2.x Legacy Premium Help
    Replies: 8
    Last Post: Oct 28, 2013, 6:39 AM
  2. Replies: 5
    Last Post: Apr 20, 2012, 6:20 AM
  3. [CLOSED] Ext.Window: Question about clicking outside a modal Window
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 07, 2012, 6:00 AM
  4. [CLOSED] X.Msg with Modal Window
    By jwf in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 20, 2011, 9:22 PM
  5. Modal Window
    By erey in forum 1.x Help
    Replies: 0
    Last Post: Mar 29, 2010, 12:06 PM

Tags for this Thread

Posting Permissions