Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Enter2Tab in extjs is not possible?

  1. #1
    Sencha User
    Join Date
    May 2007
    Posts
    113
    Vote Rating
    1
      0  

    Default 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 prximo 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 no encontre, colocar o foco no prximo campo do formulrio.
          else {
            for (i = 0; i < form.elements.length; i++) {
              element = form.elements[i];
              if (element.tabIndex == 1) {
                element.focus();
                return false;
              }
            }
            // se no encontrou pelo tabIndex, procura o prximo 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 pgina, 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
    Bédoin/Redwood City
    Posts
    30,644
    Vote Rating
    61
      0  

    Default

    Can you read that code?
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  3. #3
    Sencha User
    Join Date
    May 2007
    Posts
    113
    Vote Rating
    1
      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
      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
    Bédoin/Redwood City
    Posts
    30,644
    Vote Rating
    61
      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.
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  6. #6

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,644
    Vote Rating
    61
      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?
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    123
      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
      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
      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

Page 1 of 2 12 LastLast

Posting Permissions

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