Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    33
    Vote Rating
    0
    santosr666 is on a distinguished road

      0  

    Default Answered: How to disable TAB in masked elements

    Answered: 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. Stop the event... here is a simple example:

    Code:
    function cancelTab(e) {
        e.stopEvent();
    }
    
    new Ext.form.Panel({
        renderTo : document.body,
        items    : [
            {
                xtype      : 'textfield',
                fieldLabel : 'Test'
            },
            {
                xtype      : 'textfield',
                fieldLabel : 'Test2'
            },
            {
                xtype      : 'textfield',
                fieldLabel : 'Test3'
            },
            {
                xtype   : 'button',
                text    : 'Disable TAB',
                handler : function (btn) {
                    var form = btn.up('form');
    
                    form.el.on('keydown', cancelTab, form);
                }
            },
            {
                xtype   : 'button',
                text    : 'Enable TAB',
                handler : function (btn) {
                    var form = btn.up('form');
    
                    form.el.un('keydown', cancelTab, form);
                }
            }
        ]
    });

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,519
    Answers
    3447
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Stop the event... here is a simple example:

    Code:
    function cancelTab(e) {
        e.stopEvent();
    }
    
    new Ext.form.Panel({
        renderTo : document.body,
        items    : [
            {
                xtype      : 'textfield',
                fieldLabel : 'Test'
            },
            {
                xtype      : 'textfield',
                fieldLabel : 'Test2'
            },
            {
                xtype      : 'textfield',
                fieldLabel : 'Test3'
            },
            {
                xtype   : 'button',
                text    : 'Disable TAB',
                handler : function (btn) {
                    var form = btn.up('form');
    
                    form.el.on('keydown', cancelTab, form);
                }
            },
            {
                xtype   : 'button',
                text    : 'Enable TAB',
                handler : function (btn) {
                    var form = btn.up('form');
    
                    form.el.un('keydown', cancelTab, form);
                }
            }
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    33
    Vote Rating
    0
    santosr666 is on a distinguished road

      0  

    Default


    Well, it is a nice approach indeed.

    But I would still need to go to all forms in the page which are not the current one and the disable also help me out with a mask requirement I had.

    Thanks for replying. This has been added as another tool in my toolbox.

    Cheers.

Thread Participants: 1

Tags for this Thread