Enter2Tab in extjs is not possible?

[Fabyo]

Enter 2 tab

javascript pure without framework:

<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:

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:

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

[Animal]

Can you read that code?

[Fabyo]

thanks for help

where to do it

<!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>

[Fabyo]

Enter2Tab in extjs 2.x is not possible?

[Animal]

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.

[fangzhouxing]

see:

http://extjs.com/forum/showthread.php?t=54549

[Animal]

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?

[Condor]

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

I would use:

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.

[Fabyo]

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

[Fabyo]

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

I would use:

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