Question

我有一个使用单元格编辑插件的网格面板。此网格旁边有一组链接，表示可插入单元格的可用占位符。

目标：当用户编辑单元格并单击其中一个链接时，应在用户光标的位置插入相应的占位符。

到目前为止我发现了什么：

编辑时，我点击一个链接，单元格中的输入元素失去焦点，停止编辑。似乎输入元素已从dom中删除。
要获取光标位置，我需要掌握输入元素（link）。 CellEditing插件上有4个事件：beforeedit，canceledit，edit和validateedit。在显示input元素时，它们都不会被触发。
有一个方法Ext.grid.plugin.CellEditingView.startEditByPosition但我认为这只选择了应该编辑的单元格。

请帮忙吗？

修改

我一直坚持实施以下回调。

// var placeholder =
// ...
listeners: {
    itemclick: function(view, link) {
        console.debug('selected placeholder: ', link.data.placeholder)
        console.debug(exampleGrid);
        // Todo: insert placeholder into the grid cell at the cursor position
    }
}

修改2

好的，谢谢@Chris我得到了它的工作。 Here is the code on JsFiddle

解决方案是使用CustomFditor（准确的Picker）覆盖正常的TextField：

Ext.define('CustomEditorField', {
    extend: 'Ext.form.field.Picker',
    alias: 'widget.customeditorfield',
    // ...
    createPicker: function() {
        var me = this,
            format = Ext.String.format;
        return Ext.create('Ext.form.Panel', {
            // ...
            items: [
                {
                    xtype: 'textfield',
                    name: 'description'
                }, Ext.create('Ext.view.View', {
                    listeners: {
                        itemclick: function(view, link) {
                            var textToInsert = link.data.placeholder,
                                textInField = me.picker.getForm().getValues()['description'],
                                position = me.picker.getEl().query('input')[0].selectionStart;

                            var changedText = textInField.substring(0, position) +
                                              textToInsert  + textInField.substring(position);
                            me.picker.getForm().setValues({description: changedText});
                            return false;
                        }
                    },
                    store: {
                        fields: ['placeholder', 'text'],
                        data: [
                            {placeholder: '{param1}', text: 'Parameter 1'},
                            {placeholder: '{param2}', text: 'Parameter 2'}
                        ]
                    },
                    itemSelector: 'a',
                    tpl:  [
                        '<tpl for=".">',
                        '<a href="#" data-placeholder="{placeholder}">{text}</a><br />',
                        '</tpl>'
                    ]
                })
            ],
            listeners: {
                afterrender: function(panel, opts) {
                    panel.getForm().setValues({description: me.getValue()});
                }
            }
        });
    }

Answer 1

看起来您可以从创建自定义单元格编辑器中受益。它会使您的链接列表与您编辑的单元格保持一致，因此它可以改善外观，并且可以避免在您与链接进行交互之前看到隐藏链接的位置的问题。下面是一个编辑器的示例，该编辑器创建了一个可用于托管占位符列表的自定义面板。

http://existdissolve.com/2012/12/extjs-4-custom-editor-for-property-grid/

编辑：

为了解决您对itemclick未被解雇的担忧，我建议您调整视图定义，如下所示：

// other view config props, then...
itemSelector: 'div.item',
tpl:  [
    '<tpl for=".">',
    '<div class="item">{text}</div>',
    '</tpl>'
]

ExtJS 4网格 - 如何在单元格中的光标位置粘贴文本？

1 个答案: