PDA

View Full Version : Need help with understanding forms init and field order/inital focus



mabra
12 Jun 2011, 12:16 PM
Hi All !

The best for me would be an article, which explains forms in detail [no books please:These omit
these things completely {I have two} ]. I cannot find one and reading the docs all the time.

I have a tabpanel with initial one [fixed] tab, which contains a form. These forms fields order is,
what I cannot determine. I tried to start with "tabIndex" zero or one and I really need to skip some
fields under some circumstances. The Ext docs dont show, what is the first number. When my form
opens, no cursor is initially visible. How is that done? Is the focus somewhere else?? If I refer to the
first field and "focus()" it, the first ugly appearance is the validation mark. This should really not
appear, until someone typed something [wrong content]. So "focus()" is focus and not blur, so why
does this mark appear?

If I tab through the fields [after settings the mouse into one], even the browsers address bar will be
part of this tabbing. This is really bad, I need something, which tabbes through my fields only, until
I close this form.

Any help would be really great!

Thanks a lot++mabra

diegotdai
13 Jun 2011, 12:16 PM
just use the tabIndex property on your form elements, there is many ways to achieve what you want (skipping form fields), say for instance all form fields you want to skip don't have the property allowBlank, you could after the form is rendered, loop through your elements and apply the listener:focus on each that are not required...but it really depends on your needs.


new Ext.FormPanel({
title: 'Simple Form',
renderTo: document.body,
defaultType: 'textfield',
items: [
{
name: 'fieldName',
fieldLabel: 'Name',
allowBlank: false,
tabIndex: 1
}, {
fieldLabel: 'Surname',
listeners: {
focus: function() {
this.nextSibling().focus();
}
}
}, {
fieldLabel: 'Email',
tabIndex: 2
}
],
buttons: [
{
text: 'Save',
tabIndex: 3
}, {
text: 'Close',
tabIndex: 4,
handler: function() {

}
}
],
listeners: {
afterrender: function(form) {
form.getForm().findField('fieldName').focus();
}
}
});


Hope this helps...

Also, note that on the code above, the tab will only work on the form as long your fields have the tabIndex property (apart from the ones you want to skip, have listener etc...). You should also check the legislation on your jurisdiction for disability discrimination legislation.

Hope this helps.

mabra
16 Jun 2011, 10:58 AM
Hello !

Much thanks! This gave me a little more insight for my next steps!
Astoundingly, a ".fcous(false, 50" did the trick for me. It is not in
the ext.docs :-( but found it somewhere.

br++mabra