Extjs HTML编辑器不支持'；t在Ext.form.field.Picker中工作_Extjs_Extjs7

Extjs HTML编辑器不支持'；t在Ext.form.field.Picker中工作

extjs

Extjs HTML编辑器不支持'；t在Ext.form.field.Picker中工作,extjs,extjs7,Extjs,Extjs7,尝试将html编辑器添加到Ext.form.field.Picker时，会显示该编辑器，但在鼠标单击后关闭演示我在网格单元编辑器中使用此控件，在这种情况下重写onFocusLeave没有帮助。主要问题是html编辑器中的视口不是窗口的一部分。到目前为止，我还没有找到比为Ext.ComponentManager onGlobalFocus函数重写更好的方法。当您查看此基本组件的代码时，您会发现以下方法： onFocusLeave: function(e) { this.collapse(

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

演示

我在网格单元编辑器中使用此控件，在这种情况下重写onFocusLeave没有帮助。主要问题是html编辑器中的视口不是窗口的一部分。到目前为止，我还没有找到比为Ext.ComponentManager onGlobalFocus函数重写更好的方法。当您查看此基本组件的代码时，您会发现以下方法：

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

此方法将调用折叠方法，该方法将隐藏选择器：

 /**
     * 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方法的函数体，如下所示：

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

另一种选择是只使用一个普通字段和一个自定义触发器，该触发器显示您在这里定义的onclick窗口

回应您在本答案下的评论

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

当您查看CellEditor的源代码时，您将再次找到此方法：

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”中的默认配置

下面是一个更新的fiddle:

当您查看此基本组件的代码时，您将发现以下方法：

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