Here is a small plugin that allows inline editing of the titles of the panels in a TabPanel on dblclick.
Code:
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:
Code:
new Ext.TabPanel({
height: 200,
width: 300,
activeTab: 0,
items: [{
title: 'Tab 1'
},{
title: 'Tab 2'
},{
title: 'Tab 3'
}],
plugins: ['tabtitleedit'],
renderTo: Ext.getBody()
});