PDA

View Full Version : Show/Hide Toolbar, docked panel briefly renders incorrectly



gordonjl
26 Jul 2011, 5:01 AM
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
22 Mar 2012, 7:33 AM
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
11 May 2012, 4:26 AM
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.