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

    Ext.ux.AutoTab


    Somebody in the help forum asked for an autotab plugin and I thought that more people would like to use this.

    This plugin will select the next field if the current field is complete (e.g. like when entering a Window XP registration code).

    Usage:
    1. Give all your fields a tabIndex (so the plugin knows the order of the fields)
    2. Add the plugin to the fields (either field by field or by using form defaults)
    3. Override the isComplete function to return true when the field is complete.

    Plugin:

    Code:
    Ext.ux.AutoTab = function(config){
    	Ext.apply(this, config);
    	Ext.ux.AutoTab.superclass.constructor.call(this);
    };
    
    Ext.extend(Ext.ux.AutoTab, Ext.util.Observable, {
    	init: function(field) {
    		this.field = field;
    		
    		this.field.on('render', function() {
    			this.field.el.on('keyup', this.onKeyup, this);
    		}, this);
    	},
    	
    	onKeyup: function(e) {
    		if(this.isComplete(this.field)) {
    			this.nextField();
    		}
    	},
    	
    	isComplete: function(field) {
    		return false;
    	}
    	
    	nextField: function() {
    		var els = this.field.el.dom.form.elements;
    		for(var i = 0; i < els.length; i++) {
    			if (els[i].tabIndex == this.field.el.dom.tabIndex + 1) {
    				els[i].focus();
    				break;
    			}
    		}
    	}
    });
    Example:

    Code:
    var f = new Ext.form.FormPanel({
    	title: 'Form',
    	height: 200,
    	width: 300,
    	items: [{
    		xtype: 'textfield',
    		fieldLabel: 'Text 1',
    		name: 'field1',
    		tabIndex: 1,
    		plugins: [
    			new Ext.ux.AutoTab({
    				isComplete: function(field) {
    					return field.getRawValue().length >= 6;
    				}
    			})
    		]
    	},{
    		xtype: 'textfield',
    		fieldLabel: 'Text 2',
    		name: 'field2',
    		tabIndex: 2
    	}]
    });
    
    Ext.onReady(function() {
    	f.render(document.body);
    });
    Last edited by Condor; 26 Jan 2008 at 7:17 AM. Reason: Small typo

  2. #2
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    shouldn't that be
    Code:
    	onKeyup: function(e) {
    		if(this.isComplete(this.field)) {
    			this.nextField();
    		}
    	},

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


    Quote Originally Posted by mystix View Post
    shouldn't that be
    Yes, I don't know where that came from. I thought I copied it from a working example.

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,358
    Vote Rating
    127
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Cool plugin
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  5. #5
    Ext User reang's Avatar
    Join Date
    Mar 2007
    Location
    Indonesia
    Posts
    60
    Vote Rating
    0
    reang is on a distinguished road

      0  

    Default


    i can't implement this plugin, can some one help me???

    sory for my english..

  6. #6
    Sencha User
    Join Date
    Jul 2011
    Posts
    3
    Vote Rating
    0
    navaneeth003 is on a distinguished road

      0  

    Default


    Hi Condor,

    Thanks for the plug-in. It is working nice for me on forms.
    Can I apply this to EditorGridpanels also?

    I just tried but it is not working for me on EditorGridpanels.
    I am using EXT 3.3.1.

    Thanks in advance