PDA

View Full Version : Ext.ux.AutoTab



Condor
26 Jan 2008, 5:04 AM
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:


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:


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);
});

mystix
26 Jan 2008, 6:19 AM
shouldn't that be


onKeyup: function(e) {
if(this.isComplete(this.field)) {
this.nextField();
}
},


:-?

Condor
26 Jan 2008, 7:18 AM
shouldn't that be

Yes, I don't know where that came from. I thought I copied it from a working example.

aconran
26 Jan 2008, 1:59 PM
Cool plugin

reang
19 Feb 2008, 1:55 AM
i can't implement this plugin, can some one help me???

sory for my english..

navaneeth003
2 Jul 2011, 7:06 AM
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:)