Show/Hide Toolbar, docked panel briefly renders incorrectly

[gordonjl]

All,

I'm showing/hiding a toolbar and a docked item when a panel is tapped. It works, but the docked panel on the bottom flashes briefly at the top of the screen before going to its correct position. Is there a way I can prevent this? It works fine in Chrome and Safari on the desktop, btw. See amazing video below.

Video Location (small, don't worry): http://gordonjl.com/files/pf.m4v

Here's the code I'm calling to do the show/hide:

  setToolbarVisibility: function(visibility) {

        this.toolbar.setVisible(visibility);

        this.infopanel.setVisible(visibility);
   
        this.doComponentLayout();
    },

Here's the docked panel on the bottom:

{
            xtype:'panel',
            hidden:true,
            dock:'bottom',
            overlay:true,
            showAnimation:{type:'slide',direction:'up'},
             html:"<div class='photo-info'>[Caption Goes Here]</div>"
        };

Thanks!

[Philip Murphy]

Did u ever get an answer to this as I have the same problem? Only a problem on iOS for me.

Answering my own question: Solution for me was to add and remove docked bar from main viewport instead of nested list panel.

myapp.views.MyView = Ext.extend(Ext.Panel, {
    layout: 'fit',

    initComponent: function() {
        ...
        this.myToolbar = new Ext.Toolbar({...});

            this.items = [{
                xtype : 'list',
            ....
                listeners: {
                     scope: this,
                     selectionchange: function(selectionModel) {
                           if(selectionModel.getCount() !== 0) {
                                 myapp.views.viewport.addDocked(this.myToolbar);
                           } else {
                                 myapp.views.viewport.removeDocked(this.myToolbar, false);
                         }
                },
           ...

myapp.views.viewport is a cardlayout (fullscreen = true), where the above code snippet is from a panel that is used within it.

[Skynet-tx]

This is simple solutions. You should take panel and after making the appearance and disappearance of the panel.

//The action for the appearance and disappearance of the panel
Ext.select('.compose').on('click', function(){


if(changed_view == false) { //tabs on
//tsvb.stat.timerButtonPanel.show();


tsvb.statPanel.dockedItems.items[0].show();
tsvb.statPanel.items.items[0].dockedItems.items[0].show();
if (tsvb.statPanel.items.items[2].dockedItems.items[0]) {
tsvb.statPanel.items.items[2].dockedItems.items[0].show();
}


changed_view = true;
}


else if (changed_view == true) {//tabs off


tsvb.statPanel.dockedItems.items[0].hide();
tsvb.statPanel.items.items[0].dockedItems.items[0].hide();


if (tsvb.statPanel.items.items[2].dockedItems.items[0]) {
tsvb.statPanel.items.items[2].dockedItems.items[0].hide();
}
console.log(tsvb.statPanel.dockedItems.items[0]);


changed_view = false;
}


tsvb.statPanel.doComponentLayout();


});

If you don't understand how it's done, ask from me.