Panel with editable title

[ankri]

Hi guys,

I created a simple extension of the Ext.Panel which allows you to edit the title of the panel by clicking the title text.



Ext.namespace("Ext.ux");

Ext.ux.PanelWEditableTitle = Ext.extend(Ext.Panel,
{
allowBlank: false,
blankText: "This field is required",

afterRender : function()
{
Ext.ux.PanelWEditableTitle.superclass.afterRender.call(this);

// remove the class that prevents the selection of child nodes
this.header.removeClass("x-unselectable");
this.header.dom.style.cssText = "";

this.header.on("click", function(e, cmp)
{
if (e.getTarget().tagName === "SPAN")
{
this.enableEditMode(e, cmp);
}
}, this);
},

enableEditMode : function(e, cmp)
{
var title = cmp.innerHTML;

var span = Ext.DomHelper.overwrite(cmp,
[{
tag :'span'
}]);

// change the configuration to your needs
var textfield = new Ext.form.TextField(
{
allowBlank: this.allowBlank,
blankText: this.blankText,
value: this.getTitle(),
panel: this,
grow: true,
growMin: 200,
growMax: this.header.getWidth() - 10,
restore: function()
{
this.panel.title = this.getValue();
Ext.DomHelper.overwrite(span.parentNode, this.getValue());
}
});

textfield.render(span);

textfield.on("blur", function(field)
{
if (this.isValid())
{
field.restore();
}
});

textfield.on("specialkey", function(field, e)
{
if(e.getKey() == e.ENTER)
{
e.preventDefault();
field.el.dom.blur();
}

if(e.getKey() == e.ESC)
{
field.reset();
field.el.dom.blur();
}
});

textfield.focus(true);
},

getTitle: function()
{
return this.title;
}
});

Ext.reg("panelweditabletitle", Ext.ux.PanelWEditableTitle);

The js file is attached along with an example.html. Just copy the content of the file to your examples folder.

ankri