Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    3
    Vote Rating
    1
    kclough is on a distinguished road

      1  

    Default [2.2] showBy shows panel in wrong position temporarily on the first call

    [2.2] showBy shows panel in wrong position temporarily on the first call


    U]REQUIRED INFORMATION[/U]




    Ext version tested:
    • Sencha Touch 2.2
    • Sencha Touch 2.1.0

    Browser versions tested against:
    • iOS 6.1.3 Safari
    • Google Chrome 26.0.1410.64

    Description:
    • When showing a Panel by using showBy, it appears in the wrong position temporarily then moves.

    Steps to reproduce the problem:
    • Click the ? button

    The result that was expected:
    • The panel appears to the right of the button and does not move

    The result that occurs instead:
    • The panel appears, then moves quickly

    Test Case:


    Code:
        Ext.define('HelpMenu', {
        extend: 'Ext.Panel',
        xtype: 'helpmenu',
        config: {
            cls: 'help-menu-panel',
            
            width: '240px',
            items: [{
                styleHtmlContent: true,
                html: 'Help text'
            }]
        }
    });
    
    
    var onButtonTap = function(button, e, options) {
        var helpMenu = Ext.create('HelpMenu');
        helpMenu.showBy(button);
    };
    Ext.application({
        name: 'SenchaMenuExample',
        
        launch: function() {
            Ext.create('Ext.Container', {
                fullscreen: true,
                html: 'Hello!',
                items: [{
                    xtype: 'toolbar',
                    docked: 'top',
                    items: [{
                        xtype: 'button',
                        cls: 'help-button',
                        action: 'help',
                        text: '?',
                        listeners: [{
                            fn: onButtonTap,
                            event: 'tap'
                        }]
                    }]
                }]
            });
        }
    });





    HELPFUL INFORMATION




    See this URL for live test case: http://kbc-sandbox.sites.emr.ge/showby/index.htm




    Debugging already done:
    • none

    Possible fix:
    • not provided

    Additional CSS used:
    • only default ext-all.css

    Operating System:
    • Windows 8
    • Mac OSX 10.8.3
    • iOS 6.1.3

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    847
    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

      0  

    Default


    You could set the left or top config to something very low so it first appears "off screen"
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Location
    Munich, Germany
    Posts
    58
    Vote Rating
    1
    kodak is on a distinguished road

      0  

    Default


    Hey!

    I have the same problem

    @mitchellsimoens
    What do you mean with 'very low'? I tried a couple of values with the left and top attributes e.g. setting top to -100 but the problem still exists...

    Here is a example of my code:
    Code:
    Ext.define('MyApp.view.selectView', {
        extend: 'Ext.Panel',
        id: 'selectView',
        alias: 'widget.selectMe',
        //left: -500,
        top: -100,
        
        config: {
            items: [
            {
                xtype: 'list',
                store: 'myStore',
                id: 'selectList',
                width: '180px',
                height: '220px',
                itemTpl: '{khgname1} {khgname2}'
            }
            ]
        }
    
    
        
        });

    And its the same problem... the panel appears a couple of pixels to high and then moves down which males the panel looks buggy. I cant reproduce it in chrome or safari only on mobile safari (iPhone 4, iOS6).

    thanks for your help!
    greets

  4. #4
    Sencha User
    Join Date
    Feb 2012
    Location
    Munich, Germany
    Posts
    58
    Vote Rating
    1
    kodak is on a distinguished road

      0  

    Default


    Does anyone has a bugfix for that?
    It`s just unusable for me with this display problem

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    847
    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

      0  

    Default


    The top and left needs to be in the config object

    Code:
    Ext.define('MyApp.view.selectView', {
        extend : 'Ext.Panel',
        xtype  : 'selectMe',
    
        config : {
            top   : -1000,
            items : [
                {
                    xtype   : 'list',
                    store   : 'myStore',
                    id      : 'selectList',
                    width   : '180px',
                    height  : '220px',
                    itemTpl : '{khgname1} {khgname2}'
                }
            ]
        }
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #6
    Sencha User
    Join Date
    Feb 2012
    Location
    Munich, Germany
    Posts
    58
    Vote Rating
    1
    kodak is on a distinguished road

      0  

    Default


    Thanks mitchellsimoens for your answer!
    I know there are a lot people asking questions here in the forum every day...

    I don´t know exactly where the display problem came from but it´s working know.

    Thats my current config:

    Code:
    Ext.define('MyApp.view.selectView', {
        extend: 'Ext.Panel',
        alias: 'widget.selectMe',
        width: '240px',
        height: '320px',
        config: {
            items: [{
                xtype: 'list',
                store: 'myStore',
                id: 'selectList',
                width: '100%',
                height: '100%',
                itemTpl: '{name1} {name2}'
            }]
        }
    });
    regards

  7. #7
    Sencha User
    Join Date
    Apr 2012
    Posts
    6
    Vote Rating
    1
    sf_cs is on a distinguished road

      0  

    Default


    I had the same problem. In my case I have a list inside the panel. I specified width and hight for the list but not for the panel. The problem disappeared after i defined a fixed width and height for the panel and '100%' width and height for the list.

  8. #8
    Sencha User
    Join Date
    Jan 2012
    Location
    London, UK
    Posts
    502
    Vote Rating
    55
    shepsii is a jewel in the rough shepsii is a jewel in the rough shepsii is a jewel in the rough

      0  

    Default


    This is still showing in 2.3. I know that there's a workaround, but this temporary incorrect placement of the panel shouldn't be default behavior. Could the showBy method not just call setTop(-1000) on the panel, before it does anything else?
    I blog about Sencha Touch at www.senchatouchdev.com