Form input field in Window header - extjs

Question

I need to change the ordinary title part of window the be editable for a moment. I tried the following approach, but it seems to fail in several ways. Could someone suggest me a better approach?
var header = window.getHeader();
header.setTitle(''); // Get rid of the original for now
var field = Ext.create('Ext.form.field.Text', {
name: 'Title',
allowBlank: false,
cls: 'myInput',,
value: 'Meh, just some text for now',
listeners : {
el : {
delegate : 'input',
click : function() {
field.focus(false); // Focus but do not select the text
field.selectText(0,0); // The previous failed, try to deselect like this
}
}
}
});
header.insert(0, field); // First, before the tools (several buttons there)
My problems with this are the following;
Without the listener part it is impossible to select the input field at all, all that happens is triggering the moving of the window. With the listener implementation though the contents of the input field get still selected for some reason (without the selectText from 0 to 0). Also it is impossible to use mouse to select parts of the contents because dragging still applies to the whole window, AND the listener implementation's "click" probably also ruins that approach. It is also impossible to move the cursor to specific spot by using mouse click.
So, how should one really go around implementing a usable html input field that replaces window title?

Answer 1

I've tried the following strategy that seems to work: when the mouse cursor enters the input field, disable window drag & drop, and restore it when it leaves.
Here's what it would give with your code:
var killDrag = true;
// Found this by looking into the code: window.dd is an Ext.util.ComponentDragger
// Someone had the good idea to comment that, in there...
window.dd.on({
// Ext.util.ComponentDragger has a beforedragstart event that can cancel the drag.
// Apparently no one had the good idea to mention this event in the API doc.
beforedragstart: function(dd, e) {
if (killDrag) {
return false;
}
}
});
var header = window.getHeader();
header.setTitle(''); // Get rid of the original for now
var field = Ext.create('Ext.form.field.Text', {
name: 'Title',
allowBlank: false,
cls: 'myInput',
value: 'Meh, just some text for now',
listeners : {
el : {
delegate : 'input',
mouseout: function() {
killDrag = false;
},
mouseenter: function() {
killDrag = true;
}
}
}
});
header.insert(0, field); // First, before the tools (several buttons there)