TabPanel tab title editor

[Condor]

Here is a small plugin that allows inline editing of the titles of the panels in a TabPanel on dblclick.

Ext.ns('Ext.ux');
Ext.ux.TabTitleEditor = Ext.extend(Object, {
    init: function(c){
        c.on({
            render: this.onRender,
            destroy: this.onDestroy,
            single: true
        });
    },
    onRender: function(c){
        c.titleEditor = new Ext.Editor(new Ext.form.TextField({
            allowBlank: false,
            enterIsSpecial: true
        }), {
            autoSize: 'width',
            completeOnEnter: true,
            cancelOnEsc: true,
            listeners: {
                complete: function(editor, value){
                    var item = this.getComponent(editor.boundEl.id.split(this.idDelimiter)[1]);
                    item.setTitle(value);
                },
                scope: this
            }
        });
        c.mon(c.strip, {
            dblclick: function(e){
                var t = this.findTargets(e);
                if(t && t.item && !t.close && t.item.titleEditable !== false){
                    this.titleEditor.startEdit(t.el, t.item.title);
                }
            },
            scope: c
        });
    },
    onDestroy: function(c){
        if(c.titleEditor){
            c.titleEditor.destroy();
            delete c.titleEditor;
        }
    }
});
Ext.preg('tabtitleedit', Ext.ux.TabTitleEditor);

Usage example:

new Ext.TabPanel({
    height: 200,
    width: 300,
    activeTab: 0,
    items: [{
        title: 'Tab 1'
    },{
        title: 'Tab 2'
    },{
        title: 'Tab 3'
    }],
    plugins: ['tabtitleedit'],
    renderTo: Ext.getBody()
});

[mschwartz]

What if I only want some tab titles editable?

[Condor]

I added a titleEditable config option for panels that you can set to 'false' to make the title of the panel uneditable.

[mschwartz]

I added a titleEditable config option for panels that you can set to 'false' to make the title of the panel uneditable.

Exactly.

[BitPoet]

Here is a small plugin that allows inline editing of the titles of the panels in a TabPanel on dblclick.

A small suggestion to have a single event on the tabpanel monitor title changes by the editor (additions in bold):

Ext.ns('Ext.ux');
Ext.ux.TabTitleEditor = Ext.extend(Object, {
    /**
     * @event tabtitleedit
     * Fires when the title of a tab has been edited
     * @param {Ext.TabPanel} tabpanel The containing Ext.TabPanel itself
     * @param {Ext.Panel} panel The Ext.Panel that had the title changed
     * @param {Mixed} value The new value
     * @param {Mixed} startvalue The old value before the edit
     */

    init: function(c){
        c.addEvents({
            tabtitleedit:    true
        });
        c.on({
            render: this.onRender,
            destroy: this.onDestroy,
            single: true
        });
    },
    onRender: function(c){
        c.titleEditor = new Ext.Editor(new Ext.form.TextField({
            allowBlank: false,
            enterIsSpecial: true
        }), {
            autoSize: 'width',
            completeOnEnter: true,
            cancelOnEsc: true,
            listeners: {
                complete: function(editor, value, startvalue){
                    var item = this.getComponent(editor.boundEl.id.split(this.idDelimiter)[1]);
                    item.setTitle(value);
                    this.fireEvent('tabtitleedit', this, item, value, startvalue);
                },
                scope: this
            }
        });
        c.mon(c.strip, {
            dblclick: function(e){
                var t = this.findTargets(e);
                if(t && t.item && !t.close && t.item.titleEditable !== false){
                    this.titleEditor.startEdit(t.el, t.item.title);
                }
            },
            scope: c
        });
    },
    onDestroy: function(c){
        if(c.titleEditor){
            c.titleEditor.destroy();
            delete c.titleEditor;
        }
    }
});

[Condor]

A small suggestion to have a single event on the tabpanel monitor title changes by the editor

Do you really need that event if the panels already fire 'titlechange' events (which you could bubble to the tabpanel)?

[BitPoet]

Thinking about it from different angles, that's a good question. I've got a case here where it's really handy (I've got to differentiate between 'normal' title changes and title edits), but that's probably not something occurring very often and that can be added with a simple createSequence and another complete listener.

[dawesi]

nice

[mitchellsimoens]

Is there a way to initiate the editing via code and not just the dbl click? I'd like to add a tab and have it automatically start the editing. I tried using the startEdit() function and it would add the textarea but as an item to the tab panel not the tab title.

[Animal]

The dblclick handling function needs to be broken out and poked into the host TabPanel as the property editTitle.