Results 1 to 3 of 3

Thread: [2.2.0 Beta2] Cosmetic flaw: Slider thumb jumps from 0 to default value when visible

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1

    Default [2.2.0 Beta2] Cosmetic flaw: Slider thumb jumps from 0 to default value when visible

    I noticed this after testing my project on my iPhone 4. This effect is even more visible on an iPhone 3 (slower device).

    If i add a form panel with a slider in it to the Ext.Viewport and switch to it, the slider thumb jumps from it's initial zero position to the value defined. This happens only when rendering the panel for the first time. My following testcase defines two panels with buttons to switch between them. The old panel will always be destroyed to demonstrate the effect.

    To reproduce this just create a fresh project from 2.2. Beta2 and paste the code to the "launch" function inside app.js and switch back and forth:

    PHP Code:
        ...

        
    launch: function() {
            
    // Destroy the #appLoadingIndicator element
            
    Ext.fly('appLoadingIndicator').destroy();

            
    // Define Panel1
            
    Ext.define('Panel1', {
                
    extend'Ext.Panel',
                
    xtype'panel1',
                
    config: {
                    
    html'Nothing to see here ...',
                    
    padding'1em',
                    
    items: [{
                        
    xtype'titlebar',
                        
    title'First Panel',
                        
    docked'top',
                        
    items: [{
                            
    xtype'button',
                            
    text'Next',
                            
    ui'forward',
                            
    align'right',
                            
    listeners: {
                                
    tap: function() {
                                    
    // Save current panel to remove it later
                                    
    var oldPanel Ext.Viewport.getActiveItem();

                                    
    // Create new panel in the Viewport
                                    
    var panel Ext.Viewport.add({
                                        
    xtype'panel2'
                                    
    });

                                    
    // Animate to the new panel and destroy the old one after animation
                                    
    Ext.Viewport.animateActiveItem(panel, {
                                        
    type'fade',
                                        
    listeners: {
                                            
    animationend: function() {
                                                
    Ext.Viewport.remove(oldPaneltrue);
                                            }
                                        }
                                    })
                                }
                            }
                        }]
                    }]
                }
            });

            
    Ext.define('Panel2', {
                
    extend'Ext.form.Panel',
                
    xtype'panel2',
                
    config: {
                    
    items: [{
                        
    xtype'fieldset',
                        
    title'Form',
                        
    items: [{
                            
    xtype'textfield',
                            
    label'Field 1'
                        
    }, {
                            
    xtype'textfield',
                            
    label'Field 2'
                        
    }]
                    }, {
                        
    xtype'fieldset',
                        
    items: [{
                            
    xtype'sliderfield',
                            
    label'Slider Field',
                            
    labelAlign'top',
                            
    minValue1,
                            
    maxValue5,
                            
    increment1,
                            
    value4
                        
    }]
                    }, {
                        
    xtype'titlebar',
                        
    title'Second Panel',
                        
    docked'top',
                        
    items: [{
                            
    xtype'button',
                            
    text'Back',
                            
    ui'back',
                            
    align'left',
                            
    listeners: {
                                
    tap: function() {
                                    
    // Save current panel to remove it later
                                    
    var oldPanel Ext.Viewport.getActiveItem();

                                    
    // Create new panel in the Viewport
                                    
    var panel Ext.Viewport.add({
                                        
    xtype'panel1'
                                    
    });

                                    
    // Animate to the new panel and destroy the old one after animation
                                    
    Ext.Viewport.animateActiveItem(panel, {
                                        
    type'fade',
                                        
    listeners: {
                                            
    animationend: function() {
                                                
    Ext.Viewport.remove(oldPaneltrue);
                                            }
                                        }
                                    })
                                }
                            }
                        }]
                    }]
                }
            });

            
    // Initialize the main view
            
    Ext.Viewport.add({
                
    xtype'panel1'
            
    });

        }

        ... 
    Michael

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    This is because when you go back, the form is destroyed and you are creating a new instance when you press next. So this is not a bug.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3

    Default

    Right, this is not a bug. I know the form gets destroyed and needs to be rebuild. I thought i post it anyway (not as a "bug") because as i said, it looks strange on a "slower" iPhone 3. The thumb jumps visibly from one place to another. Sometimes it takes nearly about half a second after the form panel is already visible. My form is not that complex (4 fields), i think it could be worser on bigger forms.

    Michael

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •