PDA

View Full Version : [2.0a1][CLOSED] Form Fields, Tab Panels and Error Indicators



danh2000
4 Oct 2007, 4:30 AM
Hi,

Before the bug, I must say that I am loving Ext 2.0 - it's just so much more intuitive - I'm finding it much easier to work with.

The issue I have found is where the form error indicator can be rendered incorrectly.

Please see attached image, code, and steps to reproduce.

Code:


...
var usernameField = new Ext.form.TextField({
fieldLabel: 'Username',
name: 'login',
maxLength: 20,
width:188,
allowBlank: false,
blankText: 'Your Username is required',
validationDelay: 500
});

usernameField.on('specialkey', function(t,e) {
if(e.getKey() == 13)
{
doLogin();
}
});

var passwordField = new Ext.form.TextField(
{
name: 'password',
fieldLabel: 'Password',
inputType: 'password',
width: 188,
allowBlank: false,
blankText: 'Your Password is required',
validationDelay: 500
});

passwordField.on('specialkey', function(t,e) {
if(e.getKey() == 13){
doLogin();
}
});

var loginForm = new Ext.form.FormPanel({
title: 'Login',
baseCls: 'x-plain',
labelWidth: 133,
labelAlign: 'right',
buttonAlign:'right',
url:'save-form.php',
defaultType: 'textfield',
items: [usernameField,passwordField],
buttons: [{
text: 'Login'
}]
});

var emailField = new Ext.form.TextField({
fieldLabel: 'Email',
name: 'email',
maxLength: 20,
width:188,
allowBlank: false,
blankText: 'Your Email is required',
vtype: 'email',
validationDelay: 500
});

emailField.on('specialkey', function(t,e) {
if(e.getKey() == 13)
{
doReminder();
}
});
var reminderForm = new Ext.form.FormPanel({
title: 'Reminder',
baseCls: 'x-plain',
labelWidth: 133,
labelAlign: 'right',
buttonAlign:'right',
url:'save-form.php',
defaultType: 'textfield',
items: emailField,
buttons: [{
text: 'Remind Me'
}]
});

var header = new Ext.Panel({
region: 'north',
border: false,
height: 80,
bodyStyle: 'background:transparent;',
html: '<img src="images/login-header.png" height="75" width="426">'
});

var tp = new Ext.TabPanel({
autoTabs:true,
activeTab:0,
deferredRender:false,
border:false,
region: 'center',
bodyStyle: 'background:transparent;padding:10px;',
items: [loginForm,reminderForm]
})
var window = new Ext.Window({
title: 'tmWMS',
animateTarget: Ext.getBody(),
width: 440,
height: 241,
resizable: false,
closable: false,
layout: 'border',
modal: true,
iconCls: 'wms-icon',
bodyStyle:'padding:5px;',
items: [header,tp]
});
window.show();
...


Steps to Reproduce

1. Set focus to the 'Username' field (click it).
2. Click the 'Reminder' tab.
3. Drag the window.
4. Click the 'Login' tab.

I hope this helps, let me know if you need any further info.

danh2000
4 Oct 2007, 4:38 AM
Sorry, I'm dumb - I've only just noticed that the forum has been split into a seperate Ext 2.0 section.

Can someone pleae move this to the Ext 2.0 bugs forum.

Thanks.

jack.slocum
4 Oct 2007, 5:20 AM
There error icon uses x/y offset positioning to mark valid state. If it's in a tab with display noe, it won't work.

Try adding hideMode: 'offsets' to the panels in your TabPanel and see if that corrects it.

danh2000
4 Oct 2007, 5:25 AM
Great, Thanks Jack - That solved it.