0

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

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

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

  • 在编辑时，然后我单击一个链接，单元格中的输入元素失去焦点并且编辑停止。似乎输入元素已从 dom 中删除。
  • 要获得光标位置，我需要掌握输入元素（链接）。CellEditing 插件上有 4 个事件：beforeedit、cancelledit、edit 和 validateedit。在显示输入元素时，它们都不会被触发。
  • 有一种方法 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，我让它工作了。这是 JsFiddle 上的代码

解决方案是使用覆盖普通 TextField 的 CustomEditor（准确地说是 Picker）：

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

1 回答 1

0

看起来您可以从创建自定义单元格编辑器中受益。它将使您的链接列表靠近您编辑的单元格，因此可以改善外观，并且可以避免您在与它们交互之前看到链接隐藏在哪里的问题。这是一个创建自定义面板的编辑器示例，您可以使用该面板来托管占位符列表。

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>'
]
于 2013-08-02T21:11:17.193 回答