Hybrid View

  1. #1
    Sencha Touch Premium User
    Join Date
    Oct 2010
    Location
    Portland, Maine USA
    Posts
    66
    Vote Rating
    1
    gordonjl is on a distinguished road

      0  

    Default Show/Hide Toolbar, docked panel briefly renders incorrectly

    Show/Hide Toolbar, docked panel briefly renders incorrectly


    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:

    Code:
      setToolbarVisibility: function(visibility) {
    
            this.toolbar.setVisible(visibility);
    
            this.infopanel.setVisible(visibility);
       
            this.doComponentLayout();
        },
    Here's the docked panel on the bottom:

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

  2. #2
    Touch Premium Member Philip Murphy's Avatar
    Join Date
    Oct 2011
    Location
    Dublin, Ireland
    Posts
    27
    Vote Rating
    2
    Philip Murphy is on a distinguished road

      0  

    Default


    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.

    Code:
    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.
    Last edited by Philip Murphy; 22 Mar 2012 at 9:07 AM. Reason: answering my own question.

  3. #3
    Sencha User Skynet-tx's Avatar
    Join Date
    May 2012
    Location
    Sevastopol, Russia
    Posts
    20
    Vote Rating
    1
    Skynet-tx is on a distinguished road

      0  

    Default This my instance

    This my instance


    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.