You found a bug! We've classified it as EXTJS-9238 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #11
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,927
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    If calling setVisible(false) on the header container causes the layout to break, then maybe the header container should override the inherited implementation of setVisible so it does the right thing (setting height to 0)
    That is the intent and is discussed in the bug report.

  2. #12
    Sencha User
    Join Date
    Sep 2012
    Posts
    83
    Vote Rating
    5
    mpost is on a distinguished road

      0  

    Default


    A little more information on this workaround: if you're combining the display of the header row with the display of columns, you must do so in a particular order. The following code fails in non-webkit browsers (and causes various other weird follow-on rendering errors with dialogs, menus, and I guess floating components):

    Code:
    onToggle: function (button, pressed, eOpts)
    {
       var panel = button.up('treepanel');
       panel.down('#col2').setVisible(pressed);
       panel.down('#col3').setVisible(pressed);
       panel.getView().getHeaderCt().setHeight(pressed ? null : 0);
    }
    The correct version is as follows:

    Code:
    onToggle: function (button, pressed, eOpts)
    {
       var panel = button.up('treepanel');
    
       // Order matters, except in webkit
       if (pressed)
       {
          panel.getView().getHeaderCt().setHeight(null);
          panel.down('#col2').setVisible(true);
          panel.down('#col3').setVisible(true);
       }
       else
       {
          panel.down('#col2').setVisible(false);
          panel.down('#col3').setVisible(false);
          panel.getView().getHeaderCt().setHeight(0);
       }
    }
    A side effect is that there seems to be multiple layout runs associated with each call to setVisible/setHeight. Is there a way to reduce this to a single layout run? (Putting my C#/XAML hat on, I want an ExtJS equivalent to SuspendLayout/ResumeLayout.)

Thread Participants: 2