You found a bug! We've classified it as EXTJS-9286 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member
    Join Date
    Jun 2011
    Location
    St. Louis
    Posts
    212
    Vote Rating
    9
    jimmylu98 will become famous soon enough

      0  

    Default extjs 4.2.0: form panel w fieldset in viewport - setVisible cause scroll reset to top

    extjs 4.2.0: form panel w fieldset in viewport - setVisible cause scroll reset to top


    I have several issues with scrollbar reset to top with extjs 4.x.x. Here is one of them. See attached simple test code. Tested with FF18 and Chrome25.

    extjs 3.4.x does not have this problem.

    The form panel with fieldset is displayed in centre viewport, when set a field visible will cause scroll bar reset to top. The user will have hard time to fill the form.

    The steps to produce the problem:

    (1) Load the attached test code.
    (2) Resize the window to make sure vertical scroll bar appear.
    (3) Move down vertical scroll bar and make sure 'Test Field Visible?' is visible.
    (4) Select 'Test Field Visible?' from 'Yes' to 'No'.
    (5) You will see vertical scroll bar jump back to top.



    PHP Code:
    Ext.onReady(function() {

        var 
    items = [{
            
    xtype'fieldset',
                    
    title'Your Name',
                    
    flex1,
                    
    layout: { type'vbox'align'stretch'pack'start'    },
                    
    items: [{
                              
    xtype'textfield',
                            
    fieldLabel'First'
                    
    }, {
                            
    xtype'textfield',
                            
    fieldLabel'MI'
                    
    }, {
                              
    xtype'textfield',
                            
    fieldLabel'Last'
                    
    }, {
                              
    xtype'textfield',
                            
    fieldLabel'Email Address'
            
    }, {
                
    xtype'combo',
                
    fieldLabel'Test Field Visible?',
                
    name'VisibleTest',
                
    anchor'100%',
                
    value'yes',        
                
    enableKeyEventstrue,
                   
    store: new Ext.data.Store({ 
                    
    fields:[ { name'id'type'string' }, { name'text'type'string' }], 
                    
    data: [ {'id':'no''text':'No'}, {'id':'yes''text':'Yes'} ]
                }),
                    
    queryMode'local',
                    
    displayField'text',
                    
    valueField'id',
                
    editablefalse,
                
    listeners: { select: function(f) { 
                    var 
    f.getValue(), visible = (== 'yes') ? true:false;
                    
    f.next().setVisible(visible); 
                    
    //f.next().setDisabled(visible?false:true); 
                
    }}
                },{
                
    xtype'textfield',
                        
    fieldLabel'Test',
                        
    name'test',
                        
    anchor:'100%' 
            
    }, {
                
    xtype'textareafield',
                
    height200
                    
    }]
        }];

        var 
    viewport Ext.create('Ext.Viewport', {
          
    layout'border',
          
    items: [{
            
    region'center',
            
    xtype'tabpanel',
            
    items: [{ 
                    
    title'Test Form',
            
    xtype'form',
                    
    autoScrolltrue,
                    
    layout'anchor',
                    
    itemsitems
            
    },{
                    
    title'Tab 2',
                   
    html'This is tab 2 content.'
            
    },{
                   
    title'Tab 3',
                    
    html'This is tab 3 content.'
            
    }],
          }]
      });

    }); 

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,641
    Vote Rating
    898
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      -1  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

    Just a little tip I saw with your test is this line:

    Code:
    visible = (v == 'yes') ? true:false
    could be simplified to

    Code:
    visible = v === 'yes'

  3. #3
    Ext JS Premium Member
    Join Date
    Jun 2011
    Location
    St. Louis
    Posts
    212
    Vote Rating
    9
    jimmylu98 will become famous soon enough

      0  

    Default


    Thank you.

  4. #4
    Sencha User
    Join Date
    Nov 2009
    Posts
    16
    Vote Rating
    0
    abegey is on a distinguished road

      0  

    Default


    A way to contourn this issue is disable the object instead of hide it.
    Then add

    disabledCls: 'x-item-disabledinvisible'
    in the object
    And lastly add in css

    .x-item-disabledinvisible {
    opacity: .1 !important;
    }
    This works for buttons. They are disabled but not visible and with a mousover event I enable it again

Thread Participants: 2