Ext Editor position issue - extjs4

Question

I am using an editor for inline edit tree node value, when lage text comes its position changing? following is the code i made for test this scenario.
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "ong label for testing long options test field.50", leaf: true },
{ text: "long label for testing long options test field.50 long label for testing log option test field. 100", leaf: true },
{ text: "option4", leaf: true }
]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 300,
height: 250,
store: store,
rootVisible: false,
defaultRootId: 0,
renderTo: Ext.getBody(),
listeners: {
itemdblclick: function (View, record, item, index, e, eOpts) {
var editor = new Ext.Editor({
ignoreNoChange: true,
revertInvalid: true,
width: 235,
shadow: false,
//offsets: [-150, 0],
hideEl: false,
field: {
xtype: 'textfield',
maxLength: 500,
enforceMaxLength: true,
allowBlank: false
}
});
editor.startEdit(item, record.get('text'));
editor.on('complete', function (me, value) {
if (value.replace(/^[\s]+/, '').replace(/[\s]+$/, '').replace(/[\s]{2,}/, ' ') != "") {
record.set('text', value);
}
}, item, { single: true });
}
}
});
I am using Extjs4.1 version

Answer 1

First you should change alingment of editor to tl (top-left). It should be then always aligned to the left side of node. If you want to align editor to text in node, then you should also adjust offset.
Example:
itemdblclick: function (View, record, item, index, e, eOpts) {
var item = Ext.get(item);
var images = item.down('td').query('.x-tree-elbow, .x-tree-elbow-empty, .x-tree-elbow-end, .x-tree-elbow-line');
var x = 0;
for (var i = 0, ilen = images.length; i < ilen; ++i) {
x += Ext.get(images[i]).getWidth();
}
var editor = new Ext.Editor({
alignment: 'tl',
ignoreNoChange: true,
revertInvalid: true,
width: 235 - x,
shadow: false,
offsets: [x, 0],
hideEl: false,
field: {
xtype: 'textfield',
maxLength: 500,
enforceMaxLength: true,
allowBlank: false
}
});
editor.startEdit(item, record.get('text'));
editor.on('complete', function (me, value) {
if (value.replace(/^[\s]+/, '').replace(/[\s]+$/, '').replace(/[\s]{2,}/, ' ') != "") {
record.set('text', value);
}
}, item, { single: true });
}