TabPanel tab title editor

[mitchellsimoens]

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

Not sure on how to do this....

[wm003]

Very nice, Condor. Thank you.

[sumit.madan]

I needed to make the tab titles of vertical tabpanel editable and found this line was throwing an error:

var item = this.getComponent(editor.boundEl.id.split(this.idDelimiter)[1]);

Replaced it with:

var item = Ext.getCmp(editor.boundEl.id.split(this.idDelimiter)[1]);

[rburgt]

I added a function wich allows you to show the editor by code

Ext.ns('Ext.ux');
Ext.ux.TabTitleEditor = Ext.extend(Object, {
    init: function(c){
        c.on({
            render: this.onRender,
            destroy: this.onDestroy,
            single: true
        });
        
        c.editTab = function ( tabIndex ) {
            this.activate(tabIndex);
            
            var tab = this.getActiveTab();
            
            if( tab.titleEditable !== false){
                this.titleEditor.startEdit(tab.tabEl, tab.title);
            }
        }
    },
    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;
        }
    }
});

[Condor]

You really should put editTab in the prototype instead of assigning it in the constructor. This makes every instance take up more space and makes the plugin harder to extend.

[i.stojanovic]

How to apply this plugin on ExtJS 4?

Thanks

[sandeshdshetty]

Does above plugin works for extjs 4.1?
I have tried above plugin extjs 4.1 but did not work.