PDA

View Full Version : Ext.tab.Panel Tools Configuration



RuntimeException
29 Aug 2012, 1:17 PM
Greetings,

Let me preface this post by stating that it is entirely possible that I am 'doing it wrong'.

My goal is to create a tab panel with two tabs and display a help button to the right of the tabs (inline, in the same row). It should look something like this crude diagram.



//Goal
________ ________ __________________
| tab 1 | tab 2 |______________[?]_|

I would normally accomplish this via the tools property on the definition of the Ext.panel.Panel. This is my first time working with an Ext.tab.Panel and it appears to behave differently from a basic panel with regard to how the tools are rendered. They appear in a header, above the tabs, and I am not sure why.

The 4.1 documentation states that the TabPanel will not display tools configured on the header.


TabPanels use their header (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Header) or footer (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-cfg-fbar) element (depending on the tabPosition (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tab.Panel-cfg-tabPosition) configuration) to accommodate the tab selector buttons. This means that a TabPanel will not display any configured title, and will not display any configured header tools (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-cfg-tools).

When I add a configuration for the tools property to the Ext.tab.Panel, a header appears where I would not expect one to be, which causes the rendered component to appear as below.



//Difference in rendering behavior
____________________________________
|________ _______________________[?]_|
| tab 1 | tab 2 |__________________|


You can try this for yourself on any of the ExtJS 4.1 documentation pages by pasting the following into one of the code editor widgets and clicking on the Live Preview button.


Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,

tools : [{
type : 'help',
handler : function(event, toolEl, panel) {
alert('Should I be rendered up here?');
}
}],
items: [{
title: 'Tab 1'
}, {
title: 'Tab 2'
}]
});


By specifying the tools configuration on the Ext.tab.Panel, am I specifying a header configuration on this component? Is this a bug in 4.x or, if not, is the documentation incorrect? Am I simply misunderstanding proper usage of this component and the inheritance model (container > abstractpanel > panel > tabpanel)?

Does anyone know of a simple workaround to accomplish the stated goal?

Thanks in advance!

scottmartin
30 Aug 2012, 6:47 PM
You can add a button like this:



Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
items: [{
title: 'Foo'
}, {
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'
}
}],

listeners: {
afterrender: function(panel){
var bar = panel.tabBar;
bar.insert(2,[
{
xtype: 'component',
flex: 1
},
{
xtype: 'button',
text: 'button'
}
]);
}
}
});?


Scott.

vietits
30 Aug 2012, 7:30 PM
Have a look at my simple extension: Its.tab.plugin.Tool (http://www.sencha.com/forum/showthread.php?176963-Its.tab.plugin.Tool)

Marco Sulla
20 Nov 2015, 2:07 AM
I solved this on ExtJS 5.1.0 using also jQuery, but of course you can use plain JS.

1. First of all I added to CSS this class:

.tool_in_tabpanel {
right: 0px !important;
left: auto !important;
top: 3px !important;
}


2. For second, I created a floating hidden panel, that contains the tools:

{
xtype: "panel",
id: "dash_maxmin",
floating: true,
hidden: true,
tools: [
{
type: "maximize",
id: "dash_max",
cls: "tool_in_tabpanel",
},
{
type: "minimize",
id: "dash_min",
hidden: true,
cls: "tool_in_tabpanel",
},
],
},

3. Next, I forced the render of the elements. This is bad, but without this the DOM of the elements are not available, and I didn't found a cleaner solution:

Ext.getCmp("dash_maxmin").show();
Ext.getCmp("dash_maxmin").hide();

4. Last, I moved the tools to the target tabpanel, with id "dashboard":

var dash_inner = $("#dashboard .x-tab-bar .x-box-inner");
dash_inner.append($("#dash_max"));
dash_inner.append($("#dash_min"));

NOTE: this should be done every time the tools are re-rendered. The problem is that, apparently, "render" event is not fired for floating elements, so I added these commands in a function and I launch it in every piece of code that could change the tools. Not too much hassle, for now I call it in three different points only.

This is a very tricky solution, I admit, but it works. I'm quite disappointed only about the two tricks above, in point 3 and the one I described in the note. If you know more canonical solutions, please advice me.