View Full Version : Show additional tools in collapsed panel header

24 Jun 2013, 8:44 AM
My panel header contains a "search" tool which is visible when the panel is expanded. When I collapse the panel, the "search" tool is hidden and only the "collapse" tool remains visible. I'd like to have whatever tools are visible when the panel is expanded also show when the panel is collapsed. Possible? Suggestions?

26 Jun 2013, 1:29 PM
If the panel is standalone you shouldn't have to do anything special (see below). If the example below didn't clarify anything can you offer more details about your particular setup / layout where you're having trouble?

Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 200,
html: '<p>World!</p>',
renderTo: Ext.getBody(),
closable: true,
collapsible: true,
tools: [{
type: 'search'

27 Jun 2013, 4:07 AM
Here is my view:

Ext.define("WP.view.bol.GridFilterPanel", { extend: "Ext.grid.Panel",
alias: "widget.gridfilterpanel",

requires: ["WP.model.Filter"],

title: "{name}",

collapsible: true,
collapseDirection: "top",
collapseFirst: false,
tools: [{
type: "search",
tooltip: "Search"

id: "bol-grid-filter-panel",
cls: "filter-grid",
selModel: {
mode: "SIMPLE",
allowDeselect: true

viewConfig: {
markDirty: false

store: "BillOfLadingViewFilters",

// CRUD buttons for Filter records plus additional
// buttons for group/ungroup and move up/down
tbar: {
itemId: "filter-toolbar",
defaults: {
disabled: true
items: [{
itemId: "btn-add",
iconCls: "filter-add",
tooltip: "Add",
disabled: false
}, {
itemId: "btn-delete",
iconCls: "filter-delete",
tooltip: "Delete"
}, {
itemId: "btn-edit",
iconCls: "filter-edit",
tooltip: "Edit"
}, "-", {
itemId: "btn-top",
iconCls: "filter-top",
tooltip: "Move to Top"
}, {
itemId: "btn-up",
iconCls: "filter-up",
tooltip: "Move Up"
}, {
itemId: "btn-down",
iconCls: "filter-down",
tooltip: "Move Down"
}, {
itemId: "btn-bottom",
iconCls: "filter-bottom",
tooltip: "Move to Bottom"
}, "-", {
itemId: "btn-group",
iconCls: "filter-group",
tooltip: "Group Selected"
}, {
itemId: "btn-ungroup",
iconCls: "filter-ungroup",
tooltip: "Ungroup Selected"
}, "->", {
text: "Actions",
itemId: "btn-actions",
disabled: false,
menuAlign: "tr-br",
menu: {
hideMode: "display",
items: [{
itemId: "btn-save",
iconCls: "filter-save",
text: "Save"
}, {
itemId: "btn-share",
iconCls: "filter-share",
text: "Share"
}, {
xtype: "menuseparator"
}, {
itemId: "btn-public",
iconCls: "filter-public",
text: "Make Public"

columns: [{
flex: 0,
width: 16,
sortable: false,
draggable: false,
menuDisabled: true
}, {
flex: 1,
text: "Filters",
dataIndex: "display",
sortable: false,
draggable: false,
menuDisabled: true

config: {
title: "",
isAdmin: false

constructor: function (config) {
this.config = config || {};
this.title = this.config.title || "Filter:";
this.tbar.items[this.tbar.items.length - 1].menu.items[3].iconCls = (this.config.isAdmin ? "filter-public" : "filter-idea");
this.tbar.items[this.tbar.items.length - 1].menu.items[3].text = (this.config.isAdmin ? "Make Public" : "Suggest Public");

initComponent: function () {

27 Jun 2013, 12:48 PM
Using your test case (though I changed it from extending grid.Panel to panel.Panel so that I could give it a try since I don't have your model / store) it seems to work for me ok. I tested in 4.1.0, 4.1.1, 4.1.3, and 4.2.1 and didn't see an issue - each time I saw the search tool while the panel was collapsed and when expanded. What version of ExtJS are you seeing the issue in?

Just to make sure grid honored the tools config in the header when expanded / collapsed:

Ext.create('Ext.data.Store', {
fields:['name', 'email', 'phone'],
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
height: 200,
width: 400,
renderTo: Ext.getBody(),
collapsible: true,
tools: [{
type: 'search'

26 Jul 2013, 2:13 AM
Same issue for me, tools only appears when i click to expand a panel, and disappears on panel collaps. (I need a panel collapsed at startup), I'm using

26 Jul 2013, 11:01 AM
If you're collapsing a panel left / right it will inject a placeholder header that will not have the tools form the expanded header. You should be able to remove / add the tools from the header on collapse / expand. Or you can duplicate the tools items in a placeholder of your own design.

25 Sep 2013, 1:33 AM
I have the same problem using 4.2.1 :


The additional tool is hidden when the panel is collapsed, which is a problem for me since it should always be visible. And there is no property in Ext.panel.Panel that can set this option. Here is my code :

Ext.define('OasImp.view.option.OptionsView', {
extend : 'Ext.panel.Panel',
alias : 'widget.optionsview',
layout : {
type: 'vbox',
align: 'stretch'

title: 'Options & Filters',
titleAlign: 'center',
collapsible: true,
collapseFirst: false,
collapseMode: "header",
animCollapse : true,

initComponent : function()
this.collapsed = true;
this.hideCollapseTool = false;
this.tools = [{
type: 'save',
tooltip: 'User configuration',
scope: this,
handler: function(event, toolEl, panel){


//gestion des evenements

20 Feb 2014, 2:43 AM
See this: https://fiddle.sencha.com/#fiddle/3pd

I think that the goal is to have tools visible either in this beaviour!

20 Feb 2014, 3:37 AM
with the config:

collapseMode: 'header',

a tab panel child of a border layout mantain tolls!

As I can see you lost floating options...