Question

我在使用编辑器进行内联编辑树节点值，当lage文本的位置发生变化时？以下是我为测试此场景而制作的代码。

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

            });

我使用的是Extjs4.1版本

Answer 1

首先，您应该将编辑器的alingment更改为tl（左上角）。然后它应该始终与节点的左侧对齐。如果要将编辑器与节点中的文本对齐，则还应调整偏移量。

示例：

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

Ext Editor职位问题

1 个答案: