PDA

View Full Version : How to inline edit a tabs title?



ttbgwt
16 Sep 2009, 6:08 AM
Is it possible to click on a tab's title, and have it change to inline editing mode so that the user can change the title of the tab? Any suggestions?

Thanks!

ttbgwt
5 Oct 2009, 5:19 AM
Does anyone have any suggestions? Thanks

aconran
5 Oct 2009, 5:34 AM
Use an Ext.Editor which is bound to the appropriate element containing the text for the tab.

ttbgwt
5 Oct 2009, 5:43 AM
Thanks for the suggestion. Would you happen to have some sample code on how I might use the Editor in this case?

Animal
5 Oct 2009, 5:53 AM
Instantiate one with the options you require, then call startEdit passing the element to edit

Animal
5 Oct 2009, 5:54 AM
Perfect opportunity to improve the docs here if they let you down at some point. Let me know what's lacking.

Condor
5 Oct 2009, 5:57 AM
Example:

new Ext.TabPanel({
height: 200,
width: 300,
activeTab: 0,
items: [{
title: 'Tab 1'
},{
title: 'Tab 2'
},{
title: 'Tab 3'
}],
listeners: {
render: function(c){
c.editor = 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: c
}
});
c.mon(c.strip, {
dblclick: function(e){
var t = this.findTargets(e);
if(t && t.item && !t.close){
this.editor.startEdit(t.el, t.item.title);
}
},
scope: c
});
}
},
renderTo: Ext.getBody()
});

Animal
5 Oct 2009, 6:07 AM
Be nice as a plugin!

Condor
5 Oct 2009, 6:26 AM
Be nice as a plugin!

Done (http://www.extjs.com/forum/showthread.php?t=82076).

ttbgwt
5 Oct 2009, 7:03 AM
Thanks for your help Condor... you rock!

aconran
5 Oct 2009, 7:55 AM
Done (http://www.extjs.com/forum/showthread.php?t=82076).

Nice work done so quickly Condor! :D