PDA

View Full Version : TabPanel tab title editor



Condor
5 Oct 2009, 6:25 AM
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
5 Oct 2009, 6:28 AM
What if I only want some tab titles editable?

:D

Condor
5 Oct 2009, 6:33 AM
I added a titleEditable config option for panels that you can set to 'false' to make the title of the panel uneditable.

mschwartz
5 Oct 2009, 6:48 AM
I added a titleEditable config option for panels that you can set to 'false' to make the title of the panel uneditable.

Exactly.

BitPoet
5 Oct 2009, 7:57 AM
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
5 Oct 2009, 10:14 AM
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
6 Oct 2009, 12:38 AM
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
14 Dec 2009, 6:57 PM
nice

mitchellsimoens
9 Feb 2010, 8:07 AM
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
9 Feb 2010, 8:23 AM
The dblclick handling function needs to be broken out and poked into the host TabPanel as the property editTitle.

mitchellsimoens
9 Feb 2010, 8:50 AM
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
30 Apr 2010, 6:27 AM
Very nice, Condor. Thank you. :)

sumit.madan
1 Jun 2010, 3:46 AM
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
2 Sep 2010, 4:46 AM
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
2 Sep 2010, 4:49 AM
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
23 Jun 2011, 4:40 AM
How to apply this plugin on ExtJS 4?

Thanks

sandeshdshetty
4 Jul 2012, 4:31 AM
Does above plugin works for extjs 4.1?
I have tried above plugin extjs 4.1 but did not work.