PDA

View Full Version : Show additional tools in collapsed panel header



watertrac_dev
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?

slemmon
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'
}]
});

watertrac_dev
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");
this.callParent(arguments);
},


initComponent: function () {
this.callParent(arguments);
}
});

slemmon
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', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ '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'
}]
});

filippo.ferrari
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 4.2.1.883.

slemmon
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.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-placeholder

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

45974

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){
this.fireEvent('configUser');
}
}
];


this.callParent(arguments);


//gestion des evenements
this.addEvents([
'configUser'
]);
}
});

filippo.ferrari
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!

filippo.ferrari
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...