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

[kclough]

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:

    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

[mitchellsimoens]

You could set the left or top config to something very low so it first appears "off screen"

[kodak]

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:

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

[kodak]

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

[mitchellsimoens]

The top and left needs to be in the config object

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}'
            }
        ]
    }
});

[kodak]

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:

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