Results 1 to 6 of 6

Thread: How to disable TAB in masked elements

  1. #1

    Default How to disable TAB in masked elements

    Hi guys,

    I have a very common issue and probably some of you have already solve it and can help me

    I'm dealing with some requirements in my web portal, basically, I have some panels that could be changed to edit mode. So, whenever edit mode is triggered I should mask/disable all elements behind it.

    I have worked with spotlight, mask and modal window, but none of them disable the TAB button. So even when elements are somehow masked it is still possible to reach them using TAB.

    In the other hand, I still want TAB to be enabled for my panel in edit mode. It is an usability requirement.

    This is my first attempt of doing it:

    Code:
    var skipCascadeDisabler = function(disable, skipElementId){
      
            // my parent xtypes that should not be disabled.
            var invalidXTypes = ['tpage', 'panel', 'tabpanel'];
                                                            
            // disable/enable function which will skip my edit panel and it is child elements.
            var fn = function (disable, skipElementId) {
                
                if (this.id == skipElementId){
                	return false;
                }
                else if (this.xtype && invalidXTypes.indexOf(this.xtype) == -1) {
                  disable ? this.disable(): this.enable();
                }
            };
      
            // My root ViewPort where all my elements are build
            var vp = Ext.getCmp('_masterViewPort');
            
            vp.cascade(fn, null, [disable, skipElementId]);
      };
    It is not bad indeed, but still need some improvements in how to handle already disabled fields..., but questions are: is this the only direction to go? Is there any other approach? Didn't ExtJs take care about this issue?

    Thanks in advance.

  2. #2
    Sencha User
    Join Date
    Jan 2011
    Posts
    549

    Default

    I think we would probably need some sort of visual aid to help us understand what you are trying to achieve - as sometimes you state you want the tab buttons enabled, then in other scenarios you want these disabled - but we obviously have no idea what these scenarios are!

    If you could explain what you're trying to achieve, then a better solution might be suggested, rather than going down an overcomplicated route...

  3. #3

    Default

    Piece of cake!

    Just go to this ExtJs sample:

    http://docs.sencha.com/ext-js/4-1/#!/example/form/contact-form.html

    When you click in the "contact us" button a modal dialog will popup. Now start hit Tab-key and see that you are able to reach and trigger elements external to the dialog. That is what I can't allow in my application, but in the other hand, I still want to use Tab-key in the dialog inner elements.

    Hope this helps and thanks for the fast reply. I really need to close this issue! ;-)

  4. #4
    Sencha User
    Join Date
    Jan 2011
    Posts
    549

    Default

    Ohhhh, you mean the "Tab" key on the keyboard - I was assuming you were meaning an ext tab panel

    It's a pretty non-standard request - but I would guess the simplest way to achieve this would be to add tabindex="-1" to all elements you don't wish to be tabbed to - but you'd obviously have to dynamically add and remove this depending on when the modal was shown.

    i.e. Add/remove tabindex=-1 to all links and form inputs except inside your modal window.

    e.g:
    http://stackoverflow.com/questions/5...a-specific-div

  5. #5

    Default

    Yeah, tab-key, sorry! (own my english...rs)

    So, in the end, you're saying my method is ok, right?

    And man, thanks for the help!

  6. #6
    Sencha User
    Join Date
    Jan 2011
    Posts
    549

    Default

    As long as it's working for you, then I guess so!

    I would personally "cheat", use jQuery and add/remove the tabindex attribute to all <a> and <input> upon showing and hiding your modal - but there's always more than one way to achieve a goal

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •