1. #1
    Ext JS Premium Member
    Join Date
    May 2007
    Posts
    698
    Vote Rating
    3
    danh2000 is on a distinguished road

      0  

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

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


    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:
    PHP Code:
    ...
    var 
    usernameField = new Ext.form.TextField({
            
    fieldLabel'Username',
            
    name'login',
              
    maxLength20,
            
    width:188,
            
    allowBlankfalse,
            
    blankText'Your Username is required',
              
    validationDelay500
        
    });
            
        
    usernameField.on('specialkey', function(t,e) {
            if(
    e.getKey() == 13)
            {        
                
    doLogin();
            }
        });
        
        var 
    passwordField = new Ext.form.TextField(
        {
            
    name'password',
            
    fieldLabel'Password',
            
    inputType'password',
            
    width188,
            
    allowBlankfalse,
            
    blankText'Your Password is required',
              
    validationDelay500
        
    });
        
        
    passwordField.on('specialkey', function(t,e) {
            if(
    e.getKey() == 13){        
                
    doLogin();
            }
        });
        
        var 
    loginForm = new Ext.form.FormPanel({
            
    title'Login',
            
    baseCls'x-plain',
            
    labelWidth133,
            
    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',
              
    maxLength20,
            
    width:188,
            
    allowBlankfalse,
            
    blankText'Your Email is required',
            
    vtype'email',
              
    validationDelay500
        
    });
            
        
    emailField.on('specialkey', function(t,e) {
            if(
    e.getKey() == 13)
            {        
                
    doReminder();
            }
        });
        var 
    reminderForm = new Ext.form.FormPanel({
            
    title'Reminder',
            
    baseCls'x-plain',
            
    labelWidth133,
            
    labelAlign'right',
            
    buttonAlign:'right',
            
    url:'save-form.php',
            
    defaultType'textfield',
            
    itemsemailField,
            
    buttons: [{
                
    text'Remind Me'
            
    }]
        });
        
        var 
    header = new Ext.Panel({
            
    region'north',
            
    borderfalse,
            
    height80,
            
    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',
            
    animateTargetExt.getBody(),
            
    width440,
            
    height241,
            
    resizablefalse,
            
    closablefalse,
            
    layout'border',
            
    modaltrue,
            
    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.
    Attached Images
    Last edited by danh2000; 4 Oct 2007 at 5:26 AM. Reason: Solved

  2. #2
    Ext JS Premium Member
    Join Date
    May 2007
    Posts
    698
    Vote Rating
    3
    danh2000 is on a distinguished road

      0  

    Default


    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.

  3. #3
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    16
    jack.slocum will become famous soon enough

      0  

    Default


    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.
    Jack Slocum
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

  4. #4
    Ext JS Premium Member
    Join Date
    May 2007
    Posts
    698
    Vote Rating
    3
    danh2000 is on a distinguished road

      0  

    Default


    Great, Thanks Jack - That solved it.

Thread Participants: 1