Ext Editor position issue

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 });
}