Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Hide tree grid header row at runtime?

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    83
    Vote Rating
    6
      0  

    Default Hide tree grid header row at runtime?

    How do you toggle the visibility of a tree grid's header row at runtime? I'm trying to toggle the visibility based on a button toggle event. I've tried

    Code:
    panel.getView().getHeaderCt()setVisible(pressed);
    which appears to work, but in the browser console I see a "layout run failed" message for each column.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,390
    Vote Rating
    498
      0  

    Default

    How about this:

    Code:
    Ext.create('Ext.data.Store', {
        storeId : 'simpsonsStore',
        fields  : ['name', 'email', 'change'],
        data    : {'items' : [
            { 'name' : 'Lisa',  'email' : 'lisa@simpsons.com',  'change' : 100  },
            { 'name' : 'Bart',  'email' : 'bart@simpsons.com',  'change' : -20  },
            { 'name' : 'Homer', 'email' : 'home@simpsons.com',  'change' : 23   },
            { 'name' : 'Marge', 'email' : 'marge@simpsons.com', 'change' : -11  }
        ]},
        proxy   : {
            type   : 'memory',
            reader : {
                type : 'json',
                root : 'items'
            }
        }
    });
    
    var grid = Ext.create('Ext.grid.Panel', {
        title      : 'Simpsons',
        store      : Ext.data.StoreManager.lookup('simpsonsStore'),
        columns    : [
            { header : 'Name', dataIndex : 'name' },
            { header : 'Email', dataIndex : 'email', flex : 1 },
            { header : 'Change', dataIndex : 'change' }
        ],
        height     : 200,
        width      : 400,
        renderTo   : Ext.getBody()
    });
    
    grid.headerCt.setVisible(false);
    Scott

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    83
    Vote Rating
    6
      0  

    Default

    Nope, that still gives a 'Layout run failed' message. I see that I left out an important detail though: when I'm toggling the header off, I'm also hiding two of my three columns (the first column is always visible). Here's my toggle handler:

    Code:
    onToggle: function (button, pressed, eOpts)
    {
        var panel = button.up('treepanel');
        panel.down('#col2').setVisible(pressed);
        panel.down('#col3').setVisible(pressed);
    
    
        panel.getView().getHeaderCt().setVisible(pressed);   // layout run failed
    },
    I've tried moving the header visibility toggle before the column visibility toggle, but I still get a layout run failed.

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,390
    Vote Rating
    498
      0  

    Default

    Please have a look:
    http://jsfiddle.net/6vJBR/

    What version of Ext are you using? Perhaps try an clear the browser cache

    Scott.

  5. #5
    Sencha User
    Join Date
    Sep 2012
    Posts
    83
    Vote Rating
    6
      0  

    Default

    I'm using Ext 4.1.1a. It turns out this message only happens when using ext-dev.js. I've updated your fiddle appropriately: http://jsfiddle.net/FSKJq/

    I'm seeing this error in Firefox 19.0.2, Safari 6.0.3, and Chrome 25.0.1364.172 on OS X 10.8.3. Should I be concerned about this error? I'm guessing that ext-dev.js performs additional logging and checking that ext-all.js skips for performance reasons.

  6. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,390
    Vote Rating
    498
      0  

    Default

    I have moved this to the bugs forum .. please use the following:

    Code:
    // taken from hideHeaders approach
    grid.getView().getHeaderCt().setHeight(btn.pressed ? 0 : null);
    I am going to create a bug report to correct this issue. The issue is that that the table needs the header to calculate column widths. We are going to make allowances to correct this.

    Scott.

  7. #7
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,390
    Vote Rating
    498
      0  

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  8. #8
    Sencha User
    Join Date
    Sep 2012
    Posts
    83
    Vote Rating
    6
      0  

    Default

    Thanks, the work around worked perfectly!

  9. #9
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,593
    Vote Rating
    874
      0  

    Default

    You can't hide the headers because they are used to give the sizes to the columns. As Scott said, the height is set to 0, so that they will still layout and attain a width.
    Evan Trimboli
    Twitter - @evantrimboli

  10. #10
    Sencha User
    Join Date
    Sep 2012
    Posts
    83
    Vote Rating
    6
      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 way the framework makes sense and the same call I can make everywhere else to show/hide components works on this component as well -- instead of blowing up for a non-obvious reason. (In software engineering circles, we refer to this type of API design as The Pit of Success. Right now HeaderContainer.setVisible() is circling The Pit of Despair.)

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •