View Full Version : [2.x] Ext.ux.AdvancedTabPanel v0.1alpha

23 Jun 2008, 7:08 AM
I would like to create an extension of tabPanel that provides:
current version 0.1 :
* tab adder (a tab that creates a new tab like I.E.)
* editable title (double click on title makes the title editable)

comming in next versions...
* sortable tabs (by dragging the title)
* customizable icons (like close: refresh, maximize...)

I have a problem with the editable tab item : I've managed to get the double click and switch the title to a input field. But :

the selection (by dragging the mouse or by using [Ctrl] + arrow keys doesn't render (both IE and FF). I think this is linked to the click event catch by the tabPanel.

Further, the rendering of the input field is not perfect, does someone would like to have a look on this ?


Ext.ux.AdvancedTabPanel = Ext.extend(Ext.TabPanel, {
tabCount: 0,
tabAdderTitle: '+',
tabAdderNewTitle: 'new',
enableTabScroll: true, // default behavior

afterRender: function(){

// add the double click event for editable titles
if (this.editable) {
this.strip.on('dblclick', this.onStripDblClick, this);

// insert the tab adder
if (this.tabAdder) {
var tab = new Ext.Panel({ id: this.id + '-adder' });

if (this.tabAdderIconCls) { tab.setIconClass(this.tabAdderIconCls); }


onStripMouseDown: function(e) {
var t = this.findTargets(e);
if (t.item && t.item.id != this.id + '-adder') {
if(!e.getTarget('.ux-tab-strip-field', this.strip)) {
console.log('call superclass');
Ext.ux.AdvancedTabPanel.superclass.onStripMouseDown.call(this, e);
} else {


onStripClick : function(e){
var t = this.findTargets(e);
if (t.item && t.item.id == this.id + '-adder') {
this.insert(this.items.length - 1, {
title: this.tabAdderNewTitle + this.tabCount,
closable: true,
html: 'nouvel onglet<br>'

} else {
if(!e.getTarget('.ux-tab-strip-field', this.strip)) {
Ext.ux.AdvancedTabPanel.superclass.onStripClick.call(this, e);

onStripDblClick : function(e){
// the field is not currently edited?
var t = this.findTargets(e);
if (t.el && !e.getTarget('.ux-tab-strip-field', this.strip)) {
// get the text element clicked

var el = Ext.fly(Ext.fly(t.el).child('span.x-tab-strip-text', true));
var title = el.dom.innerHTML;

// create the editable field and insert it
var f = new Ext.form.TextField({
restore: function() {
Ext.DomHelper.overwrite(span.parentNode, this.getValue());
width: Ext.get(el).getWidth(),
height: 13,
style: 'padding:0 2px 0 2px;margin:0;border:0 none;font-size:11px;',
selectOnFocus: true,
value: title

var span = Ext.DomHelper.overwrite(el, {tag:'span', cls: 'ux-tab-strip-field'});
// render the editable field and bind events

f.on("specialkey", function(field, e){
if(e.getKey() == e.ENTER){
if(e.getKey() == e.ESC){
f.on("blur", function(field){


// register xtype
Ext.reg('ux-advancedtabpanel', Ext.ux.AdvancedTabPanel);


var tabs = new Ext.ux.AdvancedTabPanel({
{title: 'Tab Number 1'},
{title: 'Tab Number 2'},
{title: 'Tab Number 3'}
tabAdder: true,
tabAdderTitle: '&nbsp;',
tabAdderIconCls: 'ux-tab-add',
tabAdderNewTitle: 'custom label ',
editable: true


.ux-tab-add {
margin-left: 8px; /* because of the nbsp; at the right of the icon... */
background-image: url( tab_add.gif ) !important;

The attached zip file would work if you unzip it in your examples directory of ExtJS.

30 Jun 2008, 2:43 PM

I really love this plugin. I had almost the same idea as you had: I wanted to make the title of a normal panel editable on click and your solution really helped me a lot, thanks!

Furthermore I had the same problem with selecting the text in the textfield, but I found a solution:

You cannot select the text, beacause the header has a css-class called "x-unselectable".

change your afterRender:

afterRender : function()

this.header.dom.style.cssText = "";

// ... your code
I hope there is no problem with overwriting the style of the header.


PS: As soon as I finish my plugin, I will publish (http://extjs.com/forum/showthread.php?t=40042) it in the forums.