PDA

View Full Version : Container in TabStrip Area



steffenk
19 Dec 2010, 4:59 AM
This very simple plugin adds a container in Tabstrip Area of a TabPanel. Especially if you only have a few tabs, the space can be used for some needed controls.

Source and demo can be found here (http://dev.sk-typo3.de/ext/tabstripcontainer/).


23886

msinn
19 Dec 2010, 10:09 PM
Thank you Steffen, this is a great plugin !

JoyfulBobHome
21 Mar 2011, 8:29 PM
Very nice plugin!

This will save me valuable form space!

Thanks.

shinkenno
12 Dec 2012, 7:00 AM
Hi,
The link to source/demo is broken.
Does anyone have a copy of this ux?

Thanks!
Arnaud

Joyfulbob
26 Mar 2013, 12:27 PM
Try this from 2011:

I don't have code for how it's used.


/**
* Ext.ux.plugins.TabStripContainer
*
* @author Steffen Kamper
* @date December 19, 2010
*
* @class Ext.ux.plugins.TabStripContainer
* @extends Object
*/

Ext.ns('Ext.ux.plugins');

Ext.ux.plugins.TabStripContainer = Ext.extend(Object, {

/**
* @hide private
*
* Tab panel we are plugged in.
*/
tabPanel : null,

/**
* @hide private
*
* items for the panel
*/
items: [],

/**
* @hide private
*
* Cached tab panel's strip wrap element container, i.e. panel's header or footer element.
*/
headerFooterEl : null,


/**
* @constructor
*/
constructor : function(config) {
Ext.apply(this, config);
},

/**
* Initializes plugin
*/
init : function(tabPanel) {
this.tabPanel = tabPanel;
tabPanel.on(
'afterrender',
this.onTabPanelAfterRender,
this,
{
delay: 10
}
);
},

/**
* Adds the panel to the tab header/footer
*
* @param tabPanel
*/
onTabPanelAfterRender: function(tabPanel) {
var height, panelDiv, stripTarget, config;
// Getting and caching strip wrap element parent, i.e. tab panel footer or header.
this.headerFooterEl =
this.tabPanel.tabPosition == 'bottom'
? this.tabPanel.footer
: this.tabPanel.header;
height = this.headerFooterEl.getComputedHeight();
stripTarget = tabPanel[tabPanel.stripTarget];

stripTarget.applyStyles('position: relative;');

panelDiv = this.headerFooterEl.createChild({
tag : 'div',
id: this.id || Ext.id(),
style : {
position : 'absolute',
right: 0,
top: 0
}
});
panelDiv.setSize(this.width, height, false);
config = Ext.applyIf({
layout: 'hbox',
layoutConfig: {
align: 'stretchmax'
},
height: height,
width: this.width,
renderTo: panelDiv
}, this.panelConfig);
this.panelContainer = new Ext.Panel(config);
this.panelContainer.add(this.items);
this.panelContainer.doLayout();
}

});
Ext.preg('Ext.ux.plugins.TabStripContainer', Ext.ux.plugins.TabStripContainer);

shinkenno
27 Mar 2013, 12:50 AM
Thanks!

Joyfulbob
28 Mar 2013, 4:58 AM
You're welcome.

Now I need to figure out how to code it; I can't find my js page where I'm using it. Anyone have an example?

nitingautam
21 Jul 2013, 10:32 PM
Below link of source code not working..please post a new link
http://dev.sk-typo3.de/ext/tabstripcontainer/ (http://dev.sk-typo3.de/ext/tabstripcontainer/)

nitingautam
19 Dec 2013, 10:34 PM
Do we have it's ExtJS4.2 compatible version available ?