1. #1
    Sencha User
    Join Date
    May 2007
    Posts
    113
    Vote Rating
    1
    Fabyo is on a distinguished road

      0  

    Default Enter2Tab in extjs is not possible?

    Enter2Tab in extjs is not possible?


    Enter 2 tab

    javascript pure without framework:


    Code:
    <script type="text/javascript">
    
    function addEvent(obj, evType, fn) {
      if (typeof obj == "string") {
        if (null == (obj = document.getElementById(obj))) {
          throw new Error("Cannot add event listener: HTML Element not found.");
        }
      }
      if (obj.attachEvent) {
        return obj.attachEvent(("on" + evType), fn);
      } else if (obj.addEventListener) {
        return obj.addEventListener(evType, fn, true);
      } else {
        throw new Error("Your browser doesn't support event listeners.");
      }
    }
    
    function iniciarMudancaDeEnterPorTab() {
      var i, j, form, element;
      for (i = 0; i < document.forms.length; i++) {
        form = document.forms[i];
        for (j = 0; j < form.elements.length; j++) {
          element = form.elements[j];
          if ((element.tagName.toLowerCase() == "input")
            && (element.getAttribute("type").toLowerCase() == "submit")) {
            form.onsubmit = function() {
              return false;
            };
            element.onclick = function() {
              if (this.form) {
                this.form.submit();
              }
            };
          } else {
            element.onkeypress = mudarEnterPorTab;
          }
        }
      }
    }
    
    function mudarEnterPorTab(e) {
      if (typeof e == "undefined") {
        var e = window.event;
      }
      var keyCode = e.keyCode ? e.keyCode : (e.wich ? e.wich : false);
      if (keyCode == 13) {
        if (this.form) {
          var form = this.form, i, element;
          // se o tabindex do campo for maior que zero, irá obrigatoriamente
          // procurar o campo com o próximo tabindex
          if (this.tabIndex > 0) {
            var indexToFind = (this.tabIndex + 1);
            for (i = 0; i < form.elements.length; i++) {
              element = form.elements[i];
              if (element.tabIndex == indexToFind) {
                element.focus();
                break;
              }
            }
          }
          // se o tabindex do campo for igual a zero, irá procurar o campo com tabindex
          // igual a 1. Caso não encontre, colocará o foco no próximo campo do formulário.
          else {
            for (i = 0; i < form.elements.length; i++) {
              element = form.elements[i];
              if (element.tabIndex == 1) {
                element.focus();
                return false;
              }
            }
            // se não encontrou pelo tabIndex, procura o próximo elemento da lista
            for (i = 0; i < form.elements.length; i++) {
              if (form.elements[i] == this) {
                if (++i < form.elements.length) {
                  form.elements[i].focus();
                }
                break;
              }
            }
          }
        }
        return false;
      }
    }
    
    // quando terminar o carregamento da página, executa a "iniciarMudancaDeEnterPorTab"
    addEvent(window, "load", iniciarMudancaDeEnterPorTab);
    
    </script>
    Jquery:

    Code:
    jQuery.fn.enter2tab = function() {
        this.keypress(function(e) {
            // get key pressed (charCode from Mozilla, Firefox and Opera / keyCode in IE)
            var key = e.charCode ? e.charCode : (e.keyCode ? e.keyCode : 0);
            if ((key == 13) && /^(input|select)$/i.test(this.nodeName)) {
                var list, next = this.tabIndex + 1;
                list = $("select[@tabIndex='" + next + "'],input[@tabIndex='" + next + "']");
                if (list.size() > 0) {
                    list.get(0).focus();
                    return false;
                } else if (this.form) {
                    var current = this, focusNext = false, gotFocus = false;
                    $($.getAll(this.form, [])).each(function(i, elem) {
                        if (current == elem) {
                            focusNext = true;
                        } else if (focusNext && /^(input|select)$/i.test(elem.nodeName)) {
                            elem.focus();
                            gotFocus = true;
                            return false;
                        }
                    });
                    if (gotFocus) {
                        return false;
                    }
                }
            }
        });
        return this;
    }
    extjs 1.x:

    Code:
    new Ext.KeyMap(document, {
    		key: Ext.EventObject.ENTER,
    		fn: function(k,e){
    			var el=e.getTarget(null,null,true);
    			if(!el.form){return}
    			Ext.each(el.form.elements, function(o){
    				if ( (parseInt(o.getAttribute('tabIndex')) > parseInt(el.getAttribute('tabIndex'))) && (o.offsetWidth > 0) && !/button|submit|reset|hidden|textarea/i.test(el.type) ){
    					o.focus();
    					return false;
    				}
    			});
    		}
    	});
    extjs 2.x ??????


    who can help, I tried to run but could not
    Last edited by Condor; 10 Feb 2009 at 1:43 AM. Reason: Please post using [ CODE ] tags!

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Can you read that code?

  3. #3
    Sencha User
    Join Date
    May 2007
    Posts
    113
    Vote Rating
    1
    Fabyo is on a distinguished road

      0  

    Default


    thanks for help

    where to do it


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
    <head>
    <title>Enter</title>
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="pt-BR" />
    <link href="styles/ext-all.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="scripts/ext-base.js"></script>
        <script type="text/javascript" src="scripts/ext-all.js"></script>
    
        <script type="text/javascript">    
            Ext.onReady(function(){            
                Ext.query('input[@type=text]:first')[0].focus();
                
                new Ext.KeyNav(document, {
                    'enter': function(e){
                        var el = e.target;
                        if(!el.form) return;
                        
                        Ext.each(el.form.elements, function(o,i){
                            //if(o.style.display != 'none' && o.style.visibility != 'hidden' && o.disabled == false && o.getAttribute('readonly') == null && !/button|submit|reset|hidden|textarea/i.test(o.type)){
                            //if (o.name == el.name)
                            //break;
                            //i = (i + 1) % o.length;
                            //el.form.elements[i].focus();
                            //return false;
                            //}
                        });
                    }                
                    ,scope : this
                });
            });    
        </script>
    </head>    
    <body>
    
        <form action="#" name="form" id="form" method="post">
            <label for="campo1">Campo 1 </label><input type="text" name="campo1" id="campo1" /><br />
            <label for="campo2">Campo 2 </label><input type="text" name="campo2" id="campo2" style="display:none;" /><br />
            <label for="campo3">Campo 3 </label><input type="text" name="campo3" id="campo3" disabled="disabled" /><br />
            <label for="campo4">Campo 4 </label><input type="text" name="campo4" id="campo4" style="visibility:hidden" /><br />
            <label for="campo5">Campo 5 </label><input type="text" name="campo5" id="campo5" readonly="readonly" /><br />
            <label for="campo6">Campo 6 </label><input type="checkbox" name="campo6" id="campo6" /><br />
            <label for="campo7">Campo 7 </label><input type="radio" name="campo7" id="campo7" /><br />
            <label for="campo8">Campo 8 </label><input type="text" name="campo8" id="campo8" /><br />
            
            <label for="campo9">Campo 9 </label><textarea name="campo9" id="campo9"></textarea><br />
            
            <label for="campo10">Campo 10 </label><input type="text" name="campo10" id="campo10" /><br />
            
            <input type="submit" name="botao" id="botao" value="Enviar" />
        </form>
    
    </body>
    </html>
    Last edited by Condor; 10 Feb 2009 at 1:43 AM. Reason: Please post using [ CODE ] tags!

  4. #4
    Sencha User
    Join Date
    May 2007
    Posts
    113
    Vote Rating
    1
    Fabyo is on a distinguished road

      0  

    Default


    Enter2Tab in extjs 2.x is not possible?

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Everything is possible. It's all just an HTML document.

    Unfortunately, we have no idea what you want, or what your code does. It's unreadable.

  6. #6

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    So you're looping through the form's fields, setting focus on any one which has a tabIndex > the current field's tabIndex?

    So when you step through it in Firebug, where does it go wrong?

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    1. Why aren't you calling e.stopEvent()?
    2. Why are you excluding the <textarea> tag?

    I would use:
    Code:
    new Ext.KeyNav(document, {
    	enter: function(e){
    		var target = e.getTarget();
    		if(target.form){
    			e.stopEvent();
    			var els = target.form.elements, len = target.form.length;
    			for(var p = 0; p < len; p++){
    				if(els[p] == target){
    					break;
    				}
    			}
    			for(var i = 1; i < len; i++){
    				var el = els[++p % len];
    				if(el.style.display != 'none' && el.style.visibility != 'hidden'
    						&& !el.disabled && !el.getAttribute('readonly')
    						&& !/button|submit|reset|hidden/i.test(el.type)){
    					el.focus();
    					break;
    				}
    			}
    		}
    	}
    });
    ps. both your and my code are ignoring the tabIndex.

  9. #9
    Sencha User
    Join Date
    May 2007
    Posts
    113
    Vote Rating
    1
    Fabyo is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    Everything is possible. It's all just an HTML document.

    Unfortunately, we have no idea what you want, or what your code does. It's unreadable.
    I want to change the tab to enter

  10. #10
    Sencha User
    Join Date
    May 2007
    Posts
    113
    Vote Rating
    1
    Fabyo is on a distinguished road

      0  

    Default


    Quote Originally Posted by Condor View Post
    1. Why aren't you calling e.stopEvent()?
    2. Why are you excluding the <textarea> tag?

    I would use:
    Code:
    new Ext.KeyNav(document, {
        enter: function(e){
            var target = e.getTarget();
            if(target.form){
                e.stopEvent();
                var els = target.form.elements, len = target.form.length;
                for(var p = 0; p < len; p++){
                    if(els[p] == target){
                        break;
                    }
                }
                for(var i = 1; i < len; i++){
                    var el = els[++p % len];
                    if(el.style.display != 'none' && el.style.visibility != 'hidden'
                            && !el.disabled && !el.getAttribute('readonly')
                            && !/button|submit|reset|hidden/i.test(el.type)){
                        el.focus();
                        break;
                    }
                }
            }
        }
    });
    ps. both your and my code are ignoring the tabIndex.
    Thanks for your code, ja ta working with him, but now ignore the field textarea