[2.0a1][CLOSED] Form Fields, Tab Panels and Error Indicators

[danh2000]

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]

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]

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]

Great, Thanks Jack - That solved it.