Extjs HTML 编辑器在 Ext.form.field.Picker 中不起作用答案

【问题标题】：Extjs HTML editor doesn't work in Ext.form.field.PickerExtjs HTML 编辑器在 Ext.form.field.Picker 中不起作用
【发布时间】：2020-12-15 02:16:35
【问题描述】：

当尝试将 html 编辑器添加到 Ext.form.field.Picker 时，它显示但在鼠标单击后关闭

演示 https://fiddle.sencha.com/#fiddle/3aik

我在网格单元编辑器中使用此控件，并在这种情况下覆盖 onFocusLeave 没有帮助。主要问题是 html 编辑器中的视口不是窗口的一部分。到目前为止，我还没有想出什么比重写 Ext.ComponentManager onGlobalFocus 函数 https://fiddle.sencha.com/#view/editor&fiddle/3ak0

【问题讨论】：

标签： extjs extjs7

【解决方案1】：

当你查看这个基础组件的代码时，你会发现这个方法：

onFocusLeave: function(e) {
  this.collapse();
  this.callParent([e]);
},

https://docs.sencha.com/extjs/6.5.3/classic/src/Picker.js.html

这个方法会调用折叠方法来隐藏选择器：

 /**
     * Collapses this field's picker dropdown.
     */
    collapse: function() {
        var me = this;
        
        if (me.isExpanded && !me.destroyed && !me.destroying) {
            var openCls = me.openCls,
                picker = me.picker,
                aboveSfx = '-above';
 
            // hide the picker and set isExpanded flag
            picker.hide();
            me.isExpanded = false;
 
            // remove the openCls
            me.bodyEl.removeCls([openCls, openCls + aboveSfx]);
            picker.el.removeCls(picker.baseCls + aboveSfx);
            
            if (!me.ariaStaticRoles[me.ariaRole]) {
                me.ariaEl.dom.setAttribute('aria-expanded', false);
            }
 
            // remove event listeners
            me.touchListeners.destroy();
            me.scrollListeners.destroy();
            Ext.un('resize', me.alignPicker, me);
            me.fireEvent('collapse', me);
            me.onCollapse();
        }
    },

一个简单的技巧可以是注释 onFocusLeave 方法的函数体，如下所示：https://fiddle.sencha.com/#fiddle/3ajo&view/editor

onFocusLeave: function(e) {
        // this.collapse();
        //this.callParent([e]);
    },

如果这会导致一些副作用，您还可以在那里设置一些条件。

另一种选择可能是仅使用带有自定义触发器的普通字段，该触发器显示 onclick 您在此处定义的此窗口。

回应您在此答案下的评论。

选择器字段不是编辑器字段。

当你查看 CellEditor 的 Source 时，你会再次发现这个方法：

onFocusLeave: function(e) {
        var me = this,
            view = me.context.view,
            related = Ext.fly(e.relatedTarget);
 
        // Quit editing in whichever way.
        // The default is completeEdit.
        // If we received an ESC, this will be cancelEdit.
        if (me[me.focusLeaveAction]() === false) {
            e.event.stopEvent();
            return;
        }
 
        delete me.focusLeaveAction;
 
        // If the related target is not a cell, turn actionable mode off
        if (!view.destroyed && view.el.contains(related) &&
            (!related.isAncestor(e.target) || related === view.el) &&
            !related.up(view.getCellSelector(), view.el, true)) {
            me.context.grid.setActionableMode(false, view.actionPosition);
        }
 
        me.cacheElement();
        
        // Bypass Editor's onFocusLeave
        Ext.container.Container.prototype.onFocusLeave.apply(me, arguments);
    },

在这种情况下，您可以这样定义编辑器字段：

 columns: [{
                xtype: 'gridcolumn',
                dataIndex: 'name',
                text: 'Name',
                flex: 1,
                editor: {
                    field: {xtype: 'edithtmlfield'},
                    focusLeaveAction: false
                }
            }],
            plugins: [{
                ptype: 'cellediting'
            }]

这将覆盖 'completeEdit' 中的默认配置。

https://docs.sencha.com/extjs/6.5.3/classic/src/CellEditor.js.html

这是一个更新的小提琴：https://fiddle.sencha.com/#view/editor&fiddle/3aoa

【讨论】：

我在网格单元编辑器中使用此控件，并在这种情况下覆盖 onFocusLeave 没有帮助。主要问题是 html 编辑器中的视口不是窗口的一部分。到目前为止，我还没有想出比为 Ext.ComponentManager onGlobalFocus 函数 fiddle.sencha.com/#view/editor&fiddle/3ak0 覆盖更好的方法
你检查过我的小提琴吗？它是您的一个分支，并显示窗口将在焦点更改后保留。
它在网格中不起作用，fiddle.sencha.com/#view/editor&fiddle/3amh
是的，但您最初的问题提出了一些不同的问题 - 字段选择器不是单元编辑器。我想您需要查看 CellEditor 并从那里创建/扩展/采用一些方法/类。
谢谢！此解决方案优于覆盖 Ext.ComponentManager