1. #1
    Ext JS Premium Member
    Join Date
    Aug 2011
    Posts
    10
    Vote Rating
    0
    ritteh is on a distinguished road

      0  

    Default How to prevent header from displaying in collapsed panels

    How to prevent header from displaying in collapsed panels


    I have a ExtJS 4.0.2 collapsible panel inside a Ext.window.Window. It defined as such:
    PHP Code:
                        xtype'custompanel',
                        
    region'north',
                        
    height100,
                        
    splittrue,
                        
    collapsibletrue,
                        
    collapsedfalse,
                        
    preventHeadertrue 
    The panel displays correctly without a header when not collapsed, but when collapsed, the header appears. I do not want this. I just want the splitter bar to show. Is there a way to do this?

    This might be related, but it was ExtJS 2 and solution didn't work:

  2. #2
    Sencha Premium Member crysfel's Avatar
    Join Date
    Feb 2008
    Location
    New York, USA
    Posts
    218
    Vote Rating
    8
    crysfel will become famous soon enough

      0  

    Default


    You need to hide the "tools", try using this configuration:


    Code:
    {
                        xtype: 'custompanel',
                        region: 'north',
                        height: 100,
                        split: true,
                        collapsible: true,
                        collapsed: false,
                        preventHeader: true ,
                        hideCollapseTool: true //<----- hide the tool buttons
    }

  3. #3
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    27
    Vote Rating
    0
    AmandaK is on a distinguished road

      0  

    Default


    You can use collapseMode: 'mini' to display just a bar with an arrow to open or close the panel.

  4. #4
    Ext JS Premium Member
    Join Date
    Aug 2011
    Posts
    10
    Vote Rating
    0
    ritteh is on a distinguished road

      0  

    Default


    Thanks. collapseMode: 'mini' did the trick. Anyone know why this isn't documented in the panel API docs? The only options listed are 'header' and undefined. I'm asking this as I've been overwhelemed by extJS and am hoping that there is a better way for me to use docs.

  5. #5
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    27
    Vote Rating
    0
    AmandaK is on a distinguished road

      0  

    Default


    I found that particular config option in one of the demos. I've found a number of undocumented features in the demos, now that you mention it. If you're having trouble with a control, it's usually a good idea to check the demos and see if there's one that does what you're trying to accomplish.

  6. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    4
    Vote Rating
    0
    funkrider is on a distinguished road

      0  

    Default config setting location

    config setting location


    It turns out that where you put the config setting "collapseMode" is also important.

    If you create a widget that inherits from Panel and set the collapseMode: 'mini' within that component it has no effect. You must set the property using the config passed into your component. For example:

    {
    xtype: 'myPanelComponent',
    region: 'west',
    collapseMode: 'mini',
    split: true
    }